前面讲了：

本篇文章讲解常用 plugins 及配置。为什么要配置plugins,因为webpack 只能识别js,json 文件，无法识别 .css 等其他文件，因此需要各种loader 处理对应格式文件。

1：html-webpack-plugin （HtmlWebpackPlugin）

这个很熟悉了，前面用过了，它支持打包时，自动生成html文件或者按模板配置生成html文件，并且会按需自动插入打包好的静态文件自动插入html中。

npm i html-webpack-plugin --D

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

plugins: [
    new HtmlWebpackPlugin({
        template: path.resolve(__dirname, './assets/index.html'), // 自定义模板
        inject: 'body', // 插入到body
    }),

2：clean-webpack-plugin （CleanWebpackPlugin）

这个前面也用过了，我们练习的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹这个操作可以借助于一个插件来帮助我们自动完成。

# 安装
$ npm i clean-webpack-plugin -D


// 配置 部分
/*
  1. 绝大部分plugin导出都是使用默认导出，但是CleanWebpackPlugin使用的是普通导出，所以在引入的时候需要注意
  2. 多少情况下，plugin是一个个的类，所以导入的名称首字母是大写的，且使用的时候使用new来创建对应的实例对象
*/
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

// ...... 此处为省略的其它配置

module.exports = {
  plugins: [
    new CleanWebpackPlugin()
  ]
}

3： DefinePlugin

Webpack5自带plugin(不需要单独安装)，我们可以通过 `DefinePlugin` 可以定义一些全局的变量，我们可以在模块当中直接使用这些变量，会在编译阶段，将你代码中的变量替换为对应的值。

// 配置 --- 部分
const { DefinePlugin } =  require('webpack')

// ...

plugins: [
  new DefinePlugin({
    // DefinePlugin中配置的key-value的值会做作为字符串进行解析，所以其值需要被设置成字符串类型
    
    // 注意，其取值的时候，会将引号中的内容单独取出，作为值来使用 (比较特别)
    // 所以'./'会被看成是./ 所以会报错，因此需要写成"'./'"
    BASE_URL: "'./'",
    
    // 配置在DefinePlugin中的key，可以在任何地方被引用，包括vue文件，js文件
    // webpack在编译的时候会对这些变量进行统一的解析和处理
    ENV: JSON.stringify('development')
  })
]

此時我们就可以在全局，也就是任何地方，使用我们在`DefinePlugin`中定义的全局变量

例如，在index.html模板中

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

 if (ENV === 'development') {
     // 开发环境适用的代码
 } else {
    // 生产环境适用的代码 
 }

4： copy-webpack-plugin

如果我们将一些文件放到public的目录下，需要在编译的时候，将这个目录会被复制到dist文件夹下这个复制的功能，我们可以使用CopyWebpackPlugin来完成

# 安装
$ npm install copy-webpack-plugin -D

const CopyPlugin = require("copy-webpack-plugin");

plugins: [
    new CopyPlugin({
        patterns: [
            // copy assets/favicon.ico 文件到 {output} 路径下
            { 
                context: './assets', 
                from: 'favicon.ico', to: '', 
                info: { minimized: true } 
            },
            // copy assets/js/a.js 文件到 {output}/js 路径下，并且会在production下进行压缩
            { 
                context: './assets/js', 
                from: 'a.js', 
                to: 'js' 
            },
            // copy assets/lib/ 路径下所有文件到 {output}/3rd 路径下，并且不压缩
            { 
                context: './assets/lib', 
                from: '**', 
                to: '3rd', 
                info: { minimized: true } 
            },
        ],
    }),

5： SplitChunksPlugin

SplitChunksPlugin 文档

Webpack5自带plugin，用于按需对打包文件进行拆分chunks。 Webpack内有默认配置，chunks 默认是 async，所以在如果不配置默认情况下，如果用了异步引用（比如动态import）则会进行拆分；如果有别的情况需求，可以按文档设置。

如果没有特别拆分包需求，可以按下面配置，把 node_modules 包单拆出来。


module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

6： mini-css-extract-plugin

这个插件可以将将 CSS 提取到单独的文件中。并且支持按需加载 CSS 和 SourceMaps。

npm i mini-css-extract-plugin --D

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

rules: [
    {
        // less/css
        test: /\.(less|css)$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    },
    {
        // sass/scss/css
        test: /\.(sa|sc|c)ss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
    },
    
plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[contenthash:8].css",
        chunkFilename: "[id].[contenthash:8].css",
        ignoreOrder: true,
    }),
],

7： css-minimizer-webpack-plugin 文档

用来压缩css文件，需要配合 mini-css-extract-plugin 使用。

npm i css-minimizer-webpack-plugin --D

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

