鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ webpack 設(shè)置.babelrc "modules":

webpack 設(shè)置.babelrc "modules": false。但是每次得到的文件內(nèi)容相同,chunkhash值不同

//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 提取插件提供,根據(jù)自身內(nèi)容計(jì)算得來
        }),
        new OptimizeCssAssetsPlugin({
          assetNameRegExp: /\.css$/g,//處理的是ExtractTextPlugin導(dǎo)出的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'  // 這個(gè)得在項(xiàng)目根目錄創(chuàng)建此文件
                        }
                    }
                },
                {
                    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項(xiàng)目的主要配置,index.js中省去了ES6部分代碼。為了能夠在使用Babel的情況下,Tree Shaking能生效。配置.bebelrc文件如下

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

當(dāng)"modules": false后,Tree Shaking成功。但發(fā)現(xiàn)一個(gè)問題。 但改變caculate.js為如下,去掉muti方法后。注意在index.js中并沒有調(diào)用這個(gè)方法。這個(gè)方法會(huì)被Tree Shaking掉。

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

兩次輸出的內(nèi)容相同但是輸出的文件名不同,既chunkhash不同。為什么????

兩次輸出結(jié)果分別為

//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"]);
回答
編輯回答
骨殘心

不大清楚,如果結(jié)果如你所說,可能此 內(nèi)容hash值是依據(jù)源文件依賴生成的,而不是依據(jù)打包后文件內(nèi)容生成的吧

2017年12月3日 18:31