webpack优化解决项目体积大、打包时间长、刷新时间长问题！

import $ from 'jquery'

{ 
			test: /\.js$/, 
			//使用include来指定编译文件夹
			include: path.resolve(__dirname, '../src'),
			//使用exclude排除指定文件夹
			exclude: /node_modules/
			use: [{
				loader: 'babel-loader'
			}]
		}

{ 
			test: /\.js$/,
			use: [{
			    //如果文件没被改动则使用缓存
				loader: 'babel-loader?chaheDirectory'
			}]
		}

 {
        test: /\.js$/,
        use: [
          'cache-loader',
          'babel-loader'
        ],
        include: path.resolve('src')
      }

//这样配置我们就不用写后缀了
resolve:{
    extensions:['js','jsx']
}

//首先引入happypack
const HappyPack = require('happypack')
//然后在lorder中使用即可，以babel-lorder为例
 {
                test: /\.js$/,
                // 对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            }
//需要在plugins中使用HappyPack
  // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 处理 .js 文件，用法和 Loader 配置中一样，也能开启缓存
            loaders: ['babel-loader?cacheDirectory']
        }),

 {
        test: /\.js$/,
        exclude: /node_modules/,
        // 创建一个 js worker 池
        use: [ 
        //直接在loader之前使用
          'thread-loader',
          'babel-loader'
        ] 
      },
    //自定义配置行
    use[
    {
    loader: "thread-loader",
    // loaders with equal options will share worker pools
    // 设置同样option的loaders会共享
    options: {
      // worker的数量，默认是cpu核心数
      workers: 2,
      // 一个worker并行的job数量，默认为20
      workerParallelJobs: 50,
      // 添加额外的node js 参数
      workerNodeArgs: ['--max-old-space-size=1024'],
      // 允许重新生成一个dead work pool
      // 这个过程会降低整体编译速度
      // 开发环境应该设置为false
      poolRespawn: false,
      //空闲多少秒后，干掉work 进程
      // 默认是500ms
      // 当处于监听模式下，可以设置为无限大，让worker一直存在
      poolTimeout: 2000,
      // pool 分配给workder的job数量
      // 默认是200
      // 设置的越低效率会更低，但是job分布会更均匀
      poolParallelJobs: 50,
      }
    }
    'babel-loader'
    ]

//引入插件
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
 plugins: [
  // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
 ]

//引入webpack
const webpack = require('webpack');
//使用webpack提供的热更新插件
   plugins: [
   new webpack.HotModuleReplacementPlugin()
    ],
    //最后需要在我们的devserver中配置
     devServer: {
+     hot: true
    },

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')
const { srcPath, distPath } = require('./paths')

module.exports = {
  mode: 'development',
  // JS 执行入口文件
  entry: {
    // 以 React为例 模块的放到一个单独的动态链接库
    react: ['react', 'react-dom']
  },
  output: {
    // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
    // 也就是 entry 中配置的 react 和 polyfill
    filename: '[name].dll.js',
    // 输出的文件都放到 dist 目录下
    path: distPath,
    // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
    // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
    library: '_dll_[name]',
  },
  plugins: [
    // 接入 DllPlugin
    new DllPlugin({
      // 动态链接库的全局变量名称，需要和 output.library 中保持一致
      // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
      // 例如 react.manifest.json 中就有 "name": "_dll_react"
      name: '_dll_[name]',
      // 描述动态链接库的 manifest.json 文件输出时的文件名称
      path: path.join(distPath, '[name].manifest.json'),
    }),
  ],
}

// 第一，引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
 plugins: [
  //告诉 Webpack 使用了哪些动态链接库
        new DllReferencePlugin({
            // 描述 react 动态链接库的文件内容
            manifest: require(path.join(distPath, 'react.manifest.json')),
        }),
 ]

import('./util.js').then(data=>{  //  懒加载
        console.log(data.default)  //拿到加载的文件里面的数据信息  输出到控制台上
    })

rules: [
            // 图片 - 考虑 base64 编码的情况
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        // 小于 5kb 的图片用 base64 格式产出
                        // 否则，依然延用 file-loader 的形式，产出 url 格式
                        limit: 5 * 1024,
                        // 打包到 img 目录下
                        outputPath: '/img1/',
                        // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                        // publicPath: 'http://cdn.abc.com'
                    }
                }
            },
        ]

output: {
        filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 后缀
        path: distPath
    },

    optimization: {
      
        // 分割代码块
       splitChunks: {
        chunks: "async”,//默认作用于异步chunk，值为all/initial/async/function(chunk),值为function时第一个参数为遍历所有入口chunk时的chunk模块，chunk._modules为chunk所有依赖的模块，通过chunk的名字和所有依赖模块的resource可以自由配置,会抽取所有满足条件chunk的公有模块，以及模块的所有依赖模块，包括css
        minSize: 30000,  //表示在压缩前的最小模块大小,默认值是30kb
        minChunks: 1,  // 表示被引用次数，默认为1；
         maxAsyncRequests: 5,  //所有异步请求不得超过5个
        maxInitialRequests: 3,  //初始话并行请求不得超过3个
        automaticNameDelimiter:'~',//名称分隔符，默认是~
        name: true,  //打包后的名称，默认是chunk的名字通过分隔符（默认是～）分隔
        cacheGroups: { //设置缓存组用来抽取满足不同规则的chunk,下面以生成common为例
         common: {
         name: 'common',  //抽取的chunk的名字
         chunks(chunk) { //同外层的参数配置，覆盖外层的chunks，以chunk为维度进行抽取
         },
         test(module, chunks) {  //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。自己尝试过程中发现不能提取出css，待进一步验证。
         },
        priority: 10,  //优先级，一个chunk很可能满足多个缓存组，会被抽取到优先级高的缓存组中
       minChunks: 2,  //最少被几个chunk引用
       reuseExistingChunk: true，//  如果该chunk中引用了已经被抽取的chunk，直接引用该chunk，不会重复打包代码
       enforce: true  // 如果cacheGroup中没有设置minSize，则据此判断是否使用上层的minSize，true：则使用0，false：使用上层minSize
       }
    }
}
        }

// a.js
export const a = 'a';
export const b = 'b';

// b.js
import * as c from "./a";
export { c };

// index.js
import * as module from "./b";
console.log(module.c.a);

 mode: 'production',