03_Webpack模块打包工具

03_Webpack模块打包工具

目录

知识点自测

  1. 以下哪个选项是 ECMAScript 默认导出和导入的语法？

    A：export 和 require

    B：module.exports = {} 和 import 变量名

    C：export default 和 import 变量名

    D：export 和 import { 同名变量名 }

    <details><summary>答案</summary><ul><li>C选项正确</li></ul></details>

  1. 对以下 less 样式代码描述正确的是？

    .title {span {color: red;}
}

    A：查找 class 名字叫 title 元素范围内，所有 span 标签

    B：查找 class 名字叫 title 和 span 标签

    <details><summary>答案</summary><ul><li>A选项正确</li></ul></details>

  1. 以下代码运行结果是多少？

    const arr = [1, 2, 3, 4].map(val => val * 2)
console.log(arr)

    A：[undefined, undefined, undefined, undefined]

    B：[2, 4, 6, 8]

    <details><summary>答案</summary><ul><li>B选项正确</li></ul></details>

  1. 以下针对 axios 函数使用时的配置项描述正确的选项？

    axios({// 这里
})

    A：url：请求的方法，method：传递参数

    B：data：传递查询参数，params：传递请求体参数

    C：url：请求的网址，method：请求的方法

    D：data：传递请求体参数，params：传递请求体参数

    <details><summary>答案</summary><ul><li>C选项正确</li></ul></details>

01.Webpack 简介以及体验

目标

了解 Webpack 的概念和作用，以及使用

讲解

  1. Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

  1. 静态模块：编写代码过程中的，html，css， js，图片等固定内容的文件

  2. 打包过程，注意：只有和入口有直接/间接引入关系的模块，才会被打包

  1. Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

    • 把 less/sass 转成 css 代码

    • 把 ES6+ 降级成 ES5 等

    • 支持多种模块文件类型，多种模块标准语法

  2. 为何不学 vite？

    现在很多项目还是基于 Webpack 来进行构建的，所以还是要掌握 Webpack 的使用

  3. 体验 Webpack 打包 2 个 JS 文件内容

  4. 需求：封装 utils 包，校验手机号和验证码长度，在 src/index.js 中使用，使用 Webpack 打包

  5. 步骤：

    1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

      npm init -y

    2. 新建 src 源代码文件夹（书写代码）包括 utils/check.js 封装用户名和密码长度函数，引入到 src/index.js 进行使用

      • src/utils/check.js

        // 封装校验手机号长度和校验验证码长度的函数
export const checkPhone = phone => phone.length === 11
export const checkCode = code => code.length === 6

      • src/index.js

        /*** 目标1：体验 webpack 打包过程*/
// 1.1 准备项目和源代码
import { checkPhone, checkCode } from '../utils/check.js'
console.log(checkPhone('13900002020'))
console.log(checkCode('123123123123'))
// 1.2 准备 webpack 打包的环境
// 1.3 运行自定义命令打包观察效果（npm run 自定义命令）

    3. 下载 webpack webpack-cli 到项目（版本独立）

      npm i webpack webpack-cli --save-dev

      注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

    4. 项目中运行工具命令，采用自定义命令的方式（局部命令）

      npm run build

      npm run 自定义命令名字

      注意：实际上在终端运行的是 build 右侧的具体命名

    5. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

  6. 需求最终流程图：

小结

  1. Webpack 有什么用?

    <details><summary>答案</summary><ul><li>压缩，转译，整合，打包我们的静态模块</li></ul></details>

  2. Webpack 怎么用？

    <details><summary>答案</summary><ul><li>初始化环境，编写代码，安装 Webpack 软件包，配置自定义命令，打包体验查看结果</li></ul></details>

  3. 如何运行 package.json 里的自定义命令？

    <details><summary>答案</summary><ul><li>npm run 自定义命令</li></ul></details>

  4. Webpack 默认入口和出口？

    <details><summary>答案</summary><ul><li>src/index.js 和 dist/main.js</li></ul></details>

02.Webpack 修改入口和出口

目标

