//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,//ExtractTextPluginCSSSCSS
          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;
}

for the main configuration of the webpack project above, part of the ES6 code is omitted from index.js. In order to be able to use Babel in the case of, Tree Shaking can be effective. Configure the .bebelrc file as follows

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

, Tree Shaking succeeded when "modules": false. But I found a problem. But change the caculate.js to the following, after removing the muti method. Notice that this method is not called in index.js. This method will be dropped by Tree Shaking.

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

the contents of the two outputs are the same, but the output filenames are different, that is, the chunkhash is different. Why would you do that?

the results of the two outputs are

//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"]);