Webpack从入门到精通

https://www.bilibili.com/video/BV1e7411j7T5

2 4

01_尚硅谷_课程介绍

HMR
loader
resolve
plugin
optimization
devtool
dll
性能优化
webpack5
tree shaking
webpack
production
code split
development
caching
eslint
lazy loading
babel
library
pwa
shimming

02_尚硅谷_webpack简介

1.1 Webpack 是什么
Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。
在Webpack看来，前端的所有资源文件（js/json/css/img/less/..）都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）.

chunk 块 less2css es6=>es5

03_尚硅谷_webpack五个核心概念

1.2 Webpack 五个核心概念
1.2.1 Entry入口（Entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。
1.2.2 Outpüt输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。
1.2.3 Loader Loader让Webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript）

1.2.4 Plugins插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
1.2.5 Mode模式（Mode）指示Webpack使用相应模式的配置。

bundle

会将process.env.NODE_ENV 的值设为development。能让代码本地调试development运行的环境启用NamedChunksPlugin 和 NamedlModulesPlugin。

会将 process.env.NODE_ENV 的值设为 production。启用FlagDependencyUsagePlugin,FlaglncludedChunksPlugin,能让代码优化上线production运行的环境ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin 和UglifyJsPlugin.

04_尚硅谷_webpack的初体验

npm i webpack@4.41.6 webpack-cli@3.3.11 -g

1.运行指令：开发环境：webpack./src/index.js -o./build/built.js --mode=developmentwebpack会以./src/index.js为入口文件开始打包,打包后输出到./build/built.js整体打包环境，是开发环境

生产环境：webpack./src/index.js-o./build/built.js--mode=productionwebpack会以./src/index.js为入口文件开始打包，打包后输出到./build/built.js整体打包环境，是生产环境

2.结论：1.webpack能处理js/json资源，不能处理css/img等其他资源2.生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化~3.生产环境比开发环境多一个压缩js代码。

05_尚硅谷_打包样式资源

webpack.config.js webpack的配置文件作用：指示webpack干哪些活（当你运行webpack指令时，会加载里面的配置）
所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs.

resolve用来拼接绝对路径的方法

dirname nodejs的变量，代表当前文件的目录绝对路径

06_尚硅谷_打包html资源

loader：1.下载 2.使用（配置loader）
plugins：1.下载 2.引入 3.使用

cnpm i -D html-webpack-plugin

07_尚硅谷_打包图片资源

图片大小小于8kb，就会被base64处理优点：减少请求数量（减轻服务器压力）缺点：图片体积会更大（文件请求速度更慢）

08_尚硅谷_打包其他资源

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "built.js",
    path: resolve(__dirname, "build"),
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.css$/,
        //1.创建style标签，将js中的样式资源插入进行，添加到head中生效
        //2.将css文件变成commonjs模块加载js中，里面内容是样式字符串
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          limit: 8 * 1024,
          name: "[hash:10].[ext]",
          outputPath: "imgs",
          esModule: false,
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        //打包其他资源(除了html/js/css资源以外的资源)/排除css/js/html资源工
        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
        loader: "file-loader",
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  mode: "development",
};

webpakc.config.js

09_尚硅谷_devServer

开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~)特点：只会在内存中编译打包，不会有任何输出启动devServer指令为：webpack-dev-Iserver

npm i webpack-dev-server -D

npx webpack-dev-server

  mode: "development",
  devServer:{
    static:{
      directory: resolve(__dirname, "build"),
    },
    compress: true,
    port: 3000,
    open: true,
  }

10_尚硅谷_开发环境基本配置

11_尚硅谷_构建环境介绍

development
productionI

cnpm i mini-css-extract-plugin -D

12_尚硅谷_提取css成单独文件

//创建style标签，将样式放入// 'style-loader',//这个loader取代style-loader。作用：提取js中的css成单独文件MiniCssExtractPlugin.loader, I//将css文件整合到js文件中