了解 Webpack 配置文件使用，影响 Webpack 打包过程和结果

讲解

  1. Webpack 配置：影响 Webpack 打包过程

  2. 步骤：

    1. 项目根目录，新建 Webpack.config.js 配置文件

    2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

      const path = require('path')
​
module.exports = {entry: path.resolve(__dirname, 'src/login/index.js'),output: {path: path.resolve(__dirname, 'dist'),filename: './login/index.js'  }
}

    3. 重新打包观察

  3. 图解：

小结

  1. 如何影响 Webpack 打包过程?

    <details><summary>答案</summary><ul><li>查文档，新建配置文件和配置属性</li></ul></details>

03.案例-用户登录-长度判断

目标

体验前端项目代码，如何被 Webpack 打包和使用

讲解

  1. 需求：点击登录按钮，判断手机号和验证码长度是否符合要求

  2. 步骤：

    1. 新建 public/login.html 准备网页模板（方便查找标签和后期自动生成 html 文件做准备）

    2. 核心 JS 代码写在 src/login/index.js 文件

      /*** 目标3：用户登录-长度判断案例*  3.1 准备用户登录页面*  3.2 编写核心 JS 逻辑代码*  3.3 打包并手动复制网页到 dist 下，引入打包后的 js，运行*/
// 3.2 编写核心 JS 逻辑代码
document.querySelector('.btn').addEventListener('click', () => {const phone = document.querySelector('.login-form [name=mobile]').valueconst code = document.querySelector('.login-form [name=code]').value
​if (!checkPhone(phone)) {console.log('手机号长度必须是11位')return}
​if (!checkCode(code)) {console.log('验证码长度必须是6位')return}
​console.log('提交到服务器登录...')
})

  1. 运行自定义命令，让 Webpack 打包 JS 代码

  2. 手动复制 public/login.html 到 dist 下，手动引入打包后的 JS 代码文件，运行 dist/login.html 在浏览器查看效果

小结

  1. Webpack 打包后的前端代码是如何运行的?

    <details>
<summary>答案</summary>
<ul>
<li>手动引入到 html 文件中，再交给浏览器运行</li>
</ul>
</details>

04.Webpack 自动生成 html 文件

目标

让 Webpack 拥有自动生成 html 文件能力，并引入打包后的其他资源

讲解

  1. 插件 html-webpack-plugin 作用：在 Webpack 打包时生成 html 文件，并引入其他打包后的资源

  2. 步骤：

    1. 下载 html-webpack-plugin 本地软件包到项目中

      npm i html-webpack-plugin --save-dev

    2. 配置 webpack.config.js 让 Webpack 拥有插件功能

      // ...
const HtmlWebpackPlugin = require('html-webpack-plugin')
​
module.exports = {// ...plugins: [new HtmlWebpackPlugin({template: './public/login.html', // 模板文件filename: './login/index.html' // 输出文件})]
}

    3. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

  3. 运行打包命令，观察打包后 dist 文件夹下内容并运行查看效果

小结

  1. html-webpack-plugin 插件怎么用?

    <details>
<summary>答案</summary> 
<ul>
<li>找到插件文档，下载到项目中，配置到 Webpack 的配置文件中即可使用</li>
</ul>
</details>

05.Webpack-打包 css 代码

目标

让 Webpack 能够打包 css 代码

讲解

  1. 注意：Webpack 默认只识别 JS 和 JSON 文件内容，所以想要让 Webpack 识别更多不同内容，需要使用加载器

  2. 介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

    • 加载器 css-loader：解析 css 代码

    • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

  3. 步骤：

    1. 准备 css 文件引入到 src/login/index.js 中（压缩转译处理等）

      /*** 目标5：打包 css 代码*  5.1 准备 css 代码，并引入到 js 中*  5.2 下载 css-loader 和 style-loader 本地软件包*  5.3 配置 webpack.config.js 让 Webpack 拥有该加载器功能*  5.4 打包后观察效果*/
