Split and merge production and development environment configurations
In general, we usually create a webpack.config.js file in the root directory of the project, which contains some basic webPack configuration, With mode we can set whether the current webpack packaging environment is development or production.
The development environment
The code has a certain readability, no compression, the file is larger
The production environment
The code has been compressed, the file is smaller
Normally, we have to set up our Webpack environment manually
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].js'.path: path.resolve(__dirname, '.. /dist')},plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'})].// Mode defaults to "production"-- > production environment
mode: "production".// Development environment
// mode: "development",
}
Copy the code
Disadvantages: Manually switch the environment.
The following split and merge, you can switch
Split and merge
Create a new build folder under the project root directory that contains three files
Write common configuration in webpack.base.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: {
main: './src/index.js'
},
output: {
filename: '[name].js'.path: path.resolve(__dirname, 'dist')},plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'}})],Copy the code
Merge the configuration of the development environment in webpack.dev.config.js
The WebPack-Merge dependency package is used to merge the configuration items of the two files, deconstructing the Smart method from it and renaming it merge
const commonConfig = require('./webpack.base.config')
const { smart: merge } = require('webpack-merge')
const devConfig = {
mode: "development"
}
// Call the smart method to merge
module.exports = merge(commonConfig, devConfig)
Copy the code
Combine the production environment configuration in webpack.prod.config.js
const commonConfig = require('./webpack.base.config')
const { smart: merge } = require('webpack-merge')
const prodConfig = {
mode: "production"
}
module.exports = merge(commonConfig, prodConfig)
Copy the code
Modify the code in package.json by creating two directives “build:dev” and “build “.
{
"name": "learn_webpack"."version": "1.0.0"."description": ""."main": "webpack.config.js"."scripts": {
"build:dev": "webpack --config ./build/webpack.dev.config.js"."build": "webpack --config ./build/webpack.prod.config.js"
},
"keywords": []."author": ""."license": "ISC"."devDependencies": {
"webpack": "^ 5.24.4"."webpack-cli": "^ 4.5.0." "."webpack-merge": "^ 4.2.2." "
},
"dependencies": {
"html-webpack-plugin": "^ 5.3.1"}}Copy the code
The Webpack-Merge used here is a dependency package for version 4.2.2
The last
- Enter NPM run build:dev in the terminal to pack the webpack in the development environment
- Enter NPM run build in the terminal to pack webpack in production