03-03.Plugin

Plugin

Plugin的作用

Plugin类似与vue和react的生命周期。可以帮助我们在使用webpack打包过程中的某一个特定的时刻，根据我们的需要和配置，完成特定的功能。

HtmlWebpackPlugin

使用HtmlWebpackPlugin，可以自动的在输出目录中创建入口html文件，并且将打包生成的main文件，自动引入到这个html文件当中。

使用HtmlWebpackPlugin

• 首先安装HtmlWebpackPlugin，npm i html-webpacl-plugin -D
• 修改webpack.config.js文件

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

module.exports = {
  // 定义入口文件
  entry: path.resolve(__dirname, "src/index.js"),
  // 定义打包后输入的文件 
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [{
      test: /\.jpg$/,
      use: 'file-loader'
    }, {
      test: /.(eot|svg|ttf|woff|woff2)/,
      use: 'file-loader'
    }, {
      test: /\.scss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            importLoaders: 2,
          }
        }, 
        'postcss-loader',
        'sass-loader'
      ]
    }]
  },
  plugins: [new HtmlWebpackPlugin({
    template: path.resolve(__dirname, 'src/index.html') // 使用当前目录中'src/index.html'文件作为模板文件
  })]
}

• 执行npm run bundle命令进行打包。我们就可以看到在dist目录中为我们自动创建了index.html入口文件，并自动引入了bundle.js文件

CleanWebpackPlugin

CleanWebpackPlugin能够帮助我们在执行打包之前，自动的清空输出目录

• npm install --save-dev clean-webpack-plugin
• 修改wepack.config.js

  // ...
  const CleanWebpackPlugin = require('clean-webpack-plugin') // 引入CleanWebpackPlugin
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src/index.html')
    }), 
    new CleanWebpackPlugin()
  ]
  // ...