1. Basic configuration

One 、 Get started webpack

npm init -y
npm install webpack webpack-cli --save-dev

Two 、 Start a local server

1. Installing a plug-in

npm install --save-dev webpack-dev-server

2. To configure

• stay package.json Middle configuration script Instructions

"scripts": {
    "dev": "webpack-dev-server --config  ./webpack/webpack-dev-config.js --mode development --open",
},

Corresponding webpack-dev-config.js File code

const path = require('path')
const { merge } = require('webpack-merge')  // Put the basic webpack Configuration and development （ production ） Configuration consolidation of environment 
const webpackConfigBase = require('./webpack-base-config')

function resolve(relatedPath) {
  return path.join(__dirname, relatedPath)
}
const webpackConfigDev = {
  mode: "development",
  optimization: {
    splitChunks: {
      chunks: "all", //all( All modules )
    },
  },
  devServer: {
    static: {
      directory: resolve('../src'),
    },
    historyApiFallback: false,
    open: true,
    compress: true,
    host: '127.0.0.1',
    port: 9096,
    hot: true,  // Start hot update 
  },
  devtool: 'inline-source-map'
}
module.exports = merge(webpackConfigBase, webpackConfigDev)

3、 ... and 、 Use babel compile react

1. Download related plug-ins

    npm i babel-loader --save-dev  //^8.2.5
    npm install @babel/core --save-dev   //^7.18.0
    npm i @babel/preset-react --save-dev //^7.17.12
    npm i @babel/preset-env --save-dev   //^7.18.0
    npm i  @babel/plugin-transform-runtime

2. To configure .babelrc file

{
  "presets": [
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "targets": {
          "chrome": "49",
          "ie": "11"
        },
        "corejs": 2
      }
    ]
  ],
  "plugins": ["@babel/plugin-transform-runtime"]
}

3. modify webpack The configuration file

module: {
    rules: [
        ...
            {
		        test: /\.js[x]?$/,
		        include: [paths.src],
		        exclude: /node_modules/,
		        use: [
		          'babel-loader?cacheDirectory', //  Open the cache 
		        ],
	      	},      
	    ...
    ]
}

Four 、 download react Related packages

npm install --save react react-dom