Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

  • Applies to webpack packaging throughout the process
  • The packaging process for WebPack has (lifecycle concept) hooks

Plugins can do things for you when WebPack is running at a certain stage, similar to life cycle concept extensions that inject extension logic at certain points in the WebPack build process to change the build result or do what you want. Apply to the entire build process.

HtmlWebpackPlugin

Htmlwebpackplugin automatically generates an HTML file after packaging, and introduces the JS module generated by packaging into the HTML

Configuration:

Title: The title element used to generate the pagefilename: Specifies the output HTML file name. The default is index.html, or you can configure it directly with subdirectories.template: template file path, support loader, such as HTML! ./index.htmlinject: true | 'head' | 'body' | falseInject all resources into a specific template or templateContent if set totrueOr body, where all javascript resources are placed at the bottom of the body element,'head'Will be placed in the head element.favicon: Adds the specific Favicon path to the output HTML file.minify| : {}falsePass the HTML-minifier option to the Minify outputhash: true | falseIf fortrue, will add a unique Webpack to compile hash to all contained scripts and CSS files, useful for decaching.cache: true | falseIf fortrue, which is the default and will publish files only after they have been modified.showErrors: true | falseIf fortrueThis is the default, and error messages are written to the HTML pagechunks: allows you to add only certain blocks (for example, only unit test blocks)chunksSortMode: Allows control blocks to be sorted before being added to a page. Supported values:'none' | 'default' |
{function} -default: 'auto'
excludeChunks: allows certain blocks to be skipped, (For example, skip blocks of unit tests)
Copy the code

Case study:

const path = require("path");
const htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
 plugins: [
 new htmlWebpackPlugin({
 title: "My App".filename: "app.html".template: "./src/index.html"}})];//index.html<! DOCTYPE html><html lang="en">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title><%= htmlWebpackPlugin.options.title %></title>
 </head>
 <body>
 <div id="root"></div>
</body>
</html>
Copy the code

Clean-webpack-plugin (automatically clean up the build directory)

Avoid manually deleting dist each time before a build

Use the clean – webpack – the plugin

  • The output directory specified by output is deleted by default
module.exports = {
entry: {
app: './src/app.js'.search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js'.path: __dirname + '/dist'
},
plugins: [+new CleanWebpackPlugin()
}
Copy the code

mini-css-extract-plugin

Break the CSS files into separate files

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
{
 test: /\.css$/,
 use: [MiniCssExtractPlugin.loader, "css-loader"]}new MiniCssExtractPlugin({
 filename: "[name][chunkhash:8].css"
 })
Copy the code

html-inline-css-webpack-plugin

Embed CSS in HTML to reduce resource requests and page jitter

  • Rely on htML-webpack-plugin, mini-CSS-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css".chunkFilename: "[id].css"
    }),
    new HtmlWebpackPlugin(),
    new HTMLInlineCSSWebpackPlugin(),
  ],
  module: {
    rules: [{test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"}]}}Copy the code

Principle:

  • Listen to the beforeAssetTagGeneration hook in htML-webpack-plugin (before generating static tags) to store the related style content (assets[fileName].source()) to be inlined, And prevent to generate the corresponding link label (data. Assets. CSS. Splice. Splice)
  • Listen to the beforeEmit hook in the HTML-webpack-plugin to inject stored inline CSS styles in style

Style – loader – the inline CSS and HTML – webpack – the plugin

  • Style-loader: The process of inserting styles is dynamic. It is the process of inserting styles into style tags when running js files
  • Css-loader: Converts CSS to CommonJS objects, putting style code in JS
  • Html-inline-css-webpack-plugin: Package CSS extract into a separate CSS file, then read the extracted CSS content into the page style. This process is completed in the construction phase