1. Loder

2. plugins

html-webpack-plugin

html-webpack-plugin用于生成html文件。将webpack中entry配置的相关入口chunk和extract-text-webpack-plugin抽取的css样式插入到该插件提供的template配置项指定的内容基础上生成一个html文件，具体插入方式是将样式link插入到head元素中，script插入到head或者body中。

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

plugins: [
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: path.join(__dirname, '/index.html'),
    minify: {
      // 压缩HTML文件
      removeComments: true, // 移除HTML中的注释
      collapseWhitespace: true, // 删除空白符与换行符
      minifyCSS: true, // 压缩内联css
    },
    inject: true,
  }),
]

inject 有四个选项值
true：默认值，script标签位于html文件的body底部
body：script标签位于html文件的body底部（同 true）
head：script标签位于head标签内
false：不插入生成的js文件，只是单纯的生成一个html文件

clean-webpack-plugin

clean-webpack-plugin用于在打包前清理上一次项目生成的bundle文件，它会根据output.path自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过hash生成很多bundle文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

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

plugins: [
  new HtmlWebpackPlugin({
    template: path.join(__dirname, '/index.html'),
  }),
  new CleanWebpackPlugin(), // 所要清理的文件夹名称
]

mini-css-extract-plugin

mini-css-extract-plugin用于将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个css文件，支持按需加载css和sourceMap。只能用在webpack4中，对比另一个插件extract-text-webpack-plugin有以下特点:

异步加载
不重复编译，性能更好
更容易使用
只针对CSS
这个插件应该只用在生产环境配置，并且在loaders链中不使用style-loader，而且这个插件暂时不支持HMR。

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',
    }),
  ],
}

3. DevServer

首先安装DevServer：

# npm i -D webpack-dev-server

常用配置：

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

package.json：

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

--devtool source-map：开启源码映射，使用Chrome浏览器的开发者工具，可在Sources栏中看到可调试的源代码。

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

当前webpack-cli版本:

 "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

webpack-cli在4.0版本后就移除了yargs，于是安装低版本webpack-cli@3.3.12。

# npm i -D webpack-cli@3.3.12

 "devDependencies": {
    "webpack": "^5.38.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

ok!

webpack 常用配置