HMR hot update

When a module changes, only that module is packaged. Style file: with style-loader internal implementation HMR JS file: default does not implement HMR HTML file: default does not implement HRM

  • css HMR
module.exports={
  module: {rules:[
      {
        test:/\.css$/,
        use:[
          'style-loader'.// Support host to implement CSS hot update
          'cass-loader']]}},devServer: {hot:true}}Copy the code
  • HTML HMR
// import an HTML file. HTML is a file without implementing HMR
module.exports={
  entry: ['./index.js'.'./index.html'].devServer: {host:true}}Copy the code
  • js HMR

Only non-entry files are processed

// index.js files embed code
if(module.hot){
 // HMR is enabled
 module.hot.accept('./modulePath'.function(){
   // Listen for module changes. Once changes occur, other modules are not repackaged.
   // This callback will be executed})}Copy the code

source-map

Provides source – to – build code mapping technology

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

  • inline: map.js is inlined, most not in the code. Increase file size
  • eval: map.js is inline and embedded after each file code. Increase file size
  • cheap: Locate the row
  • moduleWill:loaderSouce Map added
devtool Build speed Rebuild speed The production environment Debug location
(none) +++ +++ yes No mapping code, packaged code
eval +++ +++ no Generated code
cheap-eval-source-map + ++ no Converted code (line only)
cheap-module-eval-source-map o ++ no Original source code (line only)
eval-source-map — + no Original source code
cheap-source-map + o yes Converted code (line only)
cheap-module-source-map o – yes Original source code (line only)
inline-cheap-source-map + o no Converted code (line only)
inline-cheap-module-source-map o – no Original source code (line only)
source-map — — yes Original source code, error location of the code
inline-source-map — — no Original source code, error location
hidden-source-map — — yes Original source code
nosources-source-map — — yes No source code content

oneof

Laoder in Oneof will only use one

module.exports={
  module: {rules:[
      {
      // Only one loader will match each timeOneOf: [{test:/\.css$/,
            use:[
              'style-loader'.'css-loader']}]}}Copy the code

Multi-process packaging

The process startup time is 600ms, and the process communication time is also required. Therefore, the loader that takes a long time needs multi-process packaging

// npm i thread-loader
module.exports={
  module: {rules:[
      {
        test:/\.js$/,
        use:[
          {
            loader:'thread-loader'.// The number of CPU cores can be set. By default, the number of CPU cores is -1
            options: {workers:2 2 / / process}}'babel-loader'}]}}Copy the code

The cache

  • Babel cache
module.exports={
  module: {rules:[
      {
        test:/\.js$/,
        loader:'babel-loader'.options: {cacheDirectory:true}}]}}Copy the code
  • File resource cache
    • [hash]Each Webpack build generates a uniquehash, repack each timehashWill be changed. The cache is invalid
    • [chunkhash]: according to thechunkgeneratehashIf the packets are from the same sourcechunk.hashIt’s the same thing,cssinjsIs introduced into the samechunk.
    • [contenthash]: Generated based on contenthash.

Production uses contenthash file packaging + server cache for use

tree shaking

Remove useless code

  • Conditions: Usees6Modular,mode='production'
  • Some versions may remove the required code
//package.json
{
  "sideEffects":false // All code is tree shaking
  // will remove.css @babel/polyfill etc. from files that are not directly called
}
//package.json
{
  "sideEffects": ["*.css"."*.less"] // Do not delete the file
}
Copy the code

code split

  • Multiple entrances, multiple exits
import { resolve } from 'path';
module.exports={
  entry: {mian:'./src/main.js'.index:'./src/index.js'
  },
  output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')}}Copy the code
  • optimizationThe third-party modules are packaged separately
module.exports={
  entry:'./src/index.js'.output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')},optimization: {splitChunks: {chunks:'all'}},/* Pack the hash of the current module into a separate file, so that the contenthash changes when the content of the file changes, resulting in the content of the js file that applies this module
  runtimeChunk: {name:entrypoint= >`runtime-${entrypoint.name}`}}Copy the code
  • jsImplementation code separation

webpack.config.js

module. Exports = {entry:'./src/index.js'.output: {filename:'js/[name].[contenthash:10].js'.path:resolve(__dirname,'dist')}},Copy the code

index.js

import(/webpackChunkName:'test'/'./test.js');
console.log('index')
// Create two js files
Copy the code

Lazy loading preloading

  • Lazy loading: Loading when needed
document.querySelector('.btn').onClick=function(){
  import(/*webpackChunkName:'test'*/'./test.js')}Copy the code
  • Preloading: Loading files at idle time after loading other resources (poor compatibility)
document.querySelector('.btn').onClick=function(){
  import(/*webpackChunkName:'test',webpackRrefetch:true*/'./test.js')}Copy the code

dll

Package third-party libraries separately

// webpack.dll.config.js
const { resolve } = require('path');
const  webpack = require('webpack');
module.exports={
  entry: {/* Vendor finally generates the name of the package to be typed ['moment'] */
    vendor: ['moment'],}output: {filename:'[name].js'.path:resolve(__dirname,'dll'),
      library:'[name]_[hash]' // The name of the exposed content
    },
    plugins: [// Generates a manifest.json --> provides mapping to packages
      new webpack.DllPlugin({
        name:'[name]_[hash].js'.path:resolve(__dirname,'dll/mainfest.json')})],mode:'production'
}
// package.json
webpack --config webpack.dll.config.js
Copy the code

Webpack excludes packaged third-party libraries and automatic HTML import

const webpack = require('webpack');
const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
module.exports={
  plugins: [new webpack.DllReferencePlugin({
      manifest: resolve(__dirname,'dll/manifest.json')}),// Automatically import resources in HTML
    new AddAssetHtmlWebpackPlugin({
      filePath:resolve(__dirname,'dll/vendor.js')]}})Copy the code

externals

module.exports={
   // Reject incoming packets
  externals: {// Package name: the package name downloaded by NPM
    jquery:'jQuery'}}Copy the code