webpack优化

1.sourceMap

源代码映射，是一个用来生成源代码与构建后的代码一一映射的文件的方案，生成一个.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到出错的根源。

//webpack.dev.js
 devtool:"cheap-module-source-map"
// webpack.prod.js
 devtool:"source-map"

2.提升打包构建速度

**HotModuleReplacement,

**(热模块替换)，在程序运行中，替换、添加或删除模块，而无需重新加载整个页面

基本配置

开发模式下

//main.js
if(module.hot){
   
    //判断是否支持热模块更新功能
    //重新引入需要热更新的文件
    module.hot.accept("./js/count")
    module.hot.accept("./js/sum")
}

上面处理很麻烦，实际开发借助于其他loader来解决
vue-loader或react-hot-loader

oneOf只执行对应的loader

开发和生产模式下配置

include/exclude

只能配置其中一个

Cache缓存
每次打包的时，js文件都要经过Eslint检查和Babel编译，速度比较慢，缓存之前的eslint检查和babel编译结果
生产和开发环境配置

webpack.dev.js
//babel
					{
   
                        test: /\.m?js$/,
                        //排除node_module中的js文件不处理
                        exclude: /(node_modules|bower_components)/,
                        loader: 'babel-loader',
                        options: {
   
                            // presets: ['@babel/preset-env']
                            cacheDirectory:true,//开启babel缓存
                            cacheCompression:false,//关闭缓存文件压缩
                        } //在babel.config.js维护
                    }
//Eslint

 new ESLintPlugin({
   
            //检测哪些文件
            context: path.resolve(__dirname, '../src'),
            exclude:"node_modules",
            cache:true,//开启缓存
            cacheLocation:path.resolve(__dirname,'../node_modules/.cache/eslintcache')
        }),

多进程打包

js文件同时Eslint检查，babel编译，terser压缩
注意：仅在特别耗时的操作中使用，因为每个进程启动就有大约为600ms左右开销
使用步骤：
1.获取cpu核数，启动的进程的数量就是我们cpu的核数

const os=require('os')
const threads=os.cpus().length

2.下载包
npm i thread-loader -D

//js的loader再配置thread-loader
                    {