webpack 优化配置

 

①  devserver配置项

   用来进行快速开发，提供一个本地服务。 就是你的代码在本地直接进行调式  

   devserver 里面有一个热模块替换  会自动在网页上面更新，有点像vue的数据单向绑定。

   devserver  在webpack5中以及都默认配置好了，不需要在写

 直接使用npx webpack serve 就可以运行。会生产一个本地服务，然后在浏览器打开，接着你只需要编写代码，然后在浏览器中查看

②code-split

  代码分隔  针对js文件

  单入口文件只能输出一个文件，如果想要在进行分隔，在引入js文件时，使用动态加载

 import(路径).then().catch()

 optimization:{

 splitChunks:{

 //  自动分析多入口chunk中有没有公共的文件，如果有会打包成单独的chunk  默认时30KB以上

  chunks:all

}

}

③ surce-map

   生产环境下js文件 都会被压缩，如果代码在生产环境下测试发现错误，而文件时被压缩的，我们也就无法找到具体时错在哪里。 surce-map 就是映射在源代码中，告诉你错在哪里了。

   surce-map 有以下几个值

   surce-map 会生成单独的map文件 外联，能够准确告诉错误的位置

  eval-sourc-map 内联 错误代码准确信息和错误位置

  在开发环境下使用内联，会更快点

  生产环境使用外联

④dll  

   将npm 包进行单独打包

   在单入口中，我们的js文件引入npm包时，会造成js文件体积过大，我们需要将npm包单独进行打包。

  创建一个配置文件，名称任意就可以了，  我建议是 webpack.dll.config.js

  

const {resolve} = require('path');

const webpack = require('webpack');

module.exports = {

    mode:'production',

    entry:{

        // 需要单独处理npm包  以jquery为例

        jQuery:['jquery']

    },

    output:{

        // 输出文件的名称

        filename:'[name].js',

        //  输出文件的路径

        path:resolve(__dirname,'dll'),

        // 暴露出去的名称

        library:'[name]_[hash]'

    },

    plugins:[

        //  建立起依赖告诉 生成的文件可以告诉webpack不要在打包，所配置的npm包了

        new webpack.DllPlugin({

            name:'[name]_[hash]',

            path:resolve(__dirname,'dll/manifest.json')

        })

    ]

}

 然后在webpack配置文件中

 使用插件

  new webpack.DllReferencePlugin({

// 引进刚刚生成的依赖关系文件，webpack就会知道我们配置了哪些npm 包不需要在处理

            manifest:resolve(__dirname,'./dll/manifest.json')

        }),

这时在js文件中引入jquery 就不会从node_modules中打包了。

但是我们需要将单独处理的jquery 引入进来，有两种方法，一种手动引入在html文件中引入

另外一个下载一个插件 add-asset-html-webpack-plugin

new AddAssetHtmlWebpackPlugin({

            //   引入npm包

            filepath:resolve(__dirname,'dll/jQuery.js'),

            //  公共路径前缀

            publicPath:'./'

        })

   

④ 多进程打包

    一般用在js文件当中，也就时转码babel当中

 需要下载的包  thread-loader  

 

 module: {

        rules: [

            {

                test: /\.js/,

                exclude: /(node_modules|bower-components)/,

                use: [{

                    loader: 'thred-loader',

                    options: {

                        workers: 2 // 进程为2  默认值就时2

                    }

                },

                {

                    loader: 'babel-loader',

                    options: {

                        presets: ['@babel/preset-env'],

                        plugins: ['@babel/plugin-proposal-object-rest-spread'],

                        //  缓存

                        cacheDirectory: false

                    }

                },]

 

            },

}

⑤懒加载

  懒加载就时引入js文件通过动态加载方法，这并不是webpack里面的，而且引入api中的。