前提： 已经安装nodejs和npm

#全局安装webpack 自动构建化工具，职能管理项目；webpack-dev-server是开发工具，提供 Hot Module Replacement 功能
# webpack 介绍：http://webpack.github.io/docs/what-is-webpack.html

npm install -g webpack webpack-dev-server

#在项目文件夹路径下，初始化npm项目

npm init

#安装webpack和webpack-dev-server到项目中

npm install webpack webpack-dev-server --save-dev

#可选：
#安装css-loader、 style-loader、 image-loader,可以在js下加载css样式文件和图片（可选）

（webpack还可以安装其他功能，如code-splitting等）

npm install css-loader style-loader image-loader --save

#安装reactJs依赖包（react react-dom）和babel依赖包（转换jsx-js等）

npm install --save react react-dom babel-preset-react babel-preset-es2015 babel-loader babel-core

#新建webpack.config.js到根目录下,添加以下内容(loader可选)：

module.exports = {

entry: "./index.js",

output: {

path: __dirname,

filename: "bundle.js"

},

module: {

loaders: [

{

test: /\.js[x]?$/,

exclude: /node_modules/,

loader: 'babel-loader?presets[]=es2015&presets[]=react',

}, {

test: /\.css$/,

loader: 'style-loader!css-loader'

},{ test: /\.(png|jpg)$/,

loader: 'url-loader?limit=8192'

}

]

}

};

#在package.json下添加脚本

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"build": "webpack",

"start": "webpack-dev-server --devtool eval --progress --colors --hot",

"deploy": "NODE_ENV=production webpack -p",

"deploy-windows": "SET NODE_ENV=production & webpack -p ",

"validate": "npm ls"

}

#添加各个文件到根目录下
---index.js

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>我的世界</h1>,document.querySelector('#container'));

--index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <title>index</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <div id="container">

    </div>

    <script type="text/javascript" src="bundle.js"></script>

</body>

</html>

#运行后打开http://127.0.0.1:8080/ 即可以

npm start

D1.1.利用npm（webpack）构建基本reactJS项目的更多相关文章

  1. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  2. 用webpack构建一个常规项目,好处和坏处分析

    最近项目改版,用webpack重新架构. 些许心得我会写几篇记录一下. 好处如下: 1.ES6语法用起来,babel-loader转义,各种新语法用起来. 2.import 语法写起来,webpack ...

  3. webpack工具学习 构建简单vue项目（不依赖vue-cli） webpack4.0

    目的用webpack构建简单前端项目 1.npm init   (npm init -y)  形成package.json 2.npm install --save-dev webpack  形成 n ...

  4. Maven(3)-利用intellij idea创建maven web项目

    本文通过一个例子来介绍利用maven来构建一个web项目.开发工具:intellij idea. 一.新建maven项目 此处选择:Create from archetype.表示从已有的maven模 ...

  5. 利用webpack构建vue项目

    快速搭建vue项目 一,确认自己有无搭建好node以及npm环境,这些是前提,具体安装方法可参考https://nodejs.org/en/. 二,开始构建项目. 第1步:新建一个文件夹,随意命名. ...

  6. 提高 webpack 构建 Vue 项目的速度

    前言 最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了.在项目中,引入了比较多的第三方库,导致项目大, ...

  7. 利用npm安装/删除/发布/更新/撤销发布包 --社会我npm哥，好用话不多

      一.什么是npm? npm是javascript的包管理工具,是前端模块化下的一个标志性产物 简单地地说,就是通过npm下载模块,复用已有的代码,提高工作效率   1.从社区的角度:把针对某一特定 ...

  8. 利用 vue-cli 构建一个 Vue 项目

    一.项目初始构建 现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli . 首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令: $ npm inst ...

  9. (24/24) webpack小案例--自己动手用webpack构建一个React的开发环境

    通过前面的学习,对webpack有了更深的认识,故此节我们就利用前面相关知识自己动手用webpack构建一个React的开发环境,就算是一个小案例吧. 注:此处使用的开发工具是Webstorm. 1. ...

随机推荐

  1. Missing artifact com.microsoft.sqlserver:sqljdbc4:jar:4.0

    maven构建项目的时候遇到这个错误: 一.直接原因 制定路径下确实没有sqljdbc4.jar文件. 二.根本原因 微软不允许以maven的方式直接下载该文件. 三.解决办法 3.1 手动下载相关库 ...

  2. C#的四种Timer介绍

    一.Timer的几个类别 1.System.Threading.Timer 2.System.Timers.Timer 3.System.Windows.Forms.Timer 4.System.Wi ...

  3. CSS选择器详解

    选择器是CSS的核心,从最初的元素.class/id选择器,演进到伪元素.伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单. 1.元素选择器 这是最基本的CSS选择器, ...

  4. 【转】部分电脑安装升级 ubuntu 12.04 后无法挂起问题的解决(挂起无法唤醒同样有效)

    原文地址:http://blog.csdn.net/longerzone/article/details/7860232 我的Ubuntu12.04是安装的windows桌面安装版(使用wubi安装) ...

  5. pandas应用之分组因子暴露和分位数分析

    pandas应用之分组因子暴露和分位数分析 首先感谢原书作者Mes McKinney和batteryhp网友的博文, 俺在此基础上继续探索python的神奇功能. 用A股的实际数据, 以书里的代码为蓝 ...

  6. MIT牛人解说数学体系

    https://www.douban.com/group/topic/11115261/ 在过去的一年中,我一直在数学的海洋中游荡,research进展不多,对于数学世界的阅历算是有了一些长进. 为什 ...

  7. CSS3的基础用法

    CSS3的现状:1.浏览器支持程度差,需要添加私有前缀 2.移动端支持优于PC端 3.不断改进中 4.应用相对广泛 在CSS3中增加新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度.C ...

  8. grep 使用或条件 ( grep -e )

    test@k1rhel5822161:/home/test>cat 31 52 33 24567test@k1rhel5822161:/home/test>grep -e '2|3' 3t ...

  9. 关于codeblock中一些常用的快捷键（搬运）

    关于codeblock中一些常用的快捷键(搬运) codeblock作为一个常用的C/C++编译器,是我最常用的一款编译器,但也因为常用,所以有时为了更加快速的操作难免会用到一些快捷键,但是因为我本身 ...

  10. python爬取网易评论

    学习python不久,最近爬的网页都是直接源代码中直接就有的,看到网易新闻的评论时,发现评论时以json格式加载的..... 爬的网页是习大大2015访英的评论页http://comment.news ...