Plug-ins are the backbone of WebPack. Webpack itself is built on top of the same plugin system you use in your WebPack configuration!

Plug-ins are designed to solve other things that loader cannot implement.

clean-webpack-plugin

Each time we pack automatically delete the original package folder

  1. download

npm install clean-webpack-plugin -D

  1. Configured to use
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

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

Now we don’t have to manually remove the package every time we build the package through WebPack

html-webpack-plugin

The plugin will generate an HTML5 file for you, importing all of your WebPack-generated bundles using the Script tag in the body

  1. download

npm install html-webpack-plugin -D

  1. Configured to use
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin()
  ]
}
Copy the code

Customize HTML templates

Plug-in Default Template

Emulate the use of custom templates in Vue

node_modules@vue\cli-service\generator\template\public\index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <link rel="icon" href="<%%= BASE_URL %%>favicon.ico">
    <title><%%= htmlWebpackPlugin.options.title %%></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%%= htmlWebpackPlugin.options.title %%> doesn't work properly without JavaScript enabled. Please enable  it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <! -- built files will be auto injected -->
  </body>
</html>

Copy the code

Configure using a custom template, passing in the title

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'hello webpack'.// The title is resolved by ejS in the template
      template: './public/index.html'})]Copy the code

An error was detected during compilation because the global variable BASE_URL was used in the template and we did not define it

difine-plugin

Webpack built-in plug-in. Allows you to create configured global constants at compile time, which is useful when you need to differentiate between development mode and production mode. Resolve the above error

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

plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'hello webpack'.// The title is resolved by ejS in the template
      template: './public/index.html'
    }),
    new webpack.DefinePlugin({
      BASE_URL: '". /" // The path must be enclosed in quotation marks. Otherwise, internal parsing will result in a variable error})]Copy the code

Build compiled successfully

However, the favicon.ico introduced in the template is not packaged and needs to be implemented via copy-webpack-plugin

copy-webpack-plugin

Copies an existing single file or entire directory to the build directory.

  1. download

npm insstall copy-webpack-plugin -D

  1. Configured to use
const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins: [
    new CopyWebpackPlugin({
      patterns: [{from: 'public'.globOptions: {
            ignore: [ // Configure the file without copy
              '**/index.html'.'**/.DS_Store'.'**/test.txt'}}]})]Copy the code

Compile the results