// 5.1 准备 css 代码，并引入到 js 中
import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

      注意：这里只是引入代码内容让 Webpack 处理，不需定义变量接收在 JS 代码中继续使用，所以没有定义变量接收

    2. 下载 css-loader 和 style-loader 本地软件包

      npm i css-loader style-loader --save-dev

    3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

      // ...
​
module.exports = {// ...module: { // 加载器rules: [ // 规则列表{test: /\.css$/i, // 匹配 .css 结尾的文件use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM}]}
};

    4. 打包后运行 dist/login/index.html 观察效果，看看准备好的样式是否作用在网页上

小结

  1. 加载器的作用是什么?

    <details> <summary>答案</summary> <ul><li>让 Webpack 识别更多的代码内容类型</li></ul> </details>

06.优化-提取 css 代码

目标

让 Webpack 能够提取 css 代码到独立的 css 文件中

讲解

  1. 需求：让 webpack 把 css 代码内容字符串单独提取到 dist 下的 css 文件中

  2. 需要：mini-css-extract-plugin 插件来实现

  3. 步骤：

    1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

      npm i --save-dev mini-css-extract-plugin

    2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

      // ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
​
module.exports = {// ...module: {rules: [{test: /\.css$/i,// use: ['style-loader', 'css-loader']use: [MiniCssExtractPlugin.loader, "css-loader"],},],},plugins: [// ...new MiniCssExtractPlugin()]
};

  1. 打包后观察效果

  2. 注意：不能和 style-loader 一起使用

  3. 好处：css 文件可以被浏览器缓存，减少 JS 文件体积，让浏览器并行下载 css 和 js 文件

小结

07.优化压缩过程

目标

把单独提取的 css 文件内代码压缩

讲解

  1. 需求：把提出的 css 文件内样式代码压缩

  2. 需要：css-minimizer-webpack-plugin 插件来实现

  3. 步骤：

    1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

      npm i css-minimizer-webpack-plugin --save-dev

    2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

      // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
​
module.exports = {// ...// 优化optimization: {// 最小化minimizer: [// 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）`...`,new CssMinimizerPlugin(),],}
};

    3. 打包后观察 css 文件内自己代码是否被压缩了

小结

08.Webpack-打包 less 代码

目标

让 Webpack 拥有打包 less 代码功能

讲解

  1. 加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

  2. 步骤：

    1. 新建 login/index.less 文件，设置背景图样式（图片在配套资料-素材文件夹中）

      html {body {background: url('./assets/login-bg.png') no-repeat center/cover;}
}

  1. less 样式引入到 src/login/index.js 中

    /*** 目标8：打包 less 代码*  8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中*  8.2 下载 less 和 less-loader 本地软件包*  8.3 配置 webpack.config.js 让 Webpack 拥有功能*  8.4 打包后观察效果*/
// 8.1 新建 less 代码（设置背景图）并引入到 src/login/index.js 中
import './index.less'

  2. 下载 less 和 less-loader 本地软件包

    npm i less less-loader --save-dev

  3. 配置 webpack.config.js 让 Webpack 拥有功能

    // ...
​
module.exports = {// ...module: {rules: [// ...{test: /\.less$/i,use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]}]}
}

  4. 打包后运行 观察效果

小结

  1. Webpack 支持 less 代码打包需要哪 2 个软件包?

    <details> <summary>答案</summary> <ul><li>需要 less less-loader 这 2 个软件包</li></ul> </details>

09.Webpack-打包图片

目标

让 Webpack 支持图片等资源打包

讲解

  1. 资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

  2. 步骤：

    1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

      占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

      占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

      占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

  1. 注意：判断临界值默认为 8KB

    大于 8KB 文件：发送一个单独的文件并导出 URL 地址

    小于 8KB 文件：导出一个 data URI（base64字符串）

  2. 在 src/login/index.js 中给 img 标签添加 logo 图片

    /*** 目标9：打包资源模块（图片处理）*  9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js*  9.2 打包后观察效果和区别*/
// 9.1 创建 img 标签并动态添加到页面，配置 webpack.config.js
// 注意：js 中引入本地图片资源要用 import 方式（如果是网络图片http地址，字符串可以直接写）
import imgObj from './assets/logo.png'
const theImg = document.createElement('img')
theImg.src = imgObj
document.querySelector('.login-wrap').appendChild(theImg)

  3. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

    // ...
