04-webpack中使用plugin

loader是用于特定的模块的类型转换,plugin用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等。

CleanWebpackPlugin

用于清除之前打包的文件。npm install clean-webpack-plugin

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
    new CleanWebpackPlugin()
]

DefinePlugin

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）
比如：全局注册一个名为BASE_URL

const { DefinePlugin } = require('webpack');
plugins: [
    new DefinePlugin({
      BASE_URL: '"./"'
    })
]

CopyWebpackPlugin

安装：npm install copy-webpack-plugin 。接下来配置CopyWebpackPlugin即可:

• 复制的规则在patterns中设置
• from：设置从哪一个源中开始复制
• to：复制到的位置，可以省略，会默认复制到打包的目录下
• globOptions：设置一些额外的选项，其中可以编写需要忽略的文件
  • .DS_Store：mac目录下回自动生成的一个文件
  • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成。

new CopyWebpackPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: [
              "**/index.html",
              "**/.DS_Store",
            ]
          }
        }
      ]
})

MiniCssExtractPlugin

MiniCssExtractPlugin可以帮助我们将css提取到一个独立的css文件中，该插件需要在webpack4+才可以使用。首先，我们需要安装 mini-css-extract-plugin：npm install mini-css-extract-plugin，然后配置rules和plugins。

module: {
      rules: [
        {
          test: /\.css/i,
          // style-lodader -> development
          use: [
            isProduction ? MiniCssExtractPlugin.loader: "style-loader", 
            "css-loader"],
        },
      ],
    },    
plugins: [
    // 生产环境
    new MiniCssExtractPlugin({
      filename: "css/[name].[hash:8].css"
    })
  ]