区分打包环境
由于我们在不同环境下的配置不同,所以我们需要将不同环境的配置分别写在不同的文件中,并提取公共配置;
对于不同环境下,我们传入不同的参数;
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack serve",
"build2": "webpack --config ./config/webpack.common.js --env production",
"serve2": "webpack serve --config ./config/webpack.common.js --env development"
},
// webpack.common.js
module.exports = (env) => {
const isProduction = env.production
return {
...config
}
}
合并生成,开发环境配置
npm install webpack-merge -D
// webpack.common.js
const {
merge } = require('webpack-merge')
const prodConfig = require('./webpack.prod')
const devConfig = require('./webpack.dev')
module.exports = (env) => {
const isProduction = env.production
// 为了让配置文件也能拿到process.env.NODE_ENV
process.env.NODE_ENV = isProduction ? 'production' : 'development'
// 依据当前的打包模式来合并配置
const config = isProduction ? prodConfig : devConfig
const mergeConfig = merge(commonConfig, config)
return mergeConfig
}
process.env.NODE_ENV可以在我们的项目中的js去使用,但是配置文件中没办法使用,所以我们在webpack.common.js中去手动赋值,process.env.NODE_ENV可以获取到当前的打包模式;
// babel.config.js
const presets = [
['@babel/preset-env'],
['@babel/preset-react'],
]
const plugins = []
// 依据当前的打包模式来决定plugins 的值
const isProduction = process.env.NODE_ENV === 'production'
if (!isProduction) {
plugins.push(['react-refresh/babel'])
}
module.exports = {
presets,
plugins
}
代码拆分方式
背景: 如果将所有的js放入一个文件加载,那么首页加载的时候会将所有的代码,包括未使用到的代码都会加载,会造成首屏的性能问题;
注意:mode为production的时候会默认将注释剥离,多打包出一个LICENSE.txt文件,需要单独配置TerserPlugin插件的extractComments为false将注释取消;
const TerserPlugin = require