First, enter the folder of the installation directory, enter npm init initialization package.json:

To install webpack and webpack cli locally:

NPM install webpack webpack cli - D / / - D refers to the development environment needs, online environment does not need;

Create an entry file, configure packet.json for packaging

In webback4.0,. / src/index.js is used as the entry by default, and. / src/index.js is created and input into the body: console.log("hahaha");

And configure the script in package.json:

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

Execute command:

npm run build

After compilation,. / dist/index.js will be created automatically

To configure a webpack:

Configure webpack.config.js:

• Entry: configure the address of the entry file
• output: configure the address of the export file
• Module: configuration module, mainly used to configure loaders of different files
• plugins: configure plug-ins
• devServer: configure development server

• var path = require('path');//node's module
  module.exports = {
    entry:'./src/index.js', // Entrance
    output:{
      filename:'build.js',
      // This path must be absolute
      path: path.resolve('./dist')
    }, // Exit
    devServer:{
      contentBase:'./dist',    //Configure the file root of the development service runtime
      port:8080,
      compress:true,// Server compression
      open:true,// Open browser automatically
      // hot:true / / hot update
    },// Development server
    module:{}, // Module configuration
    plugins:[], // Plug in configuration
    mode:'development', // Mode can be changed
    resolve:{}, // Configuration resolution
  }
  

  To configure the development server:

npm i webpack-dev-server –D

Use devserver to configure server related parameters:

  devServer:{
    contentBase:'./dist',
    port:8081,
    compress:true,// Server compression
    open:true,// Open browser automatically
    // hot:true / / hot update
  },// Development server

Reconfigure webpack.config.js:

+  "scripts": {
+    "build": "webpack --mode development",
+    "dev": "webpack-dev-server --open --mode development "
+  }//Start local service npm run dev

Auto generate HTML file:

npm i html-webpack-plugin -D

• minify is to compress html files, and removeattrubtequotes is to remove double quotes of attributes
• Add hash to avoid caching when introducing output resources
• Template template path

 //Automatically generate HTML files and introduce the generated resources into them
  plugins: [
            new HtmlWebpackPlugin({
           minify: {
                removeAttributeQuotes:true
            },
            hash: true,
            template: './src/index.html',
            filename:'index.html'
        })],

Compress CSS files

Installation depends on:

1. npm i mini-css-extract-plugin css-loader --save-dev

Create. / index.css

To configure webpack.config.js:

var path = require('path');//node's module\
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: {
    index: './src/index.js',
    main: './src/main.js',
    xiix: './src/xixi.js'
  },
  // Entrance
  output: {
    filename: '[name].[hash].js',
    // This path must be absolute
    path: '/dist'
  }, // Exit
  devServer: {
    contentBase: './dist',
    port: 8082,
    compress: true,// Server compression
    open: true,// Open browser automatically
    // hot:true / / hot update
  },// Development server
  module: {
    rules:[{
        test:/\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ]
  }, // Module configuration
  //Automatically generate HTML files and introduce the generated resources into them
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename:"[name].css",
      chunkFilename:"[id].css"
    })
  ],
  mode: 'development', // Mode can be changed
  resolve: {}, // Configuration resolution
} 

Reference css file:

import style from '../index.css'