解決方案

生成manifest文件

module.exports = {
    entry: {
        app: './js/app.js',
        vendor: ['./js/moduleA', './js/moduleB']
    },
    output: {
        path: path.resolve(__dirname, './dist/js'), //編譯到當(dāng)前目錄曹铃，這個(gè)目錄要求要絕對(duì)路徑
        filename: '[name].[chunkhash].js', //編譯后的文件名字
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']     
        })
    ]
};

每次構(gòu)建時(shí)饵史，webpack 生成了一些 webpack runtime 代碼盒延，用來幫助 webpack 完成其工作校翔。當(dāng)只有一個(gè) bundle 的時(shí)候踱稍，runtime 代碼駐留在其中曲饱。但是當(dāng)生成多個(gè) bundle 的時(shí)候，運(yùn)行時(shí)代碼被提取到了公共模塊中珠月，在這里就是 vendor 文件扩淀。這些runtime代碼會(huì)影響vendor的hash。因此：

我們將運(yùn)行時(shí)代碼（ webpack runtime）提取到一個(gè)單獨(dú)的 manifest 文件中桥温，使得這些代碼不會(huì)影響vendor的hash引矩。
※ output的filename要用chunkhash梁丘，如果用hash是不會(huì)有效果的
※ 不一定命名為manifest侵浸，取名任意

問題：打包后的文件帶有hash旺韭，如何在html中正確引用？

1掏觉、使用webpack-manifest-plugin從webpack編譯統(tǒng)計(jì)中獲取文件名

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'), //編譯到當(dāng)前目錄区端，這個(gè)目錄要求要絕對(duì)路徑
        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'), //編譯到當(dāng)前目錄织盼，這個(gè)目錄要求要絕對(duì)路徑
        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'], //后綴名自動(dòng)補(bǔ)全
    }
};

會(huì)在output指定的目錄中生成html酱塔，并自動(dòng)引用對(duì)應(yīng)的模塊