webpack使用详解

摘要:webpack作为一款主流的构建工具,对比后来者Vite虽然存在一些缺点,例如启动慢,配置复杂等。在很多项目中使用依然基于webpack构建,有必要掌握其概念、构建流程和配置方法。

1 webpack概述

1.1 基本概念

        webpack 是一个用于现代JavaScript 应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图,然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。

        这里官方给出的的webpack定义涉及如下关键字:

        静态模块: 这里的“静态模块”指的是在开发阶段可以直接被Webpack引用的资源,这些资源可以直接被获取并打包进最终的输出文件(如bundle.js)。静态模块可以包括JavaScript代码、CSS样式表、图片和其他类型的文件。Webpack通过处理应用程序,在内部构建一个依赖图,此依赖图对应映射到项目所需的每个模块,并生成一个或多个bundle。这些bundle是静态资源,用于展示应用程序的内容。

        打包: 是指将多个模块和资源组合成一个或多个bundle(包)的过程。Webpack 通过分析应用程序的依赖图,将所有必要的模块和资源打包成一个或多个文件,这些文件可以被浏览器加载和执行。 其目的是简化部署和优化加载性能。通过打包,可以减少 HTTP 请求的数量,合并多个资源,以及在加载前对资源进行优化(如压缩、合并等)。打包过程是高度可配置的,允许开发者根据需要定制输出的 bundle 结构,包括代码分割(将应用程序分割成多个chunk,按需加载)、优化资源(如压缩 JavaScript 和 CSS)、提取共享依赖等。

        依赖图 (dependency graph) 是指在Webpack构建过程中,Webpack会将所有模块及其依赖关系组织成一个图形结构。每当一个文件依赖于另一个文件时,Webpack就会将这两者视为直接依赖关系。其他概念

概念解释
入口(entry)入口起点(entry point) 指示 webpack 应该使用哪个模块,来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
输出(output)output 属性告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中。
loaderwebpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。
插件(plugin)loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量
模式(mode)通过选择 development, production 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

1.2 构建流程

        webpack 构建的核心任务是完成内容转化和资源合并。其完整构建流程主要包含以下 3 个阶段:

  1. 初始化阶段

    初始化参数:从配置文件、配置对象和Shell参数中读取并与默认参数进行合并,组合成最终使用的参数。

    创建编译对象:用上一步得到的参数创建 Compiler 对象。

    初始化编译环境:包括注入内置插件、注册各种模块工厂、初始化 RuleSet 集合、加载配置的插件等。

  2. 构建阶段

    开始编译:执行Compiler对象的run方法,创建Compilation对象。

    确认编译入口:进入entryOption阶段,读取配置的Entries,递归遍历所有的入口文件,调用 Compilation.addEntry 将入口文件转换为 Dependency 对象。

    编译模块(make): 调用 normalModule 中的 build 开启构建,从 entry 文件开始,调用 loader 对模块进行转译处理,然后调用 JS 解释器(acorn)将内容转化为 AST 对象,然后递归分析依赖,依次处理全部文件。

    完成模块编译:在上一步处理好所有模块后,得到模块编译产物和依赖关系图。

  3. 生成阶段

    输出资源(seal):根据入口和模块之间的依赖关系,组装成多个包含多个模块的 Chunk,再把每个 Chunk 转换成一个 Asset 加入到输出列表,这步是可以修改输出内容的最后机会。

    写入文件系统(emitAssets):确定好输出内容后,根据配置的 output 将内容写入文件系统。

        构建阶段围绕 module 展开,生成阶段则围绕 chunks 展开。经过构建阶段之后,webpack 得到足够的模块内容与模块关系信息,之后通过 Compilation.seal 函数生成最终资源。[1]

1.3 webpack loader

        webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件,并将它们转换为有效模块,以供应用程序使用,以及被添加到依赖图中。

        loader本质上是一个函数,将接收到的内容进行转换并返回转换后的结果。通过loader将其他类型的文件转换成有效的webpack modules(如 ESmodule、CommonJS、AMD),这样webpack就可以消费这些模块,并将其添加到依赖关系图中。

        常见的loader有(具体用法后文将有介绍):

  • raw-loader:加载文件原始内容,webpack 5中已经废弃。
  • file-loader:将引用文件输出到目标文件夹中,在代码中通过相对路径引用输出的文件。
  • url-loader:和file-loader类似,但是能在文件很小的情况下以 base64 的方式将文件内容注入到代码中。
  • babel-loader:将较新版本的ES语法转换为浏览器兼容的语法。它结合了同步和异步转换的优势:当启用缓存时,babel-loader 采用异步模式以提高构建效率;反之,则默认使用同步模式以确保转换的准确性。
  • style-loader:将CSS代码注入到JavaScript中,通过DOM操作加载CSS。
  • css-loader:加载CSS,支持模块化、压缩、文件导入等特性。

        区别:style-loader负责将样式插入到DOM中,使样式对页面生效。css-loader主要负责处理import、url路径等外部引用。style-loader会先于css-loader执行。

        使用 loader 的方式主要有两种:

  1. 配置方式(推荐):在 webpack.config.js 文件中指定 loader,通过在 module.rules 中使用 test 匹配要转换的文件类型,使用 use 指定要使用的 loader。[2]
