上主要该了这些内容：
...
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
...
// 配置上下文到项目根目录，这样可以使用相对根目录的路径访问其他文件，如下面的'./template/index.html'
context: config.rootPath,
// 修改output
output: {
filename: '[name].[hash:8].js',
chunkFilename: 'chunk.[id].[hash:8].js',
publicPath: config.publicPath
},
...
// 在plugins节点添加
new HtmlWebpackPlugin({
template: './template/index.html'
}),
new ExtractTextPlugin({
filename: 'styles.[contenthash].css'
}),
可以看到我吧output的filename和chunkFilename的命名方式都改成攻台配置的了，故生成的将会是形如main.1.xxxx.js的js文件。styles.css也加入了hash后缀。
在项目根目录下建一个模板‘/template/index.html'，内容比以前的index.html更简单：
<html>
<head>
<title>React Webpack Configuration Demo</title>
</head>
<body>
<p>Hello world</p>
<div id='main'></div>
</body>
</html>
删除掉原来的index.html文件吧，这是访问我们的网页就可以看到这样的内容：
它会自动搜索到需要的外部依赖，并且以正确的顺序加载它们。
这里我尚有个疑问： index.html这个文件每次都会获取到最新的内容吗？浏览器对它有缓存吗？根据看到的结果看应该没有，不然js文件的更新就不会被正确加载了。那如果没有被缓存又是为什么呢？，webpack有通过哪种方式处理吗？
拆分dev和prod两种环境
我使用比较简单的方式拆分开发环境和生成环境的配置，分别使用不同的配置文件就行了。
把原来开发用的的webpack.config.js改成webpack.dev.config.js，并备份一份命名为webpack.prod.config.js。修改package.json和server中对配置文件的引用。
然后针对生成环境的配置文件做一些修改，主要涉及导出目录、代码混淆、去除冗余代码等相关配置。用到了以下插件：
- DefinePlugin：定义环境变量
- webpack.LoaderOptionsPlugin：去除调试代码，压缩代码
- webpack.optimize.UglifyJsPlugin：针对JS的混淆配置
- CopyWebpackPlugin：复制手动引入的资源文件到指定目录
最后改了一下package.json中的scripts：
这里就不贴出详细代码了，看源码吧。
源码下载地址：https://pan.baidu.com/s/1slHIPKp