解决方案
生成manifest文件
module.exports = {
entry: {
app: './js/app.js',
vendor: ['./js/moduleA', './js/moduleB']
},
output: {
path: path.resolve(__dirname, './dist/js'), //编译到当前目录，这个目录要求要绝对路径
filename: '[name].[chunkhash].js', //编译后的文件名字
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
})
]
};
每次构建时，webpack 生成了一些 webpack runtime 代码，用来帮助 webpack 完成其工作。当只有一个 bundle 的时候，runtime 代码驻留在其中。但是当生成多个 bundle 的时候，运行时代码被提取到了公共模块中，在这里就是 vendor 文件。这些runtime代码会影响vendor的hash。因此：
我们将运行时代码（ webpack runtime）提取到一个单独的 manifest 文件中，使得这些代码不会影响vendor的hash。
※ output的filename要用chunkhash，如果用hash是不会有效果的
※ 不一定命名为manifest，取名任意
问题：打包后的文件带有hash，如何在html中正确引用？
1、使用webpack-manifest-plugin从webpack编译统计中获取文件名
var ManifestPlugin = require('webpack-manifest-plugin');
module.exports = {
entry: {
app: './js/app.js',
vendor: ['./js/moduleA', './js/moduleB']
},
output: {
path: path.resolve(__dirname, './dist/js'), //编译到当前目录，这个目录要求要绝对路径
filename: '[name].[chunkhash].js', //编译后的文件名字
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'] //将公共模块提取，生成名为‘verdors’的chunk
}),
new ManifestPlugin({
fileName: 'my-manifest.json'
})
]
};
生成my-manifest.json
{
"app.js": "app.155567618f4367cd1cb8.js",
"vendor.js": "vendor.c2330c22cd2decb5da5a.js"
}
最后怎么在html中用到还不清楚
2、使用html-webpack-plugin
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './js/app.js',
vendor: ['./js/moduleA', './js/moduleB']
},
output: {
path: path.resolve(__dirname, './dist/js'), //编译到当前目录，这个目录要求要绝对路径
filename: '[name].[chunkhash].js', //编译后的文件名字
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest'] //将公共模块提取，生成名为‘verdors’的chunk
}),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './index.html'
})
],
resolve: {
extensions: ['.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
}
};
会在output指定的目录中生成html，并自动引用对应的模块
