plugins

Webpack has hooks like before, during, and after packaging. Plugins can trigger hooks in the Webpack packaging process according to their own needs

HtmlWebpackPlugin

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

Ejs syntax is supported, such as title

name decription
title The title element used to generate the page<%= htmlWebpackPlugin.options.title %>
filename Write to an HTML file. The default is index.html. You can specify a subdirectory here (e.g. Assets /admin.html)
template Relative or absolute path to the WebPack template. By default, it will use (SRC /index.ejs if present)
inject Inject all resources into a specific template or temlateContent. If set to true or body, all JavaScript resources are placed at the bottom of the body. Head puts javascrit resources in the HEAD element.
favicon Add the path to the specific Favicon to the output HTML file
filename: The output HTML file name, which defaults to index.html, can also be configured directly with subdirectories.
inject: True, ‘head’, ‘body’, false, inject all resources into a specific template or templateContent. If set to true or body, All javascript resources will be placed at the bottom of the body element, and the ‘head’ will be placed in the head element.
favicon: Add the specific Favicon path to the output HTML file.
minify: {}, false, pass the HTmL-minifier option to minify output
hash: True, false, and, if true, will add a unique Webpack to compile the hash to the contained scripts and CSS files, useful for decaching.
cache: True, false, and if true, this is the default, and the document is published only after the file has been modified.
showErrors: True, false, and if true, which is the default, the error message is written to the HTML page
chunks: Allow adding only certain blocks (for example, only unit test blocks)
chunksSortMode: Allows control of how blocks are sorted before being added to the page. Supported values :’ None ‘, ‘default’, {function}-default:’auto’
excludeChunks: Allow skipping blocks (e.g., skipping blocks for unit tests)
  1. mini-css-extract-plugin

This loader cannot be used with the style-loader(which inserts CSS into the head by manipulating the DOM).

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

Copy the code

Hash, Contenthash, and Chunkhash

hash// An entry must have only one chunk, and a chunk may not have only one dependencyCopy the code

sourceMap

The mapping between source code and packaged code, which is located through sourceMap. Devtool :” None “devtool:” None”

Eval: The fastest, using EVAL to wrap module code

Source-map: generates the. Map file

Cheap: Fast and does not contain listing information

Module: third-party Module containing loader sourcemap(e.g. JSX to JS, Babel sourcemap)

Inline: embed.map as a DataURI, not generate a separate.map file

Inline-source-map: a. Map file is not generated, but a Base64 mapping is added to the last line of the output file

! [](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/5/11/17203d34ba853e4b~tplv-t2oaga2asx-image.image )Copy the code

Recommended Settings

devtool:"cheap-module-eval-source-map"// Devtool is not recommended to be enabled online:"cheap-module-source-map"// If you must enable -> line please use this configurationCopy the code

WebpackDevServer

Will help us refresh the entire browser

"scripts": {
    "server": "webpack-dev-server"
},

 
devServer: {
    contentBase: "./dist",// specify the local server static resource directory open:true// Whether to open browser window port: 8081, // Set port"/api": {
        target: "http://localhost:9092"}}, // then see the output dis directory, put it in physical memory, speed up // create a server.js modify scripts"server":"node server.js"
//server.js
const express = require('express')
const app = express()
app.get('/api/info', (req,res)=>{
    res.json({
        name:'Tom',
        age:5, 
        msg:'welcome'
    }) 
})
app.listen('9092')
//node server.js
http://localhost:9092/api/info


//index.js
import axios from 'axios'
axios.get('/api/info').then(res=>{
    console.log(res)
})
 
Copy the code

Hot Module Replacement (HMR: Hot Module Replacement)

CSSHMR: HMR cannot be used with mini-CSs-extract-plugin, otherwise the CSS will not work.

If I have to extract a separate file, then the development environment does not need to extract a separate file, i.e. the development environment continues to use hot updates and uses the mini-CSs-extract-plugin to extract a separate CSS file in the production configuration

JSHMR

// WebPack itself is based on nodeJS and supports commonJS specification. When hot is enabled, a hot attribute is added to the moduleif (module.hot) {
  module.hot.accept("./b".function() {
    document.body.removeChild(document.getElementById("number"));
    number();
  });
}
Copy the code

HMR public configuration

const webpack = require("webpack");

devServer: {
  hot: trueHotOnly hotOnly: // hotOnly hotOnly:true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
],

Copy the code