13_尚硅谷_css兼容性处理

css兼容性处理：postcss --> postcss-loader postcss-preset-env

cnpm i -D postcss-loader postcss-preset-env

帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式使用loader的默认配置'postcss-loader',修改1oader的配置

webpack.config.js

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");


// 设置nodejs环境变量
process.env.NODE_ENV = "development";

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "js/built.js",
    path: resolve(__dirname, "build"),
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.css$/,
        //1.创建style标签，将js中的样式资源插入进行，添加到head中生效
        //2.将css文件变成commonjs模块加载js中，里面内容是样式字符串
        use: [
          // "style-loader", 
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-preset-env')(),
              ]
            }
          }
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          outputPath: "imgs",
          limit: 8 * 1024,
          name: "[hash:10].[ext]",
          outputPath: "imgs",
          esModule: false,
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        //打包其他资源(除了html/js/css资源以外的资源)/排除css/js/html资源工
        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
        loader: "file-loader",
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new MiniCssExtractPlugin({
      filename: "css/index.css",
    }),
  ],
  mode: "development",
  devServer:{
    static:{
      directory: resolve(__dirname, "build"),
    },
    compress: true,
    port: 3000,
    open: true,
  }
};

package.json
{
  "name": "demo",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "css-loader": "^7.1.2",
    "file-loader": "^6.2.0",
    "html-loader": "^5.1.0",
    "html-webpack-plugin": "^5.6.3",
    "less-loader": "^12.3.0",
    "mini-css-extract-plugin": "^2.9.2",
    "postcss-loader": "^8.1.1",
    "postcss-preset-env": "^10.1.6",
    "style-loader": "^4.0.0",
    "webpack": "^5.99.7",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.1"
  },
  "browerlist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

14_尚硅谷_压缩css

cnpm i -D optimize-css-assets-webpack-plugin

15_尚硅谷_js语法检查eslint

语法检查：eslint-loader eslint注意：只检查自己写的源代码，第三方的库是不用检查的设置检查规则：package.json中eslintConfig中设置~airbnb

http://github.com/topics/javascript

airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint

cnpm i -D eslint-config-airbnb-base eslint-plugin-import eslint

下一行eslint所有规则都失效（下一行不进行eslint检查）eslint-disable-next-line

16_尚硅谷_js兼容性处理eslint

js兼容性处理：babel-loader @babel/preset-env

cnpm i babel-loader @babel/preset-env @babel/core -D

js兼容性处理：babel-loader @babel/core @babel/preset-env1.基本js兼容性处理-->@babel/preset-env问题：只能转换基本语法，如promise不能转换

2.全部js兼容性处理-->@babel/polyfill

2.全部js兼容性处理-->@babel/polyfil1问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

需要做兼容性处理的就做：按需加载-->core-js

npm i -D core-js

  // loader的配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          //预设：指示babel做怎么样的兼容性处理
          presets:[
            [
              "@babel/preset-env",
              {
                useBuiltIns: "usage",
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: "60",
                  firefox: "50",
                  ie: "9",
                  safari: "10",
                  edge: "17",
                }
              }
            ]
          ]
        },
      },

17_尚硅谷_压缩html和js

//生产环境下会自动压缩js代码mode: 'production'

  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      //压缩html文件
      minify: {
        //删除空格
        collapseWhitespace: true,
        //删除注释
        removeComments: true,
      }
    }),

18_尚硅谷_生产环境基本配置

postcss 默认用生产环境的

在webpack.config,js

// 设置nodejs环境变量
process.env.NODE_ENV = "development";

正常来讲，一个文件只能被一个loader处理。当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：先执行eslint 在执行babel

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const miniCssExtractPlugin = require("mini-css-extract-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const optimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin ");



