Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。
创建React项目
npm install -g create-react-app
create-react-app ReactWebpack
cd ReactWebpack
npm start
通过 create-react-app 就可以创建一个react的项目，进入项目目录执行 npm start 就可以看到运行成功的页面。
修改React项目
react 成功页面
react 成功页面
安装 Webpack
//全局安装webpack，优点是打包时可以直接输webpack命令
npm install -g webpack
//在本项目中安装webpack，--save-dev的意思是将依赖写入项目的package.json文件
npm install --save-dev webpack
webpack 成功页面
安装和配置 Babel
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
Babel 成功页面
配置 webpack.config.js
- 在项目目录下新建 webpack.config.js
- 在webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './public'),
filename: 'bundle.js',
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
query: {
presets: ['es2015','react']
}
}
]
}
};
修改public的index.html
在index.html中添加js的引用
<script src="bundle.js" ></script>
修改index.html
安装并启用webpack-dev-server
npm install --save-dev webpack-dev-server
修改project.json,启动webpack-dev-server
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base public",
修改index.html
