Yarn init -y

Yarn add webpack webpack-cli -d

Create /public/index.html/SRC /index.jsx/SRC /index.less and write the content in less.

// /src/index.jsx
import './index.less'
Copy the code
// /src/index.less
html.body{
    font-size: 16px;
    button{
        color: red; }}Copy the code

Yarn add style-loader CSS-loader less less-loader-d

Five, the newly built/webpack webpack. Config. Js

To extract CSS from JS, use mini-CSs-extract-plugin To use HTML templates, automatically generate HTML, automatically import JS, and additional custom properties, use htMl-webpack-plugin

yarn add mini-css-extract-plugin html-webpack-plugin -D
Copy the code

Go to webpack Module >rules and plugins and get the following.

// webpack.config.js

const path = require('path');
/ / HTML templates
const htmlWebpackPlugin = require('html-webpack-plugin');
/ / CSS to pull away
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// Relative path becomes absolute path
const resolvePath = (_path) = > path.resolve(__dirname, _path);
module.exports = {
    mode: 'development'.entry: resolvePath('.. /src/index.jsx'),
    output: {
        path: resolvePath('.. /dist'),
        filename: '[name].bundle.js',},module: {rules:[
            {
                test: /\.css$/,
    -              // use: ['style-loader', 'css-loader']
    +              use: [MiniCssExtractPlugin.loader, 'css-loader'] {},test: /\.less$/,
     -             // use: ['style-loader', 'css-loader', 'less-loader']
     +             use: [MiniCssExtractPlugin.loader, 'css-loader'.'less-loader']]}},plugins: [new htmlWebpackPlugin({
            template: resolvePath('.. /public/index.html'),
            filename: 'index.html'.title: 'React App' // Corresponds to the title of the template HTML
        }),
        new MiniCssExtractPlugin({
            filename:'[name].[hash:8].css' // The generated CSS file name}})]Copy the code

/ SRC /index.html (ejS template syntax)

    <title><%=htmlWebpackPlugin.options.title%></title>
Copy the code

Set package.json to yarn build =>dist

"scripts": {
    "build": "webpack --config ./webpack/webpack.config.js"
  }
Copy the code

Here. The CSS and LESS are packaged.

8. To enable the CSS to be compatible with multiple browsers, you need to add CSS prefixes, install PostCSS-Loader, and use Autoprefixer to automatically fill the prefixes.

yarn add postcss-loader autoprefixer -D
Copy the code

Update webpack.config.js=>modele=>rules.

module: {rules:[
            {
                test: /\.css$/,
-                // use: [MiniCssExtractPlugin.loader, 'css-loader']
+                use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'] {},test: /\.less$/,
-               // use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
+               use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'.'less-loader']]}},Copy the code

10. Create /postcss.config.js

 + module.exports = {
 +     plugins:{
 +         autoprefixer: require('autoprefixer'+} +}Copy the code

Run YARN Build and check the CSS. Mainstream browser prefixes are automatically added at this point.

Install yarn add clean-webpack-plugin -d. Configuration is as follows

// webpack.config.js
 + const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 plugins:[
     .
     .
     .
 + new CleanWebpackPlugin()
 ]
 
Copy the code

The production environment required more configuration of some of the things we did during development (such as hot updates), and the production environment required compression of the code. A distinction needs to be made between development and production environments.

12, new/webpack webpack. Dev. Config. Js/webpack webpack. Prod. Config. Js. Here we use webpack-merge to merge differentiated files.

yarn add webpack-merge -D
Copy the code
// Webpack folder
+      webpack.dev.config.js
+      webpack.prod.config.js
Copy the code

Export the public configuration webpack.config.js

// webpack.config.js
 - module.exports = {
 + const baseConfig = {
    
    }
            .
            .
            .
 + module.exports = {
 +     resolvePath,
 +     baseConfig
 + }
Copy the code

Configure the development environment

yarn add webpack-dev-server -D
Copy the code
// webpack.dev.config.js
const { merge } = require('webpack-merge');
const {
    resolvePath,
    baseConfig
} =require('./webpack.config')
module.exports = merge(baseConfig,{
    mode:'development'.devtool: 'inline-source-map'.devServer: {
        host:'127.0.0.1'.port: 9000.hot: true.open: true}})Copy the code

Configure the production environment because we are going to compress CSS. So use csS-minimizer-webpack-plugin

yarn add css-minimizer-webpack-plugin -D
Copy the code
1, yarn add css-minimizer-webpack-plugin -d// webpack.prod.config.js
const { merge } = require('webpack-merge');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const {
    resolvePath,
    baseConfig
} =require('./webpack.config')
module.exports = merge(baseConfig,{
    mode:'production'.optimization: {
        minimizer: [
          new CssMinimizerPlugin(),
        ],
      },
})
Copy the code

Modify the startup command

// package.json
  "scripts": {-"build": "webpack --config ./webpack/webpack.config.js",
  +  "build": "webpack --config ./webpack/webpack.prod.config.js",
  +  "start": "webpack-dev-server --config ./webpack/webpack.dev.config.js"
  }
Copy the code

17. To package advanced syntax. You need to use Babel. You also need to translate the React code. Install the React core dependencies as well

yarn add react react-dom @babel/core @babel/polyfill @babel/preset-env @babel/preset-react -D 
Copy the code

Update module=>rules

    module: {rules:[
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'] {},test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'.'less-loader']
            },
  +         {
  +             test: /\.jsx$/,
  +             use: "babel-loader"
  +         },
  +          {
  +              test: /\.svg$/,
  +              type: 'asset/resource'+}},Copy the code

19. Create /babel.config.json and configure it

{
    "presets": ["@babel/preset-react"."@babel/preset-env"]}Copy the code

Finally, write the React code. yyds.

yarn start
Copy the code

This is a simple configuration. More configurations will be updated later. If write wrong place hope big guy points out. / fist up // fist up /