Webpack5 - 常用Plugin（插件）

一. Webpack的插件是什么

webpack的插件，可以增强webpack的自动化能力，使用插件，可以完成自动清空目录、拷贝资源文件、压缩输出代码等功能。

webpack的一个个插件，就是在 webpack生命周期的钩子上挂载的一个个任务。

一个插件（Plugin）必须是一个函数 或者 一个 包含 apply 方法的对象。

二. 常用的Webpack插件

常用的Webpack插件	作用
clean-webpack-plugin	在每次打包开始 清除打包目录中的文件
html-webpack-plugin	自动生成使用 bundle.js 的HTML文件，可根据模板生成，可输出一个或多个html文件
copy-webpack-plugin	拷贝不需打包的资源文件 如 public 文件夹中的资源
webpack.DefinePlugin	为项目注入全局变量

更多webpack 插件 参见webpack 文档： Plugins | webpack 中文网

上面常用 webpack 插件 的使用方法，见 webpack.config.js ：

module.exports = {
  // ... 此处省略webpack.config.js文件其它部分

  plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({
      title: 'Webpack 自定义一个 Plugin',
      meta: {
        viewport: 'width=device-width'
      },
      template: './src/index.html' // html文件模板
    }),
    new HtmlWebpackPlugin({
      filename: 'about.html',      // 生成html文件的名称
    }),

    new CopyPlugin({
      patterns: [
        { from: 'public', to: 'public' }, // 把项目根目录下的public文件夹拷贝到打包输出目录
      ]
    }),

    new webpack.DefinePlugin({
      // 打包后 项目中任何使用的 API_BASE_URL 都会被替换为 'https://api.example.com'
      API_BASE_URL: JSON.stringify('https://api.example.com')
    }),

  ]
}

本文 完。