1. Loder

2. plugins

html-webpack-plugin

Html-webpack-plugin is used to generate HTML files. Insert the CSS styles extracted from chunk and extract-text-webpack-plugin of the entry configuration in webpack into the content specified by the template configuration item provided by the plug-in to generate an HTML file. Insert the link style into the head element and script into the head or body element.

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html'.template: path.join(__dirname, '/index.html'),
    minify: {
      // Compress HTML files
      removeComments: true.// Remove comments from HTML
      collapseWhitespace: true.// Remove whitespace and newline characters
      minifyCSS: true.// Compress inline CSS
    },
    inject: true,}),]Copy the code
  • Inject has four option values

    True: default value,scriptThe label is located in thehtmlOf the filebodyAt the bottom of the

    Body:scriptThe label is located in thehtmlOf the filebodyBottom (same true)

    The head:scriptThe label is located in theheadtag

    False: Do not insert the generated onejsFile, just generating onehtmlfile

clean-webpack-plugin

Clean-webpack-plugin is used to clean up the bundle generated by the previous project before packaging. It automatically cleans the folder according to output.path. This plugin is used very frequently in production environments, where many bundles are hash generated and new ones are generated each time if not cleaned up, resulting in huge folders.

const { CleanWebpackPlugin } = require('clean-webpack-plugin')

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, '/index.html'),}),new CleanWebpackPlugin(), // The name of the folder to be cleaned
]
Copy the code

mini-css-extract-plugin

Mini-css-extract-plugin plugin for extracting CSS as a separate file, creates a CSS file for each JS file containing CSS, supports on-demand loading of CSS and sourceMap. The extract-text-webpack-plugin has the following features:

  • Asynchronous loading
  • Better performance without recompiling
  • Easier to use
  • Only forCSS

This plug-in should only be configured in production and does not use style-loader in the loaders chain, and the plug-in does not support HMR for the time being.

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [{test: /\.(le|c)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'.'postcss-loader'.'less-loader',],},],},plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css'.chunkFilename: '[id].[contenthash:8].css',})],}Copy the code

3. DevServer

Install DevServer first:

# npm i -D webpack-dev-server
Copy the code

Common configurations:

  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    host: 'localhost'.compress: true.port: 8080.open: true.hot: true,},Copy the code

Package. Json:

  "scripts": {
    "dev": "webpack --mode development"."build": "webpack --mode production"."start": "webpack-dev-server --mode development --devtool source-map"
  },
Copy the code

–devtool source-map: Enable source code mapping. Use Chrome developer tools to view the debuggable source code in Sources.

Error: Cannot find module ‘webpack-cli/bin/config-yargs

Current WebPack – CLI version:

 "devDependencies": {
    "webpack": "^ 5.38.1"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"
  }
Copy the code

Webpack – CLI removed yargs after version 4.0, so install the lower version [email protected].

# NPM i-d [email protected]Copy the code
 "devDependencies": {
    "webpack": "^ 5.38.1"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.2"
  }
Copy the code

ok!