// 设置nodejs环境变量
process.env.NODE_ENV = "development";

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "js/built.js",
    path: resolve(__dirname, "build"),
  },
  // loader的配置
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: "pre",//优先执行
        loader: "eslint-loader",
        options: {
          fix:true
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          //预设：指示babel做怎么样的兼容性处理
          presets:[
            [
              "@babel/preset-env",
              {
                useBuiltIns: "usage",
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: "60",
                  firefox: "50",
                  ie: "9",
                  safari: "10",
                  edge: "17",
                }
              }
            ]
          ]
        },
      },
      {
        test: /\.css$/,
        //1.创建style标签，将js中的样式资源插入进行，添加到head中生效
        //2.将css文件变成commonjs模块加载js中，里面内容是样式字符串
        use: [
          // "style-loader", 
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              ident: 'postcss',
              plugins: () => [
                require('postcss-preset-env')(),
              ]
            }
          }
        ],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: "url-loader",
        options: {
          outputPath: "imgs",
          limit: 8 * 1024,
          name: "[hash:10].[ext]",
          outputPath: "imgs",
          esModule: false,
        },
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        //打包其他资源(除了html/js/css资源以外的资源)/排除css/js/html资源工
        exclude: /\.(css|js|html|less|jpg|png|gif)$/,
        loader: "file-loader",
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      //压缩html文件
      minify: {
        //删除空格
        collapseWhitespace: true,
        //删除注释
        removeComments: true,
      }
    }),
    new MiniCssExtractPlugin({
      filename: "css/index.css",
    }),
    //css压缩插件
    new optimizeCssAssetsWebpackPlugin()
  ],
  mode: "development",
  devServer:{
    static:{
      directory: resolve(__dirname, "build"),
    },
    compress: true,
    port: 3000,
    open: true,
  }
};

19_尚硅谷_性能优化介绍

webpack性能优化

*开发环境性能优化
*生产环境性能优化

开发环境性能优化
优化打包构建速度
*优化代码调试

生产环境性能优化
优化打包构建速度
优化代码运行的性能

20_尚硅谷_HMR

开发环境打包速度

HMR：hot module replacement 热模块替换/模块热替换
作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
极大提升构建速度

  devServer:{
    static:{
      directory: resolve(__dirname, "build"),
    },
    compress: true,
    port: 3000,
    open: true,
    // 开启HMR功能 热模块替换
    hot: true,
  }
默认只对样式 起作用
样式文件：可以使用HMR功能：因为style-loader内部实现了~
js文件：默认不能使用HMR功能
html文件：默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~
    
解决：修改entry入口，将html文件引入
  entry: ["./src/index.js",'./src/index.html'],
 html只有一个 不需要做hmr
 
 
 js文件：默认不能使用HMR功能-->需要修改js代码，添加支持HMR功能的代码
 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
 
if(module.hot){
    //一旦 module.hot 为true，说明开启了HMR功能。--> 让HMR功能代码生效
    module.hot.accept('./print.js', () => {
        //方法会监听print.js文件的变化，一旦发生变化，其他默认不会重新打包构建。
        //会执行后面的回调函数
        print();
    })
}

21_尚硅谷_source-map

source-map:一种提供源代码到构建后代码映射技术(如果构建后代码出错了，通过映射可以追踪源代码错误)

