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 ！！