optimization: {
    minimize: devMode ? false : true,
    minimizer: [
        new CssMinimizerPlugin({}),
    ],

8： webpack-bundle-analyzer

很常用的Webpack打包分析插件，使用交互式可缩放树形地图可视化，并输出文件的大小。可以方便开发人员检查打包后的文件拆分、分析文件大小等。

在缩减打包文件、按需加载拆分打包文件、提高首屏加载效率时会很有用。

npm i webpack-bundle-analyzer -D

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

plugins: [
    new BundleAnalyzerPlugin(),
],

9： webpack-deadcode-plugin

该插件会检查项目中没有引用到的文件，以及没有引用到的exports，方便开发维护。

npm i webpack-deadcode-plugin -D

const DeadCodePlugin = require('webpack-deadcode-plugin');

optimization: {
    usedExports: true, // 如果想扫描 unused exports，需要设置为true，production下默认是true
},
plugins: [
    new DeadCodePlugin({
        patterns: [
            './src/**', // 只扫描src路径下所有文件
        ],
        exclude: [
            './**/mapping.xml',
            './**/*.md',
        ],
        log: "none", // 不输出log
        exportJSON: `./analysis` // 结果生成到analysis路径下
    })
],

10： hot-module-replacement

hot-module-replacement

const webpack = require('webpack')


devServer:{ 
    contentBase:"./dist', 
    open:"true", port:"8080, 
    //热模块更新的配置 
    hot:true, 
    hotOnly:true 
 },
 plugins:[ 
     //热模块加载 
     new webpack.HotModuleReplacementPlugin() 
 ]， 当我配置了这两项后，我再修改index.js 文件后，他不会刷新我的页面，而是直接修改我的改变的代码

可看文档 juejin.cn/post/684490…

11： NamedModuleIdsPlugin

HotModuleReplacementPlugin 文档

new webpack.ids.NamedModuleIdsPlugin()

12： webpack-dev-middleware

13. EsLint (详细可查看 juejin.cn/post/729495…)

13.1 安装依赖

在 webpack 4 中，ESLint 是通过 loader 的方式集成到 webpack 中的。在 webpack 5 中，是通过 plugins（插件）的形式进行集成。插件名称为 eslint-webpack-plugin。该插件又依赖 eslint 包，故需要安装两个开发依赖包：

npm i eslint eslint-webpack-plugin -D

13.2 添加配置文件

在项目的根路径下添加 ESLint 的配置文件：.eslintrc.js:

module.exports = {
    env: {
        node: true, // 启用node中全局变量
        browser: true  // 启用浏览器中全局变量
    },
    // 继承 Eslint 规则
    extends: ['eslint:recommended'],
    parserOptions: { // 解析选项
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
          jsx: true // 如果是 React 项目，就需要开启 jsx 语法
        }
    },
    rules: {
        'no-var': 'off',
        'no-console': 'off'
    }
}

13.3 修改 webpack 配置

修改 webpack.config.js，首先在文件顶部引入插件：

const ESLintWebpackPlugin = require('eslint-webpack-plugin')

Webpack5 插件是通过构造函数方式提供的，引入该插件后，得到的是一个构造函数，通过 new来创建对象。插件配置在webpack 配置对象的 plugins节点下，该节点是一个数组，数组每个元素都是一个插件。配置如下：

const ESLintWebpackPlugin = require('eslint-webpack-plugin')

module.exports = {
    ...
    plugins: [
        new ESLintWebpackPlugin({
            context: path.resolve(__dirname, 'src')
        })
    ],
    ...
}

其他几个eslint 插件及作用

eslint-plugin-html插件

eslint-plugin-html插件

通过这个插件你可以让eslint去检测html文件script标签里的js代码。使用示例：

// .eslintrc.js

{
    "plugins": [
        "html"
    ]
}

eslint-plugin-import插件

这个插件意在提供对ES6+ import/export语法的支持，有助于防止你写错文件路径或者引用的变量名。使用示例：

{
    "plugins": [
    ],
    "rules": {
        "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
        "import/named": 2,
        "import/namespace": 2,
        "import/default": 2,
        "import/export": 2,
        // # etc...
    }
}

或者使用现成的推荐规则：

{
    "extends": {
        "eslint:recommended",
        "plugin:import/errors",
        "plugin:import/warnings"
    }
}

eslint-plugin-node插件

添加对node的eslint支持。使用示例：

{
    "plugins": ["node"],
    "extends": ["eslint:recommended", "plugin:node/recommended"],
    "rules": {
        "node/exports-style": ["error", "module.exports"],
    }
}

eslint-plugin-promise插件

这个插件意在通过代码风格检测让开发者养成较好地使用promise的方式（最佳实践，best practices）。比如在对promise使用了then之后会要求你加一个catch捕获下异常，当然如果你的方法是直接return返回了这个promise的话则不会要求你马上加catch（因为毕竟当然你可以稍后在其他地方拿到这个promise后再catch）。使用示例