[inline-[hidden-leval-][nosources-][cheap-[module-]]source-map

错误代码准确信息和源代码的错误位置

inline-source-map:内联
只生成一个内联source-map
hidden-source-map:外部错误代码错误原因，但是没有错误位置不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map：内联

nosources-source-map:外部错误代码准确信息，但是没有任何源代码信息
cheap-source-map:外部只能精确的行
cheap-module-source-map:外部

每一个文件都生成对应的source-map，都在eval
内联和外部的区别：1.外部生成了文件，内联没有2.内联构建速度更快

开发环境：速度快，调试更友好速度快(eval>inline>cheap>...)eval-cheap-souce-mapeval-source-map

调试更友好souce-mapcheap-module-souce-mapcheap-souce-mapT

生产环境：源代码要不要隐藏?调试要不要更友好内联会让代码体积变大，所以在生产环境不用内联nosources-source-maphidden-source-map

22_尚硅谷_oneOf

  // loader的配置
  module: {
    rules: [
      {
        oneOf:[
          {
            test: /\.js$/,
            exclude: /node_modules/,
            enforce: "pre",//优先执行
            loader: "eslint-loader",
            options: {
              fix:true
            },
          },
            
            以下loader只会匹配一个注意：不能有两个配置处理同一种类型文件
            提取出去外面rule

处理一个加速

23_尚硅谷_缓存

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true,//开启babel缓存第二次构建时，会读取之前的缓存
          //预设：指示babel做怎么样的兼容性处理
          presets:[
            [
              "@babel/preset-env",
              {
                useBuiltIns: "usage",
                corejs: {
                  version: 3,
                },
                targets: {
                  chrome: "60",
                  firefox: "50",
                  ie: "9",
                  safari: "10",
                  edge: "17",
                }
              }
            ]
          ]
        },
      },

module.exports = {
  entry: ["./src/index.js",'./src/index.html'],
  output: {
      缓存出现不刷新数据情况
    filename: "js/built.[hash:10].js",
    path: resolve(__dirname, "build"),
  },
    
        new MiniCssExtractPlugin({
      filename: "css/index.[hash:10].css",
    }),

缓存：babel缓存cacheDirectory: true

hash 文件资源缓存hash:每次wepack构建时会生成一个唯一的hash值。问题：

问题：因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）

chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样

问题：js和css的hash值还是一样的因为css是在js中被引入的，所以同属于一个chunk

contenthash：根据文件的内容生成hash值。不同文件hash值一定不一样

    new MiniCssExtractPlugin({
      filename: "css/index.[contenthash:10].css",
      // filename: "css/index.[hash:10].css",
    }),

24_尚硅谷_tree shaking

tree shaking：去除无用代码2.开启production环境前提：1.必须使用ES6模块化

作用：减少代码体积

在package.json中配置"sideEffects"：false所有代码都没有副作用（都可以进行tree shaking)

问题：可能会把css /@babel/polyfill(副作用)文件干掉

"sideEffects":["*.CSS"]
又可以继续

25_尚硅谷_code split

代码分割

//注释改名字块的名字，在打包的时候会生效

import(/*  webpackChunkName:"test" */'./test.js').then(res=>{

}).catch(err=>{
    console.log(err);
})


webpack.config.js
module.exports = {
  entry: {
    index:'./src/index.js',
    test:'./src/test.js'
  },
  optimization:{
    //1.可以将node_modules中代码单独打包一个chunk最终输出
    //2.自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk
    splitChunks: {
      chunks: 'all',
    },
  },

26_尚硅谷_懒加载和预加载

用再导入 import

懒加载_{：当文件需要使用时才加载}
预加载 prefetch：会在使用之前，提前加载js文件

//注释改名字块的名字，在打包的时候会生效

import(/*  webpackChunkName:"test", webpackPrefetch:true */'./test.js').then(res=>{

}).catch(err=>{
    console.log(err);
})

27_尚硅谷_PWA

离线访问

PWA：渐进式网络开发应用程序(离线可访问）
workbox --> workbox-webpack-plugin

1.eslint不认识 window、navigator全局变量解决：需要修改package.json中eslintConfig配置"env":{工"browser"：true // 支持浏览器端全局变量1

sw代码必须运行在服务器上--> nodejs-->npm i serve -gserve-s build启动服务器，将build目录下所有资源作为静态资源暴露出去

// 注册serviceWorker 处理兼容性问题
if(serviceWorker){
   window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js').then(res=>{
        console.log('注册成功', res);
    }).catch(err=>{
        console.log('注册失败', err);
    })
   })

}

const workboxWebpackPlugin=require('workbox-webpack-plugin');

28_尚硅谷_多进程打包

cnpm i thread-loader -D

      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          "thread-loader", //开启多进程打包
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true, //开启babel缓存第二次构建时，会读取之前的缓存
              //预设：指示babel做怎么样的兼容性处理
              presets: [
                [
                  "@babel/preset-env",
                  {
                    useBuiltIns: "usage",
                    corejs: {
                      version: 3,
                    },
                    targets: {
                      chrome: "60",
                      firefox: "50",
                      ie: "9",
                      safari: "10",
                      edge: "17",
                    },
                  },
                ],
              ],
            },
          },
        ],
      },

