当前位置：首页 > news >正文

完整教程：Webpack5 第四节

news 2026/6/11 7:52:48

完整教程：Webpack5 第四节

变量区分打包环境

为什么我们要区分开发环境呢？

这是因为不同的开发环境下需要不同的打包策略，生成环境下需要压缩，但是可读性比较差，在开发环境下一般是不开启的。而且开发环境和生成环境的调试接口是不一样的。

变量区分打包环境

在package.json配置文件中配置打包命令

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","prod": "webpack --mode production"},

"prod": "webpack --mode production"

使用npm run prod 即可执行成功，生产环境打包

配置文件区分打包环境

合并插件 webpack-merge可以将公共配置文件分别与两个环境的配置文件合并

安装插件

cnpm i webpack-merge -D

开发环境配置文件

// webpack.dev.config.js
const {merge} = require('webpack-merge')
const baseWebpackConfig=require('./webpack.base.conf')
const devWebpackConfig=merge(baseWebpackConfig,{// 开发环境的配置
})
module.exports=devWebpackConfig

生产环境配置文件

// webpack.prod.config.js
const {merge} = require('webpack-merge')
const baseWebpackConfig=require('./webpack.base.conf')
const prodWebpackConfig=merge(baseWebpackConfig,{// 生产环境的配置
})
module.exports=prodWebpackConfig

使用命令进行压缩

npx webpack --config webpackConfig\webpack.dev.config.js

修改打包的命令，简化操作

使用 npm run build 和npm run prod 即可执行成功

环境区分全局变量

为项目注入全局变量，不同环境注入不同的接口地址

// webpack.dev.config.js
const webpack = require('webpack')
plugins:[new webpack.DefinePlugin({API_BASE_URL:JSON.stringify('https://apidev.xdclass.com')})
]

获取接口地址

console.log（API_BASE_URL）

代码分类 - 多入口打包

我们在工作时会运用带多页面分类，我们需要将代码分类到不同打包后的文件中即bundle文件，而且可以按需加载或并行加载这些文件，来获取更小的bundle，控制资源加载的优先级，降低加载空间。

分类方法：

多入口打包，抽离出公共文件

optimization.splitChunks.chunks:all

配置

// webpack.config.js
entry: {index: './src/index.js',mine: './src/mine.js',
},
output: {filename: '[name].bundle.js',
},
HtmlWebpackPlugin({chunks:['index']
})
HtmlWebpackPlugin({chunks:['mine']
})

代码分离 - 抽离出公共代码防止重复打包

为了将多个页面重复引入的模块抽离成公共的模块，避免重复打包，减少包体积。

配置

optimization: {splitChunks: {chunks: 'all',},
},

可视化工具安装

cnpm install webpack-bundle-analyzer -D

可视化工具配置

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {plugins: [new BundleAnalyzerPlugin()]
}