module.exports = {module: {rules: [{ test: /\.ts$/, use: "ts-loader" }],},
};
  1. 内联方式:在每个import语句中显式指定 loader。通过为内联import语句添加前缀,可以覆盖配置中的所有 loader, preLoader 和 postLoader
import Styles from "style-loader!css-loader?modules!./styles.css";

2 基本配置

2.1 webpack安装

        wepack正常运行必须依赖node环境,在node环境中须使用npm工具管理node中各种依赖的包,所以安装webpack之前需要安装Node.js。

npm i webpack webpack-cli --save-dev

        Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具,通常和Webpack一起使用,以便更好地管理和构建前端项目。

        Webpack的配置一般要配置common、dev、pro三个环境,配置多个环境。会在不同的环境使用不同的配置文件进行构建。例如,npm run dev命令会使用build/webpack.dev.js 配置文件

"scripts": {"test": "echo \"Error: no test specified\" && exit 1","devBuild": "webpack --config build-optimization/webpack.dev.js","dev": "webpack serve --config build/webpack.dev.js","build": "webpack --config build-optimization/webpack.prod.js"},

        dev和pro环境通过merge引入common配置文件

//const webpackCommonConf = require('./webpack.common.js')
const { merge } = require('webpack-merge')

        注:也可以借助 cross-env (跨平台通用)包命令,设置参数区分环境。但是要注意cross-env 设置的只在Node.js环境生效,前端代码无法访问process.env.NODE_ENV。需要借助Webpack内置的 DefinePlugin插件。在编译时,将前端代码中匹配的变量名,替换为值或表达式

2.2 开发环境和生产环境的配置

        下面通过webpack 配置对象,展示 Webpack 如何构建应用程序,其基本组成部分如下(逐行功能参考注释):

module.exports = {entry: path.join(srcPath, 'index'),  //配置入口module: {rules: [  //开始定义模块处理规则,通过rules数组来配置不同文件类型的加载器。{ // 对于所有以.js结尾的文件,使用babel-loader进行转译,只处理srcPath目录下的文件,排除node_modulestest: /\.js$/,loader: ['babel-loader'],include: srcPath,exclude: /node_modules/},// {//     test: /\.vue$/,  // 匹配所有以 .vue 结尾的文件//     loader: ['vue-loader'],  // 使用 vue-loader 来处理 Vue 单文件组件//     include: srcPath// },// {  //     test: /\.css$/,//     // loader 的执行顺序是:从后往前(知识点)//     loader: ['style-loader', 'css-loader']// },{ // 对于.css文件,使用style-loader、css-loader和postcss-loader,注意加载器是从后往前执行的test: /\.css$/,// loader 的执行顺序是:从后往前loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss},{  // 处理.less文件,使用style-loader、css-loader和less-loader,同样遵循加载器的执行顺序test: /\.less$/,// 增加 'less-loader' ,注意顺序loader: ['style-loader', 'css-loader', 'less-loader']}]},plugins: [// 使用HtmlWebpackPlugin生成index.html文件,自动将打包后的资源插入其中,template指定了模板文件的位置new HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'),  // 指定了被打包HTML模板文件的位置。filename: 'index.html'  // filename:指定了生成的HTML文件的名称})]
}

        开发环境Dev

module.exports = smart(webpackCommonConf, {  // 使用smart函数与webpackCommonConf进行合并,这样可以继承通用配置mode: 'development',  // 设置Webpack的模式为development,启用适合开发的优化,比如更快的构建速度和更友好的调试信息module: {rules: [// 对于所有以.png、.jpg、.jpeg和.gif结尾的图片文件,使用file-loader来处理。这会将图片文件复制到输出目录,并返回它们的路径{test: /\.(png|jpg|jpeg|gif)$/,use: 'file-loader'}]},plugins: [// 使用DefinePlugin来定义全局常量ENV,值为'development',便于在代码中根据环境做不同的处理new webpack.DefinePlugin({// window.ENV = 'development'       //定义环境ENV: JSON.stringify('development')})],devServer: {                //启动本地服务,需安装webpack-dev-serveport: 8080,  // 配置devServer,指定本地开发服务器的端口为8080progress: true,  // 显示打包的进度条contentBase: distPath,  // 根目录open: true,  // 自动打开浏览器compress: true,  // 启动gzip压缩// 设置代理proxy: {      //解决本地和服务端请求的跨域问题// 将本地/api/xxx代理到localhost:3000/api/xxx'/api': 'http://localhost:3000',// 将本地/api2/xxx代理到localhost:3000/xxx'/api2': {target: 'http://localhost:3000',pathRewrite: {'/api2': ''}}}}
})

        插件DefinePlugin允许你定义全局常量,这些常量会在编译时被替换。这样可以在代码中使用这些常量,而不需要在运行时进行判断。

        生产环境Pro

