优化打包构建速度-开发体验和效率
    优化产出代码-产品性能

    优化babel-loader：es6代码没有更改的就不需要重新编译

    1. {
    2.     test:/\js$/,
    3.   use:['babel-loader?cacheDirectory'],//开启缓存    
    4.   include:path.resolve(__dirname,'src'), // 包含
    5.   //exclude:path.resolve(__dirname,'node-modules')    //排除    两者选一 include、exclude
    7. }

    IgnorePlugin：能够使得指定目录被忽略，从而使得打包变快，文件变小
    问题存在与解决：使用中手动引入中文语言的目录

    let Webpack = require('webpack');
plugins:[
    new Webpack.IgnorePlugin(/\.\/locale/,/moment/),//moment这个库中，如果引用了./locale/目录的内容，就忽略掉，不会打包进去
]

    noParse：解析js文件中，会去解析js中其他依赖库，这样去设置之后就不会去解析是否有依赖库。

        module:{
        noParse:/jquery/,//不去解析jquery中的依赖库
        rules:[
            {
                test:/\.js$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            '@babel/preset-env',
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ]
    },

    happyPack：多进程打包，JS单线程，开启多进程打包，提高构建速度（特别是多核CPU）

    const happyPack = require('happypack')

module:{
    reles:[
    {
        test:/\.js$/,
      // 把对js文件处理转交给id为babel的happPack 实例
      use:['happypack/loader?id=babel'],
      include:SRCPATH,
      //exclude:/node-modeules/
    }
  ]
},
plugins:[
    new HappyPack({
      id:'babel',
    loaders:['babel-loader?cacheDirectory']
  })
]

    parallelUglifyPlugin：多进程压缩JS

    const ParallerUglifyPlugin = require('webpack-parallel-uglify-plugin')

plugins:[
    new HappyPack({
      id:'babel',
    loaders:['babel-loader?cacheDirectory']
  }),
  new ParallerUglifyPlugin({
      uglifyJS:{
        output:{
          beautify:false,    // 紧凑输出
        comments:false // 删除所有注释
      },
      compress:{
          drop_console:true,    // 删除所有console语句
        collapse_vars:true,    // 内嵌定义了但只用到一次的变量
        reduce_vars:true    //提取出出现多次但是没有定义成变量去应用的静态值
      }
    }
  })
]

    自动刷新：
    整个网页全部刷新，速度较慢。
    整个网页全部刷新，状态会丢失。

    module.export={
    watch:true,    //开启监听之后，webpack-dev-server 会自动开启浏览器刷新
  watchOptions:{
      ignored:/node_modules/,    // 忽略
    aggregateTimeout:300,    // 默认为300 判断文件是否发生过变化 是通过不停的询问去询问系统指定文件是否发生变化
    poll:1000    // 默认1000毫秒询问1次
  }
}

    热更新：新代码生效，网页不刷新，状态不丢失。

    const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin')

  plugins: [
    new HotModuleReplacementPlugin()
  ],

    DllPlugin：前端框架vue react，体积大，构建慢，较稳定，不经常升级，同一个版本只构建1次即可，不用每次重新构建

    webpck已内置 Dllplugin支持
    Dllplugin-打包出dll文件
    DllReferencePlugin-使用dll文件

    module.exports ={
  mode:'development',
    entry:{
      react:['react','react-dom']    // 把相关模块放到单独的动态连接库
  },
  output:{
      filename:'[name].dll.js', // 输出动态连接库文件名称，【name】代表当前动态连接库的名称
    path:DISTPATH,    
    library:'_dll_[name]',    // 存放动态连接库全局变量名称，防止命名冲突
  },
  plugins:[
      new DllPlugin({
      // 动态链接库的全局变量名称，需要和libariy中保持一直
        name:'_dll_[name]',
      path:path.join(distPath,'[name].mainfest.json')
    })
  ]
}

// 记得打包出来的html页应用一下js

    然后dev环境配置

    plugins:[
    new DllReferencePlugin({
      mainfest:require(path.join(distPath,'react.mainfest.json'))
  })
]