​
module.exports = {// ...module: {rules: [// ...{test: /\.(png|jpg|jpeg|gif)$/i,type: 'asset',generator: {filename: 'assets/[hash][ext][query]'}}]}
}

  4. 打包后运行观察效果

小结

  1. 资源模块指的是什么?

    <details> <summary>答案</summary> <ul><li>图片，字体文件等等</li></ul> </details>

10.案例-用户登录-完成功能

目标

在 Webpack 环境下，使用 npm 下包作用在前端项目

讲解

  1. 需求：点击登录按钮，基于 npm 下载 axios 包，完成验证码登录功能

  2. 步骤：

    1. 使用 npm 下载 axios

      npm i axios

    2. 引入到 src/login/index.js 中编写业务实现

      /*** 目标10：完成登录功能*  10.1 使用 npm 下载 axios（体验 npm 作用在前端项目中）*  10.2 准备并修改 utils 工具包源代码导出实现函数*  10.3 导入并编写逻辑代码，打包后运行观察效果*/
// 10.3 导入并编写逻辑代码，打包后运行观察效果
import myAxios from '../utils/request.js'
import { myAlert } from '../utils/alert.js'
document.querySelector('.btn').addEventListener('click', () => {const phone = document.querySelector('.login-form [name=mobile]').valueconst code = document.querySelector('.login-form [name=code]').value
​if (!checkPhone(phone)) {myAlert(false, '手机号长度必须是11位')console.log('手机号长度必须是11位')return}
​if (!checkCode(code)) {myAlert(false, '验证码长度必须是6位')console.log('验证码长度必须是6位')return}
​myAxios({url: '/v1_0/authorizations',method: 'POST',data: {mobile: phone,code: code}}).then(res => {myAlert(true, '登录成功')localStorage.setItem('token', res.data.token)location.href = '../content/index.html'}).catch(error => {myAlert(false, error.response.data.message)})
})

    3. 打包后运行观察效果

小结

  1. npm 下载的包如何作用在前端项目上?

    <details> <summary>答案</summary> <ul><li>被 Webpack 打包处理后，再引入到 html 文件中运行</li> </ul> </details>

10.Webpack 搭建开发环境

目标

体验 webpack-dev-server 开发服务器，快速开发应用程序

讲解

  1. 每次改动代码，都要重新打包，很麻烦，所以这里给项目集成 webpack-dev-server 开发服务器

  2. 作用：启动 Web 服务，打包输出源码在内存，并会自动检测代码变化热更新到网页

  3. 步骤；

    1. 下载 webpack-dev-server 软件包到当前项目

      npm i webpack-dev-server --save-dev

    2. 配置自定义命令，并设置打包的模式为开发模式

      // ...
​
module.exports = {// ...mode: 'development'
}
"scripts": {// ..."dev": "webpack serve --mode=development"
},

    3. 使用 npm run dev 来启动开发服务器，访问提示的域名+端口号，在浏览器访问打包后的项目网页，修改代码后试试热更新效果

      在 js / css 文件中修改代码保存后，会实时反馈到浏览器

小结

  1. webpack-dev-server 的作用?

    <details> <summary>答案</summary> <ul><li>启动 Webpack 开发服务器，会启动一个 Web 服务，实时检测代码变化重新打包，并快速反应最新效果到浏览器页面上</li></ul> </details>

11.Webpack 打包模式

目标

了解不同打包模式对代码和环境的影响

讲解

  1. 打包模式：告知 Webpack 使用相应模式的内置优化

  2. 分类：

    模式名称模式名字特点场景
    开发模式development调试代码，实时加载，模块热替换等本地开发
    生产模式production压缩代码，资源优化，更轻量等打包上线

  3. 如何设置影响 Webpack呢？

    • 方式1：在 webpack.config.js 配置文件设置 mode 选项

      // ...
