webpack项目打包优化

浏览器的缓存优化：

当我们项目部署到服务器的时候，浏览器会缓存我们的文件，当我们再次修改我们的代码，如果文件名称没有变，浏览器会先使用本地用户缓存的内容，此时我们便获取不到最新的内容了，可以使用更改文件名来解决这个问题,在输出文件的文件名中添加一个二进制的哈希值，同时在前面添加一个文件，将所有的js文件都打包到一起。

例如： filename: "script/[name].[contenthash].js",

由于第三方的代码不会频繁更新，我们可以将第三方的代码打包缓存到浏览器中，这样可以保证第三方的代码始终可以使用浏览器缓存的，具体操作如下：

image.png

拆分配置文件：

原因：开发环境和生产环境的对于webpack.config.js的配置是不一样的，比如在开发环境中不需要配置代码压缩，在生产环境中不需要配置代码调试，所以需要针对不同的环境配置不同的webpack配置文件。
1.根据开发环境和生产环境的不同，可以新建一个config文件夹，同时拆分两个webpack.config.js文件，分别是webpack.config.dev.js及webpack.config.prod.js。分别对这两个文件进行不同的配置。
2.更改mode,生产环境的mode:production,开发环境的mode:development
3.将output中的path路径改下 path: path.resolve(__dirname, "../dist"),
4.可以将外部的package.json,package-lock.json及node_modules文件复制到当前的项目下，并在package.json中配置启动的服务。

image.png

在项目中执行npm run start 编译代码并启动服务。

image.png

提取公共配置，合并配置文件：

由于生产和开发环境中的webpack.config.js有大量的代码重复，我们可以提取公共的配置。
1.新建一个webpack.config.common.js文件，用于存放公共代码。在建一个webpack.config.js文件，用于merge代码。

image.png

2.下载webpack-merge插件，并配置webpack.config.js文件。

const {merge} = require('webpack-merge')
const productionConfig = require('./webpack.config.prod')
const developmentConfig = require('./webpack.config.dev')
const commonConfig = require('./webpcak.config.common')
module.exports = (env)=>{
    switch(true){
        case env.production:
            return merge(productionConfig,commonConfig)
        
        case env.development:
            return merge(developmentConfig,commonConfig)
        
        default:
            return new Error('no found');
    }
}

3.更改，package.json中的配置。

"scripts": {
    "start": "webpack serve -c ./config/webpack.config.js --env development",
    "build":"webpack -c ./config/webpack.config.js --env production"
  },