webpack5 configuration process learning one

webpack5 configuration

1. Initialize the project configuration process

Initialize webpack npm init -y to generate an initialized package.json file
1. name cannot be webpack, otherwise it will conflict with installation dependencies
2. main refers to the entry address of the packaged start file
3. Other defaults are fine

2. Install webpack depends on npm i webpack webpack-cli -D install webpack, and webpack-cli two dependencies

3. Pack the dist file npx webpack ./src/main.js --mode=development

npx webpack ./src/main.js --mode=production

2. Build the configuration file webpack.config.js

configuration items
1. Entry entry: ''
2. Output output: {}
3. Loader module: []
4. Plugins: plugins: []
5. Mode: mode

Note: The packaging command at this time becomes npx webpack (because the data item has been configured)

3. Handle style resources

1. Processing css resources

Download package command line npm i css-loader style-loader -D (download a few with several loaders)

2. Handle less resources

Download package npm install less less-loader --save-dev

Note that use can load multiple loaders and loader can only load one

3. Processing sass resources

Download package npm install sass-loader sass webpack --save-dev

4 Processing image resources

When processing image resources, webpack5 comes with the function of packaging images into image directories, so write configuration items directly

Optimization method, set the size of the image converted to base64, so that the number of requests can be optimized, but the disadvantage is that the packaging volume will become larger

5. Modify the output directory and clear the last packaging record

Purpose: to facilitate code management, divide the directory structure into blocks, and separate js and css

6. Handle font icon resources and other static files

7. Handle js resources

1.Eslint

Create a new file.eslintrc.* The file name cannot be wrong

2. Babel handles js version compatibility

npm install -D babel-loader @babel/core @babel/preset-env

8. Process html resources (automatically import js)

npm install --save-dev html-webpack-plugin

9. Build a development server – automatically package and see the data

1.npm i webpack-dev-server -D

After this configuration, the startup command becomes npx webpack serve. The development environment will not generate dist files in memory.

10. Build production mode

During the compilation process, config will be defaulted to the one under the directory, which is consistent with the previous principle

Because this command is more cumbersome
The instruction of the operating environment is npx webpack serve --config ./config/webpack.dev.js
The command of the packaging environment is npx webpack serve --config ./config/webpack.prod.js
lead to too cumbersome
- Therefore, set the specified command to set npm start /npm run dev/npm run build under package.json
[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture and upload it directly (img-DxsyJbG7-1661247051759) (C:\Users\11433\AppData\Roaming\Typora\typora-user-images\ 1661245154113.png)]

11. Extract css style (avoid white screen phenomenon – process data)

npm install --save-dev mini-css-extract-plugin
Introduce const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // Extract css style plugin
Because the MiniCssExtractPlugin plugin is used to extract the style, all style-loaders are changed to MiniCssExtractPlugin.loader
Otherwise, the style extraction is unsuccessful
configuration

Style Css Compatibility Handling

1.npm i postcss-loader postcss postcss-preset-env -D

1247051760)]

Style Css Compatibility Handling

1.npm i postcss-loader postcss postcss-preset-env -D
[External link image transfer...(img-iLBifARO-1661247051761)]