module.exports = smart(webpackCommonConf, {mode: 'production',output: {filename: 'bundle.[contenthash:8].js',  // 打包代码时,加上hash戳path: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件url的前缀(如cdn域名),这里暂时用不到},module: {rules: [// 图片-考虑 base64 编码的情况{test: /\.(png|jpg|jpeg|gif)$/,use: {loader: 'url-loader',options: {// 小于 5kb 的图片用 base64 格式产出// 否则,依然延用 file-loader 的形式,产出 url 格式limit: 5 * 1024,// 打包到 img 目录下outputPath: '/img1/',// 设置图片的 cdn 地址(也可以统一在外面的output中设置,那将作用于所有静态资源)// publicPath: 'http://cdn.abc.com'}}},]},plugins: [new CleanWebpackPlugin(), // 会默认清空output.path文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')})]
})

        dev-server

devServer: {       // dev 环境port: 8080,progress: true,  // 显示打包的进度条contentBase: distPath,  // 根目录open: true,  // 自动打开浏览器compress: true,  // 启动 gzip 压缩// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx'/api': 'http://localhost:3000',// 将本地 /api2/xxx 代理到 localhost:3000/xxx'/api2': {target: 'http://localhost:3000',pathRewrite: {'/api2': ''}}}
}
2.2.1 解析ES6 babel-loader
rules: [         // 使用babel解析conmmon.js中处理{test: /\.js$/,           //验证规则,处理.js结尾的文件loader: ['babel-loader'],include: srcPath,           //处理的文件目录exclude: /node_modules/    //排除此文件夹下的文件},
]

注:配置babel-loader需要配置babellrc文件;

{"presets": ["@babel/preset-env"],    //preset-env中已经包含ES6、ES7、ES8的语法"plugins": []
}

        Babel是一个JavaScript编译器,主要用于将ECMAScript 2015+(ES6+)代码转换为向后兼容的 JavaScript版本,以便在旧版浏览器或环境中运行Babel 的工作原理可以概括为以下几个步骤:

  1. 解析:将现代 JavaScript 源代码解析为抽象语法树(AST)。
  2. 转换:使用插件对 AST 进行转换,处理不同的 JavaScript 特性(如箭头函数、类等),将其转化为兼容的旧语法。
  3. 生成:将转换后的 AST 转换回 JavaScript 代码。
  4. 配置:通过配置文件(如 .babelrc)定制 Babel 的行为,选择使用的插件和预设。
  5. 预设:使用预设(如 @babel/preset-env)自动选择需要的插件,以支持特定的 JavaScript 版本。
  6. 集成:通常与构建工具(如 Webpack)结合使用,在构建过程中自动处理 JavaScript 文件。
2.2.2 解析样式的loaders
rules: [{test: /\.css$/,// loader 的执行顺序是:从后往前loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss},{test: /\.less$/,// 增加 'less-loader' ,注意顺序loader: ['style-loader', 'css-loader', 'less-loader']}
]

注: Loader的解析顺序是从右往左的

        postcss-loader处理CSS会抚平浏览器兼容性的问题(需要配置postcss.config.js文件),允许开发者使用 autoprefixer、cssnano 等工具来优化和转换 CSS;

module.exports = {plugins: [require('autoprefixer')]    //autoprefixer是一个增加前缀的插件
}

        css-loader是将文件解析为css文件,将 CSS 文件内容作为模块导入到 JavaScript 中。它支持 @import和url() 语句,能够处理 CSS 依赖;

        style-loader将CSS作为 <style> 标签插入到DOM中。它通常与css-loader一起使用,可以在运行时动态加载 CSS;

        sass-loader将Sass文件(.scss 或 .sass)编译成CSS。需要 node-sass 或 dart-sass 作为依赖。

        less-loader将Less文件编译成CSS。需要安装less作为依赖

        stylus-loader将Stylus文件编译成CSS,支持Stylus的各种特性

        less-loader和scss-loader是一样的,将less语法解析为css语法,再解析成css文件,再style插入HTML中;;上述配置在开发环境没有问题,在生产环境需要处理下;

2.2.3 解析图片文件url-loader

        在开发环境,是利用file-loader直接引入url;但是对生产环境不太友好(可能会导致过多的HTTP请求);

rules: [// 直接引入图片 url{test: /\.(png|jpg|jpeg|gif)$/,use: 'file-loader'}
]

        生产环境使用url-loader,会限制小于5KB的图片通过base64输出;

rules: [// 图片 - 考虑 base64 编码的情况{test: /\.(png|jpg|jpeg|gif)$/,use: {loader: 'url-loader',options: {// 此处,小于5kb的图片用base64格式产出;否则,依然延用file-loader的形式,产出url格式// **生成图片临界值默认为 8KB **limit: 5 * 1024,// 大的图片文件打包到 img 目录下outputPath: '/img1/',// 设置图片的 cdn 地址(也可以统一在外面的 output 中设置,那将作用于所有静态资源)// publicPath: 'http://cdn.abc.com'}}},
]

        注:通过增加hash戳,当重新打包(文件有变化),还文件的hash戳改变,会请求新的文件;文件没有变化会直接命中缓存,更快启动页面。

output: {filename: 'bundle.[contenthash:8].js',  // 打包代码时,加上hash戳path: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件url的前缀(如cdn域名),这里暂时用不到
},

        Webpack5 内置资源模块(字体,图片等)打包,无需额外 loader,无需下载包。Webpack添加如下配置 将拥有打包图片功能 ,规则的作用是匹配以 .png、.jpg、.jpeg、.gif 结尾的文件,并使用 asset 模块类型进行处理。

        asset 模块类型是 webpack 5 引入的一种处理资源的方式,它会根据文件大小,自动决定是将文件转换为 Data URL (DataURL),还是将其复制到输出目录。[3]

  1. 占位符 【hash】对模块内容做算法计算,得到映射的数字字母组合的字符串
  2. 占位符 【ext】使用当前模块原本的占位符,例如:.png / .jpg 等字符串
  3. 占位符 【query】保留引入文件时代码中查询参数(只有 URL 下生效)
module: {rules: [...{test: /\.(png|jpg|jpeg|gif)$/i, // 匹配所有以.png、.jpg、.jpeg和.gif 结尾的文件,`i` 表示不区分大小写type: 'asset', // 指定资源类型为 asset,这会自动处理图像文件generator: { // 配置生成文件的方式filename: 'assets/[hash][ext][query]' // 指定输出文件的路径和名称}}],
},

2.2.4 插件HtmlWebpackPlugin

        这里遇到一个webpack插件HtmlWebpackPlugin,其作用主要是自动化地创建 HTML 文件,并将 Webpack 打包后的 JavaScript 和 CSS 文件注入到这个 HTML 文件中。安装

npm install --save-dev html-webpack-plugin

        主要功能如下:

  • 自动生成 HTML 文件:HtmlWebpackPlugin 可以自动创建一个 HTML 文件,不必手动创建一个 HTML 文件来引用打包后的JavaScript和CSS文件
  • 注入资源:插件会自动将Webpack打包的输出文件(如 JavaScript bundle)作为<script>标签注入到 HTML文件中。若使用了CSS提取插件(如 MiniCssExtractPlugin),生成的CSS文件也会被注入;
  • 模板支持:你可以指定一个 HTML 模板文件,HtmlWebpackPlugin 会使用这个模板来生成最终的 HTML 文件。模板可以是任意格式,如 EJS、HBS、Jade 等,但需要相应的 loader 来处理;
  • 缓存管理:通过为注入的资源文件添加版本哈希,防止浏览器缓存旧版本的文件,确保用户总是加载到最新的资源;
  • 配置灵活性:插件提供了多种配置选项,如设置生成的 HTML 文件的标题、指定 favicon、定义 meta 标签、控制资源文件的注入位置等 。
  • 支持多入口:当 webpack 配置中有多个入口点,HtmlWebpackPlugin 可以为每个入口点生成一个对应的 HTML 文件,也可以配置插件来生成多个 HTML 文件 ;
  • 压缩 HTML:HtmlWebpackPlugin 还支持压缩生成的 HTML 文件,移除多余的空格和注释,减小文件体积
// 其他配置...
plugins: [new HtmlWebpackPlugin({title: 'My App', // 页面标题template: 'src/index.html', // 指定模板文件filename: 'index.html', // 输出的 HTML 文件名minify: { // 压缩选项removeComments: true,collapseWhitespace: true,},}),
],

        loader和plugin的区别

  • 作用:loader是文件加载器,能够加载资源文件,并对进行一些处理,诸如编译、压缩等,最终打包到指定的文件中;plugin用于在 Webpack 构建过程中扩展其功能,可以影响 Webpack 的构建流程,例如打包优化、资源管理、环境变量注入等,常用于解决 loader无法实现的其他事。
  • 应用时机:在运行时机上,loader 运行在打包文件之前;plugin则是在整个编译周期都起作用。 loader处理单个文件,plugin则用于全局的构建流程。
  • 使用方式:在配置上,loader在module.rules中配置,作为模块的解析规则,类型为数组。每一项都是一个 Object,内部包含了 test(类型文件)、loader、options (参数)等属性;plugin在 plugins中单独配置,类型为数组,每一项是一个 plugin 的实例,参数都通过构造函数传入。

3 webpack高级配置

3.1 配置多入口

  1. 例如,Common.js文件中入口两个
entry: {index: path.join(srcPath, 'index.js'),other: path.join(srcPath, 'other.js')
},
  1. Common.js中的plugins中生成HTML文件时,配置多个入口:
plugins: [// 多入口 - 生成 index.htmlnew HtmlWebpackPlugin({  //每个入口都要new HtmlWebpackPlugin的插件实例template: path.join(srcPath, 'index.html'),filename: 'index.html',       //  可自定义名称// chunks 表示该页面要引用哪些chunk(即上面entry的index和other),默认全部引用chunks: ['index']  // 只引用 index.js}),// 多入口 - 生成other.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, 'other.html'),filename: 'other.html',chunks: ['other']  // 只引用 other.js})
]
  1. Prod.js中output的filename增加name作为多入口entry的key;
output: {// filename: 'bundle.[contenthash:8].js',  // 打包代码时,加上hash戳filename: '[name].[contenthash:8].js', // name即多入口时entry的keypath: distPath,// publicPath: 'http://cdn.abc.com'  // 修改所有静态文件url的前缀(如cdn域名),这里暂时用不到
},

        注:Prod.js中 引入CleanWebpackPlugin插件会在每次打包时,默认清空output.path(即dist目录)文件;

plugins: [new CleanWebpackPlugin(), // 会默认清空output.path文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')})
]

3.2 MiniCssExtractPlugin.loader抽离和CssMinimizerPlugin压缩css

        MiniCssExtractPlugin.loader的主要作用是将CSS提取到单独的文件中,而不是将其嵌入到JavaScript 中,这在生产环境中css 文件可以被浏览器缓存,减少 js 文件体积非常有用。主要优点如下;

  • 性能优化: 提升页面加载性能,因为浏览器可以并行下载CSS文件,而不是等到JavaScript执行完成后才加载CSS。 减少JavaScript bundle 的大小( 代码不再内联在 JavaScript 文件中), 代码不再内联在 JavaScript 文件中。减少页面渲染的时间,提高用户体验。
  • 缓存利用: 独立的CSS文件可以被浏览器缓存,当页面重新加载时,如果CSS没有变化,就不需要再次下载。 对于没有服务端渲染(SSR)的应用,独立的 CSS 文件可以确保样式在页面加载时就已经可用,避免了样式闪烁的问题。
  • 代码组织: 将CSS提取到单独的文件中,使得项目结构更加清晰,便于维护。 方便进行CSS源码映射(source maps)的生成,有助于开发调试。
  • 兼容性: 独立的CSS文件可以在不支持JavaScript或者JavaScript被禁用的情况下仍然正常加载样式。

1. 抽离css和less,使用MiniCSSExtractPlugin.loader抽离成单独文件

module: {rules: [// 抽离 css{test: /\.css$/,loader: [MiniCssExtractPlugin.loader,// 注意这里不再用style-loader'css-loader','postcss-loader']},// 抽离 less --> css{test: /\.less$/,loader: [MiniCssExtractPlugin.loader,// 注意这里不再用style-loader'css-loader','less-loader','postcss-loader']}]
},

2. 在plugins文件中,增加了抽离文件插件MiniCssExtractPlugin的配置,并设置了抽离文件名称;

plugins: [// 抽离 css 文件new MiniCssExtractPlugin({filename: 'css/main.[contenthash:8].css',chunkFilename: '[id].[contenthash:8].css' // 定义动态加载的 CSS 文件的名称格式。})
],

3. 压缩CSS文件,此处webpack5的压缩要使用,css-minimizer-webpack-plugin

optimization: {// 压缩css使用CssMinimizerPlugin; TerserJSPlugin用于压缩和优化JavaScript代码,减少文件体积,提升加载速度minimizer: [new TerserJSPlugin({}), // JavaScript压缩,可设置压缩选项terserOptions: {compress: true,mangle: true,}new CssMinimizerPlugin({}), // CSS压缩,可设置压缩选项minimizerOptions: {preset: 'default',},new OptimizeCSSAssetsPlugin({})],
}

注:在 Webpack 5 中,TerserJSPlugin是默认启用,上述几个插件是需要安装后。使用时引入:

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

3.3 抽离公共代码

        在生产环境第三方模块,希望其单独打包;公共引用的部分,打包时也希望被拆分。

以下是prod.js中增加的配置,开发环境没有必要这么处理(代码还要修改调试,这么优化会增加打包时间)

optimization: {// 压缩 cssminimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],// **分割代码块(新增)**splitChunks: {chunks: 'all',/***  initial入口chunk,对于异步导入的文件不处理async异步chunk,只对异步导入的文件处理all全部chunk*/// 缓存分组cacheGroups: {// 1. 第三方模块vendor: {name: 'vendor', // chunk 名称priority: 1, // 权限更高,优先抽离,重要!**值越大,优先级越高**test: /node_modules/,  //模块路径在不在node_modulesminSize: 3kb,  // 大小限制,**当文件过小时,单独拆封文件意义不大**;minChunks: 1  // 最少复用过几次,**会被拆分**},// 2. 公共的模块common: {name: 'common', // chunk 名称priority: 0, // 优先级minSize: 0,  // 公共模块的大小限制minChunks: 2  // 公共模块最少复用过几次,**复用达两次的才会拆分**}}}
}

        Common.js中的配置做出相应改动

plugins: [// 多入口 - 生成 index.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, 'index.html'),filename: 'index.html',// chunks 表示该页面要引用哪些chunk(即上面的index和other),默认全部引用chunks: ['index', 'vendor', 'common']  // chunk引用,要考虑代码分割(**新增当前入口下,需要的chunk)**}),// 多入口 - 生成 other.htmlnew HtmlWebpackPlugin({template: path.join(srcPath, 'other.html'),filename: 'other.html',chunks: ['other', 'common']  // 考虑代码分割**(新增当前入口下,需要的chunk)**})
]

3.4 懒加载

        不需要增加配置,webpack默认支持这种语法;

        import本身是懒加载模式,但是使用时有限制必须放在第一行 ,import()可以在任意位置使用。例如,

import('./dynamic-data.js');
import(/* webpackChunkName: "header" */'./header.js').then(res => {console.log(res);
})

相当于定义一个chunk返回一个promise。异步模块是按需加载

3.5 处理react 和 vue

        处理JSX,需要babelIrc中preset配置如下:

"presets": ["@babel/preset-react"],

        Vue则使用vue-loader;

npm  install  vue-loader;

        并在common.js的module.rules中增加配置:

{test:/\.vue$/,loader:['vue-loader'],include:srcPath
},

module chunk bundle的区别

  • module(模块) – 各个源码文件,webpack中任何单独文件皆模块;
  • chunk(代码块) – 多模块合并成的(通过入口文件的分析,引用或者依赖联系起来的),如entry import() splitChunk;类似于还在内存中未输出
  • bundle(捆绑)– 最终输出文件,一个或多个代码块的物理文件。

3.6 优化构建速度(可用于生产)

        优化babel-loader

        利用cacheDirectory开启缓存;当ES6代码没改动时,就不会重新编译

{test: /\.js$/,// ?cacheDirectory是一个查询参数,表示在转换过程中启用缓存,提升编译速度。缓存会将转换结果存储在文件系统中,下次处理相同文件时可以直接使用缓存。loader: ['babel-loader?cacheDirectory'],include: srcPath,// exclude: /node_modules/
},

        include为包含范围,include和exclude两者二选一

        ignorePlugin

        webpack内置插件;这个插件的作用是:指定忽略第三方包指定目录,让这些指定目录不要被打包进去 [4]

plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')}),// **忽略moment下的/locale目录,忽略默认引用的所有语言包(新增启用IgnorePlugin)**new webpack.IgnorePlugin(/\.\/locale/, /moment/),
],

        noParse

        这是module中的一个属性,作用:指定不去解析属性值代表的库的依赖;可避免重复打包;

module: {// 读完整的‘react.min.js’文件就没有采用模块化的必要// 忽略‘react.min.js’文件的递归解析处理noParse: [/react\.min.js$/],
}

        区别IgnorePlugin和noParse

        IgnorePlugin直接不引入,代码中没有;减少最终包的大小

        noParse引入,但不打包(不进行babel这类编译构建过程);提高构建速度

        happyPack(已经弃用)

        JS单线程,开启多进程打包;提高构建速度(特别是多核CPU);

        Prod.js(也可以写在Common.js,但happyPack会改变babel的配置)中引入happyPack:

const HappyPack = require('happypack')

        改变prod.js下module.rules的配置:

rules: [// js{test: /\.js$/,// 把对.js文件的处理转交给id为babel的HappyPack实例use: ['happypack/loader?id=babel'],include: srcPath,// exclude: /node_modules/},
]

        Plugin的配置

plugins: [new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')}),// happyPack 开启多进程打包new HappyPack({// 用唯一的标识符id来代表当前的HappyPack是用来处理一类特定的文件id: 'babel',// 如何处理 .js 文件,用法和 Loader 配置中一样loaders: ['babel-loader?cacheDirectory'],threads: 4, // 指定工作线程数量}),// 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
],

        ParallelUglifyPlugin OR TerserWebpackPlugin多进程压缩JS

        ParallelUglifyPlugin是一个用于 Webpack 的插件,可以通过多进程压缩JavaScript文件,从而提高构建速度。尽管这个插件在Webpack 4中非常流行,但在Webpack 5中,通常推荐使用内置的 TerserWebpackPlugin,它已经实现了类似的多线程压缩功能

        Prod.js引用:

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

        plugins中配置:

plugins: [new CleanWebpackPlugin(), // 会默认清空output.path文件夹new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('production')}),// **使用 ParallelUglifyPlugin 并行压缩输出的JS代码*****(新增)***new ParallelUglifyPlugin({// 传递给 UglifyJS 的参数// (还是使用 UglifyJS 压缩,只不过帮助开启了多进程)uglifyJS: {output: {beautify: false, // 最紧凑的输出comments: false, // 删除所有的注释},compress: {// 删除所有的 `console` 语句,可以兼容ie浏览器drop_console: true,// 内嵌定义了但是只用到一次的变量collapse_vars: true,// 提取出出现多次但是没有定义成变量去引用的静态值reduce_vars: true,}},// 指定进程数量workers: 2, // 根据你的 CPU 核心数调整})
],

        关于开启多进程:项目较大,打包较慢,开启多进程能提高速度;项目较小,打包很快,开启多进程会降低速度(进程开销);建议按需使用

        使用TerserWebpackPlugin(推荐)

        如果你使用的是 Webpack 5,推荐使用内置的 TerserWebpackPlugin,它支持多线程压缩。

安装插件(如果还没有):

npm install terser-webpack-plugin --save-dev  

        配置 Webpack:

const TerserWebpackPlugin = require('terser-webpack-plugin');module.exports = {optimization: {minimize: true,minimizer: [new TerserWebpackPlugin({parallel: true, // 开启多进程terserOptions: {compress: {drop_console: true,},},}),],},
};

3.7 优化构建速度(不可用于生产)

3.7.1 自动刷新

        一般使用不到,配置devServe就默认开启了

3.7.2 热更新

        Dev.js中引用,但不需要安装:

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

        dev.js中的entry配置修改:

entry: {// index: path.join(srcPath, 'index.js'),index: [    //index参数配置为数组(新增)'webpack-dev-server/client?http://localhost:8080/','webpack/hot/dev-server',path.join(srcPath, 'index.js')],other: path.join(srcPath, 'other.js')
},plugins: [new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('development')}),new HotModuleReplacementPlugin()   //(新增)
],devServer: {port: 8080,progress: true,  // 显示打包的进度条contentBase: distPath,  // 根目录open: true,  // 自动打开浏览器compress: true,  // 启动gzip压缩hot: true,   //(新增)// 设置代理proxy: {// 将本地 /api/xxx 代理到 localhost:3000/api/xxx'/api': 'http://localhost:3000',// 将本地 /api2/xxx 代理到 localhost:3000/xxx'/api2': {target: 'http://localhost:3000',pathRewrite: {'/api2': ''}}}
},

        热更新的成本,需要自己在开发环境中,注册监听的模块和范围;范围之外还是刷新的方式。

// // module增加,开启热更新之后的代码逻辑
// if (module.hot) {
//     module.hot.accept(['./math'], () => {
//         const sumRes = sum(10, 30)
//         console.log('sumRes in hot', sumRes)
//     })
// }

        热更新与自动刷新的区别

        自动刷新:整个网页全部刷新,速度较慢,且状态会丢失;

        热更新:新代码会生效,网页不刷新,状态不丢失

3.7.3 DLLPlugin动态链接库插件(webpack5已经弃用,方推荐使用Module Federation作为替代方案

        一些不常变化的依赖项打包成动态链接库(DLL),从而减少每次构建时需要重新编译的代码量如vue react。DLLPlugin 和 DLLReferencePlugin 配置将某些模块(如库或框架)打包到一个 DLL 文件中。

DLLPlugin-先打包出dll文件;

DLLReferencePlugin-再使用dll文件;

使用,配置webpack.dll.js文件,使用环境为developmen;

const path = require('path')
const DllPlugin = require('webpack/lib/DllPlugin')  //引用内置插件
const { srcPath, distPath } = require('./paths')module.exports = {mode: 'development',// JS 执行入口文件entry: {// 把 React 相关模块的放到一个单独的动态链接库react: ['react', 'react-dom']},output: {// 输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称,// 也就是 entry 中配置的 react 和 polyfillfilename: '[name].dll.js',// 输出的文件都放到 dist 目录下path: distPath,// 存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react// 之所以在前面加上 _dll_ 是为了防止全局变量冲突library: '_dll_[name]',},plugins: [// 接入 DllPluginnew DllPlugin({// 动态链接库的全局变量名称,需要和 output.library 中保持一致// 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值// 例如 react.manifest.json 中就有 "name": "_dll_react"name: '_dll_[name]',// 描述动态链接库的 manifest.json 文件输出时的文件名称path: path.join(distPath, '[name].manifest.json'),}),],
}

        使用 npm run dll运行输出dll文件;

        引用dll文件:首先,index.html文件引用

<script src="./react.dll.js"></script>

        Dev.js中module.plugins配置:

        1.引入插件

// 第一,引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

        2.plugins配置

plugins: [new webpack.DefinePlugin({// window.ENV = 'production'ENV: JSON.stringify('development')}),// 第三,告诉 Webpack 使用了哪些动态链接库(新增)new DllReferencePlugin({// 描述 react 动态链接库的文件内容manifest: require(path.join(distPath, 'react.manifest.json')),}),
],

        3.babel-loader中的配置要忽略node-modules(已经打包过了)

rules: [{test: /\.js$/,use: ['babel-loader'],include: srcPath,exclude: /node_modules/ // 第二,不要再转换 node_modules 的代码},
]
3.7.4 Module Federation(没用过c)

        替代方案Module Federation是Webpack 5中的一个强大特性,允许不同的Webpack构建共享和动态加载模块,基本概念:

        Host(主应用):负责加载远程模块的应用。

        Remote(远程模块):提供可以被主应用加载的模块。

[1] https://febook.hzfe.org/awesome-interview/book1/engineer-webpack-workflow

[2] https://febook.hzfe.org/awesome-interview/book3/engineer-webpack-loader#32-babel-loader-分析

[3] 前端构建工具 webpack 笔记-腾讯云开发者社区-腾讯云

[4] 18、webpack优化(3)——IgnorePlugin-CSDN博客

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/518.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【flutter列表播放器】

视频播放器类 import package:jade/configs/PathConfig.dart; import package:jade/utils/Utils.dart; import package:model/user_share/reward_pool_model.dart; import package:pages/user_share/view/user_share_article_detail_page.dart; import package:util/navigato…

Ubuntu Linux

起源与背景 Ubuntu起源于南非&#xff0c;其名称“Ubuntu”来源于非洲南部祖鲁语或豪萨语&#xff0c;意为“人性”、“我的存在是因为大家的存在”&#xff0c;这体现了非洲传统的一种价值观。Ubuntu由南非计算机科学家马克沙特尔沃斯&#xff08;Mark Shuttleworth&#xff…

ctfshow web入门文件上传总结

1.web151 前端验证 前端验证&#xff0c;修改html代码&#xff0c;上传还有一句话木马的php文件,之后用蚁剑连接即可找到flag <?php eval($_POST[1])?>2.web152 后端验证&#xff0c;修改mime类型(content-type) burp抓包&#xff0c;修改content-type为image/png …

18.04Ubuntu网络一直connecting的问题

有段时间没登VMware的Ubuntu了&#xff0c;就知道这个Ubuntu一登必有问题。 如果你的网络一直connecting 设置成桥接模式就可以了&#xff01;

用Python设置、更新和获取Excel单元格的值

Excel工作簿作为一款广泛使用的数据管理工具&#xff0c;与Python相结合&#xff0c;可以使得自动化处理大量数据成为可能。通过Python来设置、更新以及读取Excel单元格的值&#xff0c;不仅可以极大地提高工作效率&#xff0c;减少重复劳动&#xff0c;还能增强数据处理流程的…

从零开始的 vue项目部署到服务器详细步骤(vue项目build打包+nginx部署+配置ssl证书)

从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09; 文章目录 从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09;一、前言二、vue项目部署前配置1、vite.config.js 增加…

HarmonyOS 私仓搭建

1. HarmonyOS 私仓搭建 私仓搭建文档&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-ohpm-repo-quickstart-V5   发布共享包[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-har-publish-0000001597973129-V5]…

三项智能网联汽车强制性国家标准正式发布(附图解)

近日&#xff0c;工业和信息化部组织制定的GB 44495—2024《汽车整车信息安全技术要求》、GB 44496—2024《汽车软件升级通用技术要求》和GB 44497—2024《智能网联汽车 自动驾驶数据记录系统》三项强制性国家标准由国家市场监督管理总局、国家标准化管理委员会批准发布&#x…

达梦检查工具dmdbchk的性能

摘要&#xff1a; 本文介绍了dmdbchk的基础使用&#xff0c;例如检查信号量&#xff0c;其性能大约是10GB/分钟&#xff0c;新版本的会更快。 当数据库出问题时&#xff0c;可能会考虑用dmdbchk工具检查数据文件和库内部是否出现异常。对于450G的库会耗时多久&#xff1f; 答&…

transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

把scene.add(transformControls);改为scene.add(transformControls.getHelper());

思科--交换网络综合实验

前言 之前一直在学华为ENSP的命令&#xff0c;最近来了个实验&#xff08;被坑了&#xff09;&#xff0c;要求是用思科完成。没法子&#xff0c;就弄呗 拓扑图 实验目标 首先配置以太通道&#xff08;逻辑上的&#xff09;实现链路冗余和负载共享 在交换机接口配置trunk&#…

YOLOv11模型架构以及使用命令介绍

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发…

使用 PyCharm 构建 FastAPI 项目:零基础入门 Web API 开发

使用 PyCharm 构建 FastAPI 项目&#xff1a;零基础入门 Web API 开发 本文提供了一份完整的 FastAPI 入门指南&#xff0c;涵盖从环境搭建、依赖安装到创建并运行一个简单的 FastAPI 应用的各个步骤。通过 FastAPI 和 Uvicorn&#xff0c;开发者可以快速构建现代化的 Web API…

正向解析和反向解析

正向解析 服务端&#xff1a; [rootlocalhost rhel]# vim /etc/named.conf [rootlocalhost named]# vim /var/named/named.openlab.com 客户端&#xff1a; [rootlocalhost rhel]# nslookup 反向解析 服务端&#xff1a; [rootlocalhost rhel]# vim /etc/named.conf [ro…

openGauss数据库-头歌实验1-3 创建和管理模式

一、创建和使用模式 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;基于 openGauss 学习创建模式的相关知识。 &#xff08;二&#xff09;相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.openGauss 的常用操作&#xff0c;2.SQL 创建模式相关语…

鸿蒙进阶篇-Scroll、Tabs、Badge

“在科技的浪潮中&#xff0c;鸿蒙操作系统宛如一颗璀璨的新星&#xff0c;引领着创新的方向。作为鸿蒙开天组&#xff0c;今天我们将一同踏上鸿蒙基础的探索之旅&#xff0c;为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

多厂商的实现不同vlan间通信

Cisco单臂路由 Cisco路由器配置 -交换机配置 -pc配置 华三的单臂路由 -路由器配置 -华三的接口默认是打开的 -pc配置及ping的结果 -注意不要忘记配置默认网关 Cisco-SVI -交换机的配置 -创建vlan -> 设置物理接口对应的Acess或Trunk -> 进入vlan接口&#xff0c;打开接…

Golang--函数、包、defer、系统函数、内置函数

1、何为函数 函数作用&#xff1a;提高代码的复用型&#xff0c;减少代码的冗余&#xff0c;提高代码的维护性 函数定义&#xff1a;为完成某一功能的程序指令(语句)的集合,称为函数。 语法&#xff1a; func 函数名(形参列表)(返回值类型列表){ //执行语句 //…… return …

2024/11/3周报

文章目录 摘要AbstractA2/O反应原理与详细流程一、反应原理二、工艺流程三、反应控制与优化模拟数据 文献阅读标题研究背景与重要性模型构建与方法论模型各部分的功能 数据收集与预处理模型训练与实验实验结果与分析模型的创新与贡献实际应用价值与未来发展方向结论 摘要 本周…

一文搞定分治算法

分治 基础入门 搜索策略 基于分治实现二分查找 构建二叉树问题 汉诺塔问题 相关题解&#xff1a; leetcode226.翻转二叉树 法一&#xff1a;递归 leetcode101.对称二叉树 法一&#xff1a;递归 法二&#xff1a;迭代 leetcode50. Pow(x, n) 法一&#xff1a;快速幂…