今天继续学习Webpack技术。
文章是这篇 入门Webpack，看这篇就够了
在开发的时候，每次修改代码都需要重新打包德华会非常麻烦，于是一种新的技术热更新出现了。每次修改代码保存之后，都会自动构建打包新的代码。
Webpack可以提供这个服务，它会基于node.js构建一个本地服务器，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。
Loaders是webpack中最让人激动人心的功能之一了。通过使用不同的loader，webpack通过调用外部的脚本或工具可以对各种各样的格式的文件进行处理，比如说分析JSON文件并把它转换为JavaScript文件，或者说把下一代的JS文件（ES6，ES7)转换为现代浏览器可以识别的JS文件。或者说对React的开发而言，合适的Loaders可以把React的JSX文件转换为JS文件。
这里文章的demo中有一处bug
module: {//在配置文件里添加JSON loader
loaders: [
{
test: /\.json$/,
loader: "json"
}
]
},
上面的loader应该为“json-loader”，与下载的功能名字相同，不然会报如下错误
ERROR in ./app/Greet.js
Module not found: Error: Can't resolve 'json' in '/Users/xxx/Documents/tryWebp'
BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'json-loader' instead of 'json',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
这时候我的webpack.config.js是这样的
module.exports = {
// 打包模式之一，可以用这个打包开发环境，速度较快，但是安全性不足
devtool: 'eval-source-map',
// 源文件，从这个文件引申出去的所有文件的来源，这个文件中多有import的都会被一起打包。
entry: __dirname + "/app/main.js",
// 输出文件的名字以及输出路径
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
// JSON loader
module: {
loaders: [
{
test: /\.json$/,//正则表达式匹配文件名称
loader: "json-loader"//一个loader的名称，应与下载的名字完全相同
//include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
//query：为loaders提供额外的设置选项（可选）
}
]
},
// 热更新相关配置
devServer: {
port: 8080,
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
}
先到这边，剩下明天继续研究。