{
    "plugins": [
        "promise"
    ],
    "rules": {
        "promise/always-return": "error",
        "promise/no-return-wrap": "error",
        "promise/param-names": "error",
        "promise/catch-or-return": "error",
        "promise/no-native": "off",
        "promise/no-nesting": "warn",
        "promise/no-promise-in-callback": "warn",
        "promise/no-callback-in-promise": "warn",
        "promise/avoid-new": "warn",
        "promise/no-return-in-finally": "warn"
    }
}

或者直接使用现成的推荐规则：

{
    "extends": [
        "plugin:promise/recommended"
    ]
}

eslint-plugin-standard插件

这是一个为Standard Linter而做的补充插件，一共就扩展了4个规则，使用示例如下：

{
  rules: {
    'standard/object-curly-even-spacing': [2, "either"]
    'standard/array-bracket-even-spacing': [2, "either"],
    'standard/computed-property-even-spacing': [2, "even"]
    'standard/no-callback-literal': [2, ["cb", "callback"]]
  }
}

14. eslint-plugin-prettier

15. # SplitChunksPlugin 代码分割

文档

SplitChunksPlugin 文档

webpack.config.js 配置

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

16. tree-shaking

17. stylelint-webpack-plugin

校验 css 格式

文档

安装

npm i stylelint-webpack-plugin  -D

注意：如果你还没有安装 stylelint >= 13，请先用 npm 进行安装：

npm install stylelint --save-dev

配置

var StyleLintPlugin = require('stylelint-webpack-plugin'); 

module.exports = { 
    // ... 
    plugins: [ 
        new StyleLintPlugin(options),
    ], 
    // ... 
}

18. mini-css-extract-plugin

将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap。

npm i mini-css-extract-plugin -D

配置

// 建议 mini-css-extract-plugin 与 css-loader 一起使用
// 将 loader 与 plugin 添加到 webpack 配置文件中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    ],
  },
};

19. css-minimizer-webpack-plugin

用于压缩css，减小 css 打包后的体积

参考：

webpack 三基础配置：配置plugins

1：html-webpack-plugin （HtmlWebpackPlugin）

2：clean-webpack-plugin （CleanWebpackPlugin）

3： DefinePlugin

4： copy-webpack-plugin

5： SplitChunksPlugin

6： mini-css-extract-plugin

7： css-minimizer-webpack-plugin 文档

8： webpack-bundle-analyzer

9： webpack-deadcode-plugin

10： hot-module-replacement

11： NamedModuleIdsPlugin

HotModuleReplacementPlugin 文档

12： webpack-dev-middleware

13. EsLint (详细可查看 juejin.cn/post/729495…)

13.1 安装依赖

13.2 添加配置文件

13.3 修改 webpack 配置

其他几个eslint 插件及作用

eslint-plugin-html插件

eslint-plugin-import插件

eslint-plugin-node插件

eslint-plugin-promise插件

eslint-plugin-standard插件

14. eslint-plugin-prettier

15. # SplitChunksPlugin 代码分割

16. tree-shaking

17. stylelint-webpack-plugin

18. mini-css-extract-plugin

19. css-minimizer-webpack-plugin

Webpack5常用plugins整理

Webpack常用插件整理

Plugin的工作原理

webpack5常用loader和plugin

webpack的安装与配置使用最全最详细的小白教学

webpack 三基础配置：配置plugins

1：html-webpack-plugin （HtmlWebpackPlugin）

2：clean-webpack-plugin （CleanWebpackPlugin）

3： DefinePlugin

4： copy-webpack-plugin

5： SplitChunksPlugin

6： mini-css-extract-plugin

7： css-minimizer-webpack-plugin 文档

8： webpack-bundle-analyzer

9： webpack-deadcode-plugin

10： hot-module-replacement

11： NamedModuleIdsPlugin

HotModuleReplacementPlugin 文档

12： webpack-dev-middleware

13. EsLint (详细可查看 juejin.cn/post/729495…)

13.1 安装依赖

13.2 添加配置文件

13.3 修改 webpack 配置

其他几个eslint 插件及作用

eslint-plugin-html插件

eslint-plugin-import插件

eslint-plugin-node插件

eslint-plugin-promise插件

eslint-plugin-standard插件

14. eslint-plugin-prettier

15. # SplitChunksPlugin 代码分割

16. tree-shaking

17. stylelint-webpack-plugin

18. mini-css-extract-plugin

19. css-minimizer-webpack-plugin

Webpack5常用plugins整理

Webpack常用插件整理

Plugin的工作原理

webpack5常用loader和plugin

webpack的安装与配置使用 最全最详细的小白教学

webpack的安装与配置使用最全最详细的小白教学