开启多进程打包。进程启动大概为600ms，进程通信也有开销。只有工作消耗时间比较长，才需要多进程打包

29_尚硅谷_externals

  mode: "development",
  externals: {
    //忽略库名--npm包名 从cdn引入
    jquery: "jQuery",
  },
      webpack.config.js

30_尚硅谷_dll

使用dl1技术，对某些库（第三方库：jquery、react、vue...）进行单独打包

当你运行webpack时，默认查找webpack.config.js配置文件需求：需要运行 webpack.dl1.js 文件
--> Webpack--config webpack.dll.js

webpack.config.js
  plugins: [
    //告诉webpack哪些库不参与打包，同时使用时的名称也得变~
    new webpack.DllReferencePlugin({
      manifest: resolve(__dirname, "dll/manifest.json")
    }),
    //将某个文件打包输出去，并在html中自动引入该资源
    new AddAssetHtmlWebpackPlugin({
      filepath: resolve(__dirname, "dll/jquery.js"),
    }),
      
      
      
webpack.dll.js
const { resolve } = require("path");
const webpack = require("webpack");

module.exports = {
  entry:{
    //最终打包生成的[name]--> jquery
    //['jquery']--> 要打包的库是jquery
    jquery: ["jquery"],
  },
  output: {
    filename: "[name].js",
    path: resolve(__dirname, "dll"),
    library: "[name]_[hash]", //打包的库里面向外暴露出去的内容叫什么名字

  },
  plugins: [
    new webpack.DllPlugin({
      name: "[name]_[hash]", // 映射库的暴露的内容名字
      path: resolve(__dirname, "dll/manifest.json"), //输出的清单文件的名字和路径
    }),
  ],
  mode: "production",
};

3 1_尚硅谷_性能优化总结

开发环境性能优化

优化打包构建速度
HMR
优化代码调试
source-map

生产环境性能优化

优化打包构建速度
oneOf
babel缓存
多进程打包
externals
d11

优化代码运行的性能
缓存（hash-chunkhash-contenthash）
tree shaking
code split
懒加载/预加载
pwa 离线使用

32_尚硅谷_webpack配置详解介绍

看官网文档

33_尚硅谷_webpack详细配置之entry

entry：入口起点1. string2.array3. object

string --> './src/index.js'单入口打包形成一个chunk。输出一个bundle文件。此时chunk的名称默认是 main
array --> ['./src/index.js','./src/add.js']多入口所有入口文件最终只会形成一个chunk，输出出去只有一个bundle文件。只有在HMR功能中让html热更新生效~
object多入口有几个入口文件就形成几个chunk，输出几个bundle文件此时chunk的名称是key

34_尚硅谷_webpack详细配置之output

  output: {
    //文件名称（指定名称+目录)
    filename: "js/built.[hash:10].js",
    //输出文件目录(将来所有资源输出的公共目录）
    path: resolve(__dirname, "build"),
    //所有资源引入公共路径前缀-->‘imgs/a.jpg'-->‘/imgs/a.jpg'
    publicPath: "/",
    chunkFilename: "[name].chunk.js", //非入口chunk的名称
    library:'[name]',//整个库向外暴露的变量名
    // libraryTarget:'window',//变量名添加到哪个上browser
    libraryTarget:'global',//变量名添加到哪个上node commonjs amd
  },

35_尚硅谷_webpack详细配置之module

36_尚硅谷_webpack详细配置之resolve

  mode: "development",
  //解析模块的规则
  resolve: { 
    //配置解析模块路径别名:优点简写路径缺点路径没有提示
    alias:{
      $css:resolve(__dirname,"src/css") // import $css/index.css"
    },
    //配置省略文件路径的后缀名
    extensions: [".js", ".json", ".jsx", ".css"],
    //webpack解析模块是去找哪个目录告诉
    modules: [resolve(__dirname, "../../node_modules"), "node_modules"],
  },

37_尚硅谷_webpack详细配置之devServer

38_尚硅谷_webpack详细配置之optimization

npm i terser-webpack-plugin -D 配置压缩方案

  mode: "development",
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 30*1024,
      maxSize: 0,//最大没有限制
      minChunks: 1,//要提取的chunk最少被引用1次
      maxAsyncRequests: 5,//按需加载时并行加载的文件的最大数量
      maxInitialRequests: 3,//入口js文件最大并行请求数量
      automaticNameDelimiter: '~',//名称分隔符
      name: true,//拆分后的文件命名规则
      cacheGroups: { 
        //分割chunk的组// node_modules文件会被打包到 vendors 组的chunk中。--> vendors~xxx.js//满足上面的公共规则，如：大小超过30kb，至少被引用一次。
        vendors: { 
          test: /[\\/]node_modules[\\/]/,//匹配node_modules中的文件
          priority: -10,//优先级
        },
        default: { 
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
    runtimeChunk: { 
      name: 'runtime',//运行时文件
    },
    minimizer: [
      // css压缩
      new CssMinimizerPlugin(),
      // js压缩
      new TerserPlugin(),
      // 图片压缩
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminMinify,
          options: {
            // Lossless optimization with custom option
            // Feel free to experiment with options for better result for you 
          }
        }
      })
    ]
  },