​
module.exports = {// ...mode: 'production'
}

    • 方式2：在 package.json 命令行设置 mode 参数

      "scripts": {"build": "webpack --mode=production","dev": "webpack serve --mode=development"
},

  4. 注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

  5. 体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容

小结

  1. 两种模式的区别?

    <details> <summary>答案</summary> <ul><li>开发模式注重代码热替换更快，让开发调试代码更便捷，生产模式注重项目体积更小，更轻量，适配不同的浏览器环境</li></ul> </details>

12.Webpack 打包模式的应用

目标

了解 Webpack 打包模式的应用

讲解

  1. 需求：在开发模式下用 style-loader 内嵌更快，在生产模式下提取 css 代码

  2. 方案1：webpack.config.js 配置导出函数，但是局限性大（只接受 2 种模式）

    方案2：借助 cross-env （跨平台通用）包命令，设置参数区分环境

    方案3：配置不同的 webpack.config.js （适用多种模式差异性较大情况）

  3. 主要使用方案 2 尝试，其他方案可以结合点击跳转的官方文档查看尝试

  4. 步骤：

    1.下载 cross-env 软件包到当前项目

    npm i cross-env --save-dev

2.配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

3.在 webpack.config.js 区分不同环境使用不同配置

   module: {rules: [{test: /\.css$/i,// use: ['style-loader', "css-loader"],use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]},{test: /\.less$/i,use: [// compiles Less to CSSprocess.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','less-loader',],}],},

4.重新打包观察两种配置区别

小结

13.Webpack 前端注入环境变量

目标

前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

讲解

  1. 需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

  2. 问题：cross-env 设置的只在 Node.js 环境生效，前端代码无法访问

    process.env.NODE_ENV

  3. 解决：使用 Webpack 内置的 DefinePlugin 插件

  4. 作用：在编译时，将前端代码中匹配的变量名，替换为值或表达式

  5. 配置 webpack.config.js 中给前端注入环境变量

    // ...
const webpack = require('webpack')
​
module.exports = {// ...plugins: [// ...new webpack.DefinePlugin({// key 是注入到打包后的前端 JS 代码中作为全局变量// value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)})]
}

小结

14.Webpack 开发环境调错 source map

目标

在开发环境如何精准定位到报错源码位置

讲解

  1. source map：可以准确追踪 error 和 warning 在原始代码的位置

  2. 问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

  3. 设置：webpack.config.js 配置 devtool 选项

    // ...
​
module.exports = {// ...devtool: 'inline-source-map'
}

    inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

  4. 注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）

小结

  1. 为何打包后，在控制台无法准确定位到源码的位置信息?

    <details> 
<summary>答案</summary><ul>
<li>因为 Webpack 把代码压缩和混淆了</li>
</ul></details>

15.Webpack 设置解析别名路径

目标

设置 Webpack 如何设置路径别名，方便我们引入目标模块

讲解

  1. 解析别名：配置模块如何解析，创建 import 或 require 的别名，来确保模块引入变得更简单

  2. 例如：

    1. 原来路径如下：

      import { checkPhone, checkCode } from '../src/utils/check.js'

    2. 配置解析别名：在 webpack.config.js 中设置

      // ...
​
const config = {// ...resolve: {alias: {'@': path.resolve(__dirname, 'src')}}
}

    3. 这样我们以后，引入目标模块写的路径就更简单了

      import { checkPhone, checkCode } from '@/utils/check.js'

  3. 修改代码的路径后，重新打包观察效果是否正常！

小结

  1. 路径中的 '@' 符号代表什么意思？

    <details> <summary>答案</summary> <ul><li>看在 webpack 配置中的别名路径是什么，就会在打包时替换成哪个路径使用</li></ul> </details>

16.优化-CDN使用

目标

开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

讲解

  1. 需求：开发模式使用本地第三方库，生产模式下使用 CDN 加载引入

  2. CDN定义：内容分发网络，指的是一组分布在各个地区的服务器

  3. 作用：把静态资源文件/第三方库放在 CDN 网络中各个服务器中，供用户就近请求获取

  4. 好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

  1. 实现需求的思路图：

  2. 步骤：

    1.在 html 中引入第三方库的 CDN 地址并用模板语法判断

    <% if(htmlWebpackPlugin.options.useCdn){ %><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

  
 // 生产环境下使用相关配置if (process.env.NODE_ENV === 'production') {// 外部扩展（让 webpack 防止 import 的包被打包进来）config.externals = {// key：import from 语句后面的字符串// value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）'bootstrap/dist/css/bootstrap.min.css': 'bootstrap','axios': 'axios'}}// ...const config = {// ...plugins: [new HtmlWebpackPlugin({// ...// 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用useCdn: process.env.NODE_ENV === 'production'})]}

3.两种模式下打包观察效果

小结

17.Webpack 多页面打包

目标

让 Webpack 同时打包登录和内容列表页面

讲解

  1. 概念：单页面：单个 html 文件，切换 DOM 的方式实现不同业务逻辑展示，后续 Vue/React 会学到

    多页面：多个 html 文件，切换页面实现不同业务逻辑展示

  1. 需求：把黑马头条-数据管理平台-内容页面一起引入打包使用

  2. 步骤：

    1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出

    2. 下载 form-serialize 包并导入到核心代码中使用

    3. 配置 webpack.config.js 多入口和多页面的设置

      // ...
const config = {entry: {'模块名1': path.resolve(__dirname, 'src/入口1.js'),'模块名2': path.resolve(__dirname, 'src/入口2.js'),},output: {path: path.resolve(__dirname, 'dist'),filename: './[name]/index.js'  }plugins: [new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})new HtmlWebpackPlugin({template: './public/页面2.html', // 模板文件filename: './路径/index.html', // 输出文件chunks: ['模块名2']})]
}

    4. 重新打包观察效果

小结

18.案例-发布文章页面打包

目标

案例-发布文章页面打包

讲解

  1. 需求：把发布文章页面一起打包

    步骤：

    1.准备发布文章页面源代码，改写成模块化的导出和导入方式

    2.修改 webpack.config.js 的配置，增加一个入口和出口

    3.打包观察效果

小结

19.优化-分割公共代码

目标

优化-分割功能代码

讲解

  1. 需求：把 2 个以上页面引用的公共代码提取

    步骤：

    1.配置 webpack.config.js 的 splitChunks 分割功能

    // ...
const config = {// ...optimization: {// ...splitChunks: {chunks: 'all', // 所有模块动态非动态移入的都分割分析cacheGroups: { // 分隔组commons: { // 抽取公共模块minSize: 0, // 抽取的chunk最小大小字节minChunks: 2, // 最小引用数reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用name(module, chunks, cacheGroupKey) { // 分离出模块文件名const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2return `./js/${allChunksNames}` // 输出到 dist 目录下位置}}}}
          

2.打包观察效果

小结

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

实验七 用 MATLAB 设计 FIR 数字滤波器

实验七 用 MATLAB 设计 FIR 数字滤波器

实验目的 加深对窗函数法设计 FIR 数字滤波器的基本原理的理解。 学习用 Matlab 语言的窗函数法编写设计 FIR 数字滤波器的程序。 了解 Matlab 语言有关窗函数法设计 FIR 数字滤波器的常用函数用法。 掌握 FIR 滤波器的快速卷积实现原理。 不同滤波器的设计方法具有不同的优…
阅读更多...
day07 接口测试（2）

day07 接口测试（2）

目录 1、接口用例设计 1.1 接口测试的测试点 1.1.1 功能测试 &#xff01;&#xff01; &#xff08;1&#xff09;单接口功能&#xff1a; &#xff08;见1.3&#xff09; &#xff08;2&#xff09;业务场景功能:&#xff08;见1.4&#xff09; 1.1.2 性能测试&#xf…
阅读更多...
CentOS 二进制安装部署MongoDB 4.0

CentOS 二进制安装部署MongoDB 4.0

一、安装MongoDB 1. 下载 MongoDB 二进制文件 前往 MongoDB 官方下载页面(https://www.mongodb.com/try/download/community) 选择对应版本的 tar 包。 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.28.tgz 2. 解压并移动至目标目录 解压文件&#xff…
阅读更多...
《Scientific Reports》2024最新投稿经验

《Scientific Reports》2024最新投稿经验

"Scientific Reports" 是Nature Portfolio旗下一本备受推崇的开放获取多学科期刊&#xff0c;自2011年起被JCR收录。这本月刊致力于发表自然科学、心理学、医学和工程学领域的突破性原创研究。它的收稿范围广泛&#xff0c;覆盖物理学、化学、生物学、地球科学、环境…
阅读更多...
C++内存布局以及常用关键字

C++内存布局以及常用关键字

C内存布局以及常用关键字 C的内存空间 代码存储区域&#xff1a;常量区、代码区、静态区&#xff08;全局区&#xff09;、堆区、栈区 栈区向下增长&#xff0c;堆区向上增长。栈由系统管理&#xff0c;没有内存碎片&#xff0c;每个元素之间都是连续的&#xff0c;大小比较…
阅读更多...
设计模式：19、桥接模式

设计模式：19、桥接模式

目录 0、定义 1、桥接模式的四种角色 2、桥接模式的UML类图 3、示例代码 0、定义 将抽象部门与实现部分分离&#xff0c;使它们都可以独立地变化。 1、桥接模式的四种角色 抽象&#xff08;Abstraction&#xff09;&#xff1a;一个抽象类&#xff0c;包含实现者&#xf…
阅读更多...
Linux中文件操作

Linux中文件操作

文件由文件内容和文件属性构成&#xff0c;因此对文件的操作就是对文件内容或文件属性的操作。所谓的“打开一个文件”就是将文件的属性或内容加载到内存中&#xff0c;而没有被打开的文件存在于磁盘上。打开的文件称作“内存文件”&#xff0c;未被打开的文件称作“磁盘文件”…
阅读更多...
elasticsearch基础总结

elasticsearch基础总结

最近实习&#xff0c;项目用的elasticseatch做的存储库&#xff0c;但是之前对于es接触的不多&#xff0c;查询语法有些不熟&#xff0c;每次想写个DSL查询时都要gpt或者施展搜索大法&#xff0c;所以索性就自己总结总结&#xff0c;以后忘了也方便查。所以这篇文章会持续更新。…
阅读更多...
c++ map对其值排序

c++ map对其值排序

无法直接排序,转换成vector<std::pair<string,int>> #include <iostream> #include <map> #include <vector> #include <algorithm>// 用于排序的比较函数 bool compareByValue(const std::pair<std::string, int>& a, const …
阅读更多...
PysimpleGUI试用版变更免费版

PysimpleGUI试用版变更免费版

1、PysimpleGUI试用版&#xff1a; 由于5.0版本之后不是免费的 2、变更版本&#xff1a; 打开pycharm-设置-python解释器&#xff1a;点击 搜索PysimpleGUI-指定版本-选择低于5.0的版本&#xff1a;安装软件包 3、重新运行PysimpleGUI&#xff0c;即可获得免费版&#xff1a;…
阅读更多...
Grule前端表单post后端执行grule引擎规则

Grule前端表单post后端执行grule引擎规则

Grule前端表单post后端执行grule引擎规则 编写前端表单和后端接口 编写test.go执行grule引擎规则 示例都是 go test 执行的测试代码&#xff0c;所以将里面的测试代码去除 由于之前 NumberExponentExample_test.go 已经验证可运行, 所以将 err 的异常处理去除 package mai…
阅读更多...
STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

STM32串口接收与发送(关于为什么接收不需要中断而发生需要以及HAL_UART_Transmit和HAL_UART_Transmit_IT的区别)

一、HAL_UART_Transmit和HAL_UART_Transmit_IT的区别 1. HAL_UART_Transmit_IT&#xff08;非阻塞模式&#xff09;&#xff1a; HAL_UART_Transmit_IT 是非阻塞的传输函数&#xff0c;也就是说&#xff0c;当你调用 HAL_UART_Transmit_IT 时&#xff0c;它不会等到数据完全发…
阅读更多...
使用R语言优雅的获取任意区域的POI，道路，河流等数据

使用R语言优雅的获取任意区域的POI，道路，河流等数据

POI是“Polnt of Information”的缩写&#xff0c;中文可以翻译为“信息点”。是地图上任何非地理意义的有意义的点&#xff0c;如商店&#xff0c;酒吧&#xff0c;加油站&#xff0c;医院&#xff0c;车站等。POI&#xff0c;道路网&#xff0c;河流等是我们日常研究中经常需…
阅读更多...
七、docker registry

七、docker registry

七、docker registry 7.1 了解Docker Registry 7.1.1 介绍 registry 用于保存docker 镜像&#xff0c;包括镜像的层次结构和元数据。启动容器时&#xff0c;docker daemon会试图从本地获取相关的镜像&#xff1b;本地镜像不存在时&#xff0c;其将从registry中下载该镜像并保…
阅读更多...
目标跟踪算法：SORT、卡尔曼滤波、匈牙利算法

目标跟踪算法：SORT、卡尔曼滤波、匈牙利算法

目录 1 目标检测 2 卡尔曼滤波 3《从放弃到精通&#xff01;卡尔曼滤波从理论到实践》视频简单学习笔记 3.1 入门 3.2 进阶 3.2.1 状态空间表达式 3.2.2 高斯分布 3.3 放弃 3.4 精通 4 匈牙利算法 5 《【运筹学】-指派问题&#xff08;匈牙利算法&#xff09;》视…
阅读更多...
OpenCV-图像阈值

OpenCV-图像阈值

简单阈值法 此方法是直截了当的。如果像素值大于阈值&#xff0c;则会被赋为一个值&#xff08;可能为白色&#xff09;&#xff0c;否则会赋为另一个值&#xff08;可能为黑色&#xff09;。使用的函数是 cv.threshold。第一个参数是源图像&#xff0c;它应该是灰度图像。第二…
阅读更多...
【HarmonyOS NEXT】实现Tabs组件的TabBar从左到右依次排列

【HarmonyOS NEXT】实现Tabs组件的TabBar从左到右依次排列

一、背景 系统提供的Tabs目前只能居中展示&#xff0c;暂不支持居左显示&#xff0c;现有的需求是需要Tabs从左往右排列显示&#xff0c;考虑通过Scroll和Row组件来实现 二、实现思路 通过Scroll和Row组件用来实现一个页签&#xff0c;在onclick事件中通过修改索引值和Tabs组…
阅读更多...
16-03、JVM系列之：内存与垃圾回收篇(三)

16-03、JVM系列之：内存与垃圾回收篇(三)

JVM系列之&#xff1a;内存与垃圾回收篇(三) ##本篇内容概述&#xff1a; 1、执行引擎 2、StringTable 3、垃圾回收一、执行引擎 ##一、执行引擎概述 如果想让一个java程序运行起来&#xff0c;执行引擎的任务就是将字节码指令解释/编译为对应平台上的本地机器指令才可以。 简…
阅读更多...
FPGA工作原理、架构及底层资源

FPGA工作原理、架构及底层资源

FPGA工作原理、架构及底层资源 文章目录 FPGA工作原理、架构及底层资源前言一、FPGA工作原理二、FPGA架构及底层资源 1.FPGA架构2.FPGA底层资源 2.1可编程输入/输出单元简称&#xff08;IOB&#xff09;2.2可配置逻辑块2.3丰富的布线资源2.4数字时钟管理模块(DCM)2.5嵌入式块 …
阅读更多...
【JVM】JVM基础教程（一）

【JVM】JVM基础教程（一）

目录 初识JVM JVM是什么&#xff1f; JVM的功能 解释、即时编译和运行 内存管理 常见的JVM JVM虚拟机规范 HotSpot的发展历程 JVM的组成 字节码文件详解 应用场景 以正确姿势打开字节码文件 ​编辑字节码文件的组成 基本信息 Magic魔数 主副版本号 常量池 接口…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023