现在很流行使用webpack打包，好处不多说。用了就知道。但是其实配置webpack是挺麻烦得。但是随着wepback4得升级，简化了流程。变得简单了。我这里只是讲解怎么优化webpack打包速度。不讲解基础配置。

注意: 我这个是多页面打包。得方案

优化点1 （optimization.splitChunks）

   stats: {
        // Add asset Information
        assets: false,
        // Add children information
        children: false,

        // Add chunk information (setting this to `false` allows for a less verbose output)
        chunks: false,
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                nocommon:{
                    test: (module, chunk) => {
                    },
                     chunks: 'initial',
                     name: 'nocommon',
                     filename: 'nocommon.[hash:8].js',
                     priority: 10, // 优先
                     enforce: true
                },
                common: { // 将第三方模块提取出来
                    // test: /(node_modules)/,

                    // test: /(node_modules)/,
                    // test: /node_modules\/(?!front-common)/,
                    test: (module, chunk) => {
                        if (module.resource) {
                        }
                    },
                    chunks: 'initial',
                    name: 'common',
                    filename: 'common.[hash:8].js',
                    priority: 10, // 优先
                    enforce: true
                }
            }
        }
    },

stats 简化控制台输出内容，好日志。
splitChunks webpack4 自带内容。作用主要是把，公用得文件给抽取出来。防止多次打包，导致提及变慢。可以按照自己得想法打包。

优化点2

ParallelUglifyPlugin

    new ParallelUglifyPlugin({
                cacheDir: '.cache/',
                // Optional regex, or array of regex to match file against. Only matching files get minified.
                // Defaults to /.js$/, any f÷

                uglifyES: {
                    // These pass straight through to uglify-es.
                    // Cannot be used with uglifyJS.
                    // uglify-es is a version of uglify that understands newer es6 syntax. You should use this option if the
                    // files that you're minifying do not need to run in older browsers/versions of node.
                }
            }),

这个主要是开多核压缩，可以使用多进程。
注意：cacheDir: '.cache/',可以生成一个缓存文件夹。

优化点3

 new HappyPack({
            id: 'happy-babel-js',
            loaders: [{
                loader: 'babel-loader'
                // options: {
                //     presets: ['@babel/preset-env'], // presets设置的就是当前js的版本
                // }
            }],
            threadPool: happyThreadPool
        })
  {
                test: /\.(js)$/,
                // exclude: /(node_modules)/,
                // include: [/(src)/, /(node_modules\/front-common)/],
                include: [/(src)/, /(node_modules)/],
                use: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 },

HappyPack 也是开启多核

这个只是大概列举出来那些东西，提供一个git 仓库。
webpack4极速