39_尚硅谷_webpack5介绍和使用
40_尚硅谷_总结webpack

posted @ 2025-05-29 18:30 KooTeam 阅读(25) 评论(0) 收藏举报

刷新页面返回顶部

KooTeam

Knowledge makes humble,ignorant makes proud!

Webpack从入门到精通

Webpack从入门到精通

01_尚硅谷_课程介绍

02_尚硅谷_webpack简介

03_尚硅谷_webpack五个核心概念

04_尚硅谷_webpack的初体验

05_尚硅谷_打包样式资源

06_尚硅谷_打包html资源

07_尚硅谷_打包图片资源

08_尚硅谷_打包其他资源

09_尚硅谷_devServer

11_尚硅谷_构建环境介绍

13_尚硅谷_css兼容性处理

14_尚硅谷_压缩css

15_尚硅谷_js语法检查eslint

16_尚硅谷_js兼容性处理eslint

17_尚硅谷_压缩html和js

18_尚硅谷_生产环境基本配置

19_尚硅谷_性能优化介绍

webpack性能优化

20_尚硅谷_HMR

21_尚硅谷_source-map

22_尚硅谷_oneOf

23_尚硅谷_缓存

24_尚硅谷_tree shaking

25_尚硅谷_code split

26_尚硅谷_懒加载和预加载

27_尚硅谷_PWA

28_尚硅谷_多进程打包

29_尚硅谷_externals

30_尚硅谷_dll

3 1_尚 硅谷_性能优化总结

开发环境性能优化

生产环境性能优化

32_尚硅谷_webpack配置详解介绍

33_尚硅谷_webpack详细配置之entry

34_尚硅谷_webpack详细配置之output

35_尚硅谷_webpack详细配置之module

36_尚硅谷_webpack详细配置之resolve

38_尚硅谷_webpack详细配置之optimization

公告

3 1_尚硅谷_性能优化总结