WebPack 热加载配置，中

WebPack 热加载配置(中)

采用WebPack2进行打包

WebPack2安装sudo npm install -g webpack

WebPack-dev-server安装sudo npm install -g webpack-dev-server

全局安装完后进行项目目录下的安装！！！！（安装的时候最好在前面加上sudo，有时权限不够会安装失败）

$ sudo npm install webpack --save

$ sudo npm install webpack-dev-server --save

出现问题可以看React配置必踩坑！！！

在目录文件下建立一个webpack.config.js

很多参考都是采用WebPack1进行打包，对于webpack2更新后的讲解很少

不过还是可以通过官方文档，加上对webpack1的学习，自己还是琢磨出了webpack2如何配置，(^o)/~，如下

WebPack2配置信息

// webpack.config.js

var webpack = require("webpack");

var path = require("path");

module.exports = {

devtool: 'source-map',

context: path.resolve(__dirname, "src"),

entry: "./js/index.js",

output: {

path: path.resolve(__dirname, "src"),

filename: 'bundle.js' // 打包输出的文件

},

module: {

rules: [{

test: /.js$/, // test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译

exclude: /(node_modules)/,

use: [{

loader: 'babel-loader',

//配置参数;

options: { presets: ['es2015','react'] }

}],

}]

},

};

接下来运行WebPack打包

在Mac终端中，项目的根目录下，webpack进行打包，成功打包后会在src目录下生成bundle.js，在浏览器中查看

原本页面上的123覆盖成了hello world ！！