webpack 设置.babelrc "modules": false。但是每次得到的文件内容相同，chunkhash值不同

Question

//webpack.common.js

module.exports={
    entry:{
        index:'./src/js/index.js',
    },
    output:{
        path:path.resolve(__dirname,'../dist')
    },
    module:{
        rules:[
            {
                test:/\.js$/,
                include: path.resolve(__dirname, '../src'),
                use: 'happypack/loader?id=js'
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',
            template:'index.ejs',
            title:'测试webpack',
            minify: {
                removeComments: true,// 去除注释
                collapseWhitespace: true,//是否去除空格
                removeRedundantAttributes: true,
                useShortDoctype: true,
                removeEmptyAttributes: true,// 去除空属性
                removeStyleLinkTypeAttributes: true,
                keepClosingSlash: true,
                minifyJS: true,
                minifyCSS: true,
                minifyURLs: true
            }
        }),
        new HappyPack({
            id: 'js',
            threads: 4,
            threadPool: happyThreadPool,
            loaders: [{
                loader: 'babel-loader?cacheDirectory=true'
            }]
        }),

    ]
};

//webpack.prod.js


module.exports = merge(webpackBaseConfig, {

    output:{
        filename:'js/[name]-[chunkhash:5].js',
        chunkFilename:'js/[name]-chunk-[chunkhash:5].js',
        publicPath:'./'
    },
    module:{
        rules:[
            {
                test:/\.scss$/,
                // include: path.resolve(__dirname, '../src'),
                use: ExtractTextPlugin.extract({
                  fallback:'style-loader',
                  use:'happypack/loader?id=scss'
                })
            },
  
        ]
    },
    plugins:[
        new CleanWebpackPlugin(['dist'],{
            root: path.resolve(__dirname, '../'),
            verbose: true
        }),
        new ExtractTextPlugin({
          filename:'css/[name]-[contenthash:5].min.css',//[contenthash]：由 css 提取插件提供，根据自身内容计算得来
        }),
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,//处理的是ExtractTextPlugin导出的CSS文件，不是原SCSS文件
          cssProcessor: require('cssnano'),
          cssProcessorPluginOptions: {
            preset: ['default', { discardComments: { removeAll: true } }],
          },
          canPrint: true
        }),
        new webpack.optimize.CommonsChunkPlugin({
            names:["manifest"],
            minChunks: Infinity,
            filename:'js/common/[name]-[chunkhash:5].js'
        }),
        new webpack.optimize.UglifyJsPlugin(),

        new webpack.HashedModuleIdsPlugin (),

        new HappyPack({
            id: 'scss',
            threads: 4,
            threadPool: happyThreadPool,
            loaders: [
                {
                    loader:'css-loader'
                },
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        config: {
                          path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
                        }
                    }
                },
                {
                    loader:'sass-loader'
                }
            ]
        }),
    ]
});

//index.js

import 'babel-polyfill'

import * as cla from './caculate.js'
console.log('sum(1,2)='+cla.sum(1,2));
console.log('minus(3,1)='+cla.minus(3,1));

//caculate.js
export function sum(a,b) {
    return a+b;
}
export function minus(a,b) {
    return a-b;
}
export function muti(a,b) {
    return a*b;
}

以上文webpack项目的主要配置,index.js中省去了ES6部分代码。为了能够在使用Babel的情况下，Tree Shaking能生效。配置.bebelrc文件如下

{
    "presets":[
        ["babel-preset-env",{
            "modules": false,
            "targets":{
                "browers":[">1%","last 2 versions"]
            },
            "useBuiltIns":true
        }]
    ]
}

当"modules": false后，Tree Shaking成功。但发现一个问题。 但改变caculate.js为如下，去掉muti方法后。注意在index.js中并没有调用这个方法。这个方法会被Tree Shaking掉。

//caculate.js
export function sum(a,b) {
    return a+b;
}
export function minus(a,b) {
    return a-b;
}

两次输出的内容相同但是输出的文件名不同，既chunkhash不同。为什么？？？？

两次输出结果分别为

//index-a102a.js
webpackJsonp([0],{"4uQM":function(e,n,t){"use strict";n.b=function(e,n){return e+n},n.a=function(e,n){return e-n}},vGYV:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});t("4uQM")}},["vGYV"]);

//index-a8115.js
webpackJsonp([0],{"4uQM":function(e,n,t){"use strict";n.b=function(e,n){return e+n},n.a=function(e,n){return e-n}},vGYV:function(e,n,t){"use strict";Object.defineProperty(n,"__esModule",{value:!0});t("4uQM")}},["vGYV"]);

Answer 1

不大清楚，如果结果如你所说，可能此 内容hash值是依据源文件依赖生成的，而不是依据打包后文件内容生成的吧