当前位置：首页 > news >正文

从0-1搭建webpack的前端工程化项目

news 2025/8/12 13:22:41

文章目录

- 1.1 前端工程化的相关概念
- - 1 小白眼中的前端开发 vs 实际的前端开发
  - 2 什么是前端工程化
  - 3 前端工程化的解决方案
- 1.2 webpack 的基本使用
- - 1.2.1 什么是 webpack
  - 1.2.创建列表隔行变色项目
  - 1.2.3. 在项目中安装 webpack
  - 1.2.4 在项目中配置 webpack
  - - 1 mode 的可选值
    - 2 webpack.config.js 文件的作用
    - 3 webpack 中的默认约定
    - 4 自定义打包的入口与出口
- 1.3 webpack 中的插件
- - 1.3.1 webpack 插件的作用
  - 1.3.2 webpack-dev-server
  - - 1 安装 webpack-dev-server
    - 2 配置 webpack-dev-server
    - 3 打包生成的文件哪儿去了？
    - 4 生成到内存中的文件该如何访问？
  - 1.3.3 html-webpack-plugin
  - - 1 安装 html-webpack-plugin
    - 2 配置 html-webpack-plugin
    - 3 解惑 html-webpack-plugin
    - 4 devServer 节点
- 1.4 webpack 中的 loader
- - 1 loader 概述
  - 2 loader 的调用过程
  - 3 打包处理 css 文件
  - 4 打包处理 less 文件
  - 5 打包处理样式表中与url 路径相关的文件
  - 6. 打包处理 js 文件中的高级语法
  - - 6.1 安装 babel-loader 相关的包
    - **6.2 配置 babel-loader**
- 1.5 打包发布
- - 1.5.1 为什么要打包发布
  - 1.5.2 配置 webpack 的打包发布
  - 1.5.3 把 JavaScript 文件统一生成到 js 目录中
  - 1.5.4 把图片文件统一生成到 image 目录中
  - 1.5.5 自动清理 dist 目录下的旧文件
- 1.6 Source Map
- - 1.6.1 生产环境遇到的问题
  - 1.6.2 什么是 Source Map
  - 1.6.3 webpack **开发环境下的** **Source Map**
  - - **3.1 默认 Source Map 的问题**
    - **3.2 解决默认 Source Map 的问题**
  - 1.6.4 webpack **生产环境下的** **Source Map**
  - - **4.1 只定位行数不暴露源码**
    - **4.2 定位行数且暴露源码**
  - 1.6.5 Source Map 的最佳实践
  - - **实际开发中需要自己配置 webpack 吗？**
- 1.7webpack中@的原理和好处
- 1.8 总结

1.1 前端工程化的相关概念

1 小白眼中的前端开发 vs 实际的前端开发

小白眼中的前端开发

会写HTML+CSS +javascript
美化页面就拽一个bootstrap过来
需要操作DOM或发起Ajax请求就拽一个jQuery过来
需要快速实现一个页面布局效果就拽一个Layui过来

实际的前端开发

模块化 (js的模块化，css的模块化，资源的模块化)
组件化 (复用现有的UI结构，样式，行为)
规范化 (目录结构的划分，编程规范化，接口规范化，文档规范化，Git分支管理)
自动化 (自动化构建，自动部署，自动化测试)

2 什么是前端工程化

前端工程化指的是：在企业级的前端项目开发中把前端开发所需的工具，技术，流程，经验等进行规范化，标准化。

企业中的Vue项目和React项目,都是基于工程化的方式进行开发的

好处：前端开发自成体系，有一套标准的开发方案和流程

3 前端工程化的解决方案

早期的前端工程化解决方案：

grunt（ https://www.gruntjs.net/ ）
gulp（ https://www.gulpjs.com.cn/ ）

目前主流的前端工程化解决方案：

webpack（ https://www.webpackjs.com/ ）主要用于做项目
parcel（ https://zh.parceljs.org/ ）更多是开发第三方包的时候会用

1.2 webpack 的基本使用

1.2.1 什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性，性能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的。

1.2.创建列表隔行变色项目

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json。(文件夹必须是英文的)

package.json

...

② 新建 src 源代码目录。 (放程序员写的代码)

③ 新建 src -> index.html 首页和 src -> index.js 脚本文件

④ 初始化首页基本的结构

ul>li{这是第$个li}*9 //快速生成1-9个li

src -> index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./index.js"></script>
</head><body><ul><li>这是第 1 个 li</li><li>这是第 2 个 li</li><li>这是第 3 个 li</li><li>这是第 4 个 li</li><li>这是第 5 个 li</li><li>这是第 6 个 li</li><li>这是第 7 个 li</li><li>这是第 8 个 li</li><li>这是第 9 个 li</li></ul></body></html>

⑤ 运行 npm install jquery –s 命令,安装 jQuery (不用搜索下载了，–s是加到dependencies()) -s是–save的缩写

package-lock.json(增加)

.....

node_modules(增加文件夹)

⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

src -> index.js

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'pink')// 0 是偶数// 1 是奇数
})

结果你会发现报错因为语法高级无法识别接下来就需要用webpack

1.2.3. 在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D (–S是加到devDependencies(只在开发阶段用)这个节点中)

-D是–save-dev的缩写在npmjs.com 官方文档中可以查看放在那里

注意：安装完webpack在node_modules文件夹会多很多文件夹

1.2.4 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

webpack.config.js

module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development'}

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

注意package.json中原先就有

  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"}//把"test": "echo \"Error: no test specified\" && exit 1"删掉换成下面的//"test": "echo \"Error: no test specified\" && exit 1"是没用的代码

package.json

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

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建(一会介绍打包介绍)

终端(又又又报错了)：

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev> change-rows-color@1.0.0 dev
> webpacknode:internal/crypto/hash:71this[kHandle] = new _Hash(algorithm, xofLen);^Error: error:0308010C:digital envelope routines::unsupportedat new Hash (node:internal/crypto/hash:71:19)at Object.createHash (node:crypto:133:10)at BulkUpdateDecorator.hashFactory (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\util\createHash.js:145:18)at BulkUpdateDecorator.update (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\util\createHash.js:46:50)at RawSource.updateHash (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack-sources\lib\RawSource.js:64:8)at NormalModule._initBuildHash (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\NormalModule.js:868:17)at handleParseResult (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\NormalModule.js:934:10)at D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\NormalModule.js:1026:4at processResult (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\NormalModule.js:743:11)at D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack\lib\NormalModule.js:807:5 {opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],library: 'digital envelope routines',reason: 'unsupported',code: 'ERR_OSSL_EVP_UNSUPPORTED'
}Node.js v18.15.0
这个错误是node版本太高我的建议是安装nvm可以随意切换node的版本
安装方法自己查

如下：

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev > change-rows-color@1.0.0 dev D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
> webpackasset main.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index.js 315 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
//将上面的两个index.jsjquery.js合并在了main.js
webpack 5.42.1 compiled successfully in 253 ms

运行完之后在文件中多了 dist文件夹并且在dist文件夹下有main.js

main.js是webpage根据我们index.js生成的

也就是说index.js可以用main.js替换，因为main.js解决了兼容性问题

第四步修改 src -> index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li></ul>
</body>
</html>

1 mode 的可选值

mode 节点的可选值有两个，分别是：

① development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

② production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

production的使用

webpack.config.js 修改

module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'production'
}

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev > change-rows-color@1.0.0 dev D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
> webpack
//注意这里的体积变为85.5 KiB
asset main.js 85.5 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 663 bytes 3 modules
cacheable modules 279 KiB./src/index.js 315 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]  
webpack 5.42.1 compiled successfully in 1778 ms

2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个webpack.config.js 配置文件，

从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。

3 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

① 默认的打包入口文件为 src -> index.js ，如果改变src文件夹的名字和index.js的名字，然后使用npm run dev 命令会报错

② 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。

先将index.js改为index1.js

示例代码如下：

webpack.config.js

//导入path模块
const path = require('path');module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'}
}

将dist文件夹删除

终端运行 npm run dev

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev > change-rows-color@1.0.0 dev D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
> webpackasset bundle.js 319 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 279 KiB./src/index1.js 315 bytes [built] [code generated]./node_modules/jquery/dist/jquery.js 278 KiB [built] [code generated]
webpack 5.42.1 compiled successfully in 279 ms
PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color>

并改变index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><!-- <script src="../dist/main.js"></script> --><script src="../dist/bundle.js"></script>
</head>
<body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li></ul>
</body>
</html>

思考一个问题，此时当我们改变index1.js中的代码，使奇数行变成金色，会不会影响页面中的颜色

答案:不会，因为我们在index.js中导入的是webpage工程化之后的代码；

想要看到奇数行变成金色，必须重新运行npm run dev

但是每次运行npm run dev 太麻烦了下面来解决这个问题

1.3 webpack 中的插件

1.3.1 webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的

webpack 插件有如下两个：

① webpack-dev-server

类似于 node.js 阶段用到的 nodemon 工具
每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

webpack 中的 HTML 插件（类似于一个模板引擎插件）
可以通过此插件自定制 index.html 页面的内容

1.3.2 webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

1 安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D （只在开发阶段用到的工具）

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm install webpack-dev-server@3.11.2 -D
//....一堆警告 只要不报错就行+ webpack-dev-server@3.11.2
added 374 packages from 227 contributors and updated 125 packages in 17.789s41 packages are looking for fundingrun `npm fund` for details

2 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下：

这个是用来进行实时打包的，只要程序员保存代码就是重新打包项目

将package.json下的scripts属性的dev改成如下

  "scripts": {"dev": "webpack serve",}

② 再次运行 npm run dev 命令，重新进行项目的打包 (又又又报错)

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev> change-rows-color@1.0.0 dev D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
> webpack serve[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a functionat WebpackCLI.makeCommand (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\webpack-cli\lib\webpack-cli.js:173:21)at ServeCommand.apply (D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color\node_modules\@webpack-cli\serve\lib\index.js:41:19)
//...省略
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\86184\AppData\Roaming\npm-cache\_logs\2023-05-25T11_47_09_839Z-debug.log

解决方法没有安装 npm i --save-dev webpack-cli

PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm i --save-dev webpack-cli 
//.....
+ webpack-cli@4.10.0
removed 9 packages and updated 4 packages in 3.99s
34 packages are looking for fundingrun `npm fund` for details//查看版是否安装webpack-cli 
PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npx webpack --version
webpack: 5.42.1
webpack-cli: 4.10.0
webpack-dev-server 3.11.2//再次执行
PS D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color> npm run dev
> change-rows-color@1.0.0 dev D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
> webpack serve
// 需要访问http://localhost:8080 地址
i ｢wds｣: Project is running at http://localhost:8080/
// 我们在webpack.config.js中加入了output属性 则说明更新的js代码在http://localhost:8080/bundle.js中
i ｢wds｣: webpack output is served from /
i ｢wds｣: Content not from webpack is served from D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-color
//.....
webpack 5.42.1 compiled successfully in 447 ms
i ｢wdm｣: Compiled successfully.
//当看到光标在这里一闪一闪的就好了

注意这个不能用浏览器打开了需要访问http://localhost:8080 地址

注意：我们重新打包的是放在内存中，没有放到磁盘中因为反复读写磁盘慢还会造成磁盘损毁。

如果我们删除dist文件夹再去保存index.js中的代码，你会发现不会生成dist文件夹，这正是因为我们存放的到内存中，并没有在磁盘中生成dist文件夹

那么既然保存在内存中那我们index.js就不能在**<script src=“…/dist/bundle.js”></script>**中访问到

在上面运行的指令中说明了是在http://localhost:8080/bundle.js中可以访问

那么就是将**<script src=“…/dist/bundle.js”></script>换为<script src=“/bundle.js”></script>**

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

打开网址如下：

在这里插入图片描述

注意：打开src文件夹打开index.html就可以看见

注意：webpack-dev-server 会启动一个实时打包的 http 服务器

3 打包生成的文件哪儿去了？

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

严格遵守开发者在 webpack.config.js 中指定配置
根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

不再根据 output 节点指定的路径，存放到实际的物理磁盘上
提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

4 生成到内存中的文件该如何访问？

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

1.3.3 html-webpack-plugin

上一节说到，如果我们一进入8080端口要打开src文件夹才能看到index.html页面

如果我们想一进入8080端口就打开index.html页面就需要借助下面的插件

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

1 安装 html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：

npm install html-webpack-plugin@5.3.2 -D

2 配置 html-webpack-plugin

代码

// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template:'./src/index.html',// 指定复制出来的文件名和存放路径filename:'./index.html'
})
module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',plugins: [htmlPlugin]
}

webpack.config.js

//导入path模块
const path = require('path');// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template:'./src/index.html',// 指定复制出来的文件名和存放路径filename:'./index.html'
})module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'},// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件plugins: [htmlPlugin]
}

3 解惑 html-webpack-plugin

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中。

② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件。

这句话的意思是，当运行后，我们把html中的导入的bundle.js文件个注释。再去刷新页面还能加载出来，右键查看网页源代码发现

<!DOCTYPE html>
<html lang="en">
<head><!-- 这是注释的--><!-- <script src="/bundle.js"></script> -->
<!-- 这是自动注入了打包的 bundle.js 文件-->
<script defer src="bundle.js"></script></head>
<body><ul><li>这是第1个li</li></ul>
</body>
</html>

4 devServer 节点

如果我们想在第一次打包时，就可以自动打开页面，就要安装webpack-dev-server 插件

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置，

示例代码如下：

devServer: {// 首次打包成功后，自动打开浏览器open: true,// 在 http 协议中，如果端口号是 80，则可以被省略port: 8080,// 指定运行的主机地址host: '127.0.0.1'},

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服

务器，否则最新的配置文件无法生效！

webpack.config.js

//导入path模块
const path = require('path');// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template:'./src/index.html',// 指定复制出来的文件名和存放路径filename:'./index.html'
})module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'},// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件plugins: [htmlPlugin],devServer: {// 首次打包成功后，自动打开浏览器open: true,// 在 http 协议中，如果端口号是 80，则可以被省略port: 8080,// 指定运行的主机地址host: '127.0.0.1'}
}

1.4 webpack 中的 loader

1 loader 概述

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，

webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：

css-loader 可以打包处理 .css 相关的文件
less-loader 可以打包处理 .less 相关的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

2 loader 的调用过程

在这里插入图片描述

3 打包处理 css 文件

src–>css–>index.css

li {list-style: none;
}

以前我们是在index.html中引用css，但是以后可以把css当作一个模块来使用。如下

import './css/index.css'

src–>index1.js

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
import './css/index.css'// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色odd$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'green')// 0 是偶数// 1 是奇数
})

此时运行会报错

ERROR in ./src/css/index.css 1:3
Module parse failed: Unexpected token (1:3) --模块解析失败
You may need an appropriate loader to handle this file type  --你需要一个合适loder的文件去处理这个问题

① 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: { //所有第三方文件模块的匹配规则rules: [ // 文件后缀名的匹配规则// 定义了不同模块对应的 loader{ test: /\.css$/, use: ['style-loader', 'css-loader'] },]
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

use 数组中指定的 loader 顺序是固定的
多个 loader 的调用顺序是：从后往前调用 [‘style-loader’, ‘css-loader’]

工作原理

webpack 默认只能打包处理.js 结尾的文件，处理不了其他后缀的文件
由于代码中包含了index.js这个文件，因此webpack默认处理不了
当webpack发现某个文件处理不了，就会查早webpack.config.js 这个配置文件，看module.rules数组中，是否配置了对应的loader加载器
webpack把index.css这个文件，先转交给最后一个loader进行处理(先转交给css-loader)
当 css-loader 处理完毕之后，会把处理的结果，转交给下一个loader(转交给 style-loader)
当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给webpack
webpack 把style-loader处理的结果，合并到./dist/bundle.js 中，最终生成打包好的文件。

4 打包处理 less 文件

less和css

区别：1、Less是一门CSS预处理语言，而css是一种用来表现HTML或XML等文件样式的计算机语言；2、less扩展了CSS语言，增加了css本身没有的变量、函数等特性；3、css可以被浏览器直接识别，less需要先编译为css。

src–>css–>index.less

html,body,ul{margin: 0;padding: 0;li {line-height: 30px;padding-left: 20px;font-size: 12px;}
}

src–>index1.js

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
import './css/index.css'
import './css/index.less'// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色odd$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'green')// 0 是偶数// 1 是奇数
})

① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

// 处理 .less 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

webpack.config.js

//导入path模块
const path = require('path');// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template:'./src/index.html',// 指定复制出来的文件名和存放路径filename:'./index.html'
})module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'},// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件plugins: [htmlPlugin],devServer: {// 首次打包成功后，自动打开浏览器open: true,// 在 http 协议中，如果端口号是 80，则可以被省略port: 8080,// 指定运行的主机地址host: '127.0.0.1'},module: { //所有第三方文件模块的匹配规则rules: [ // 文件后缀名的匹配规则// 定义了不同模块对应的 loader{ test: /\.css$/, use: ['style-loader', 'css-loader',] },// 处理 .less 文件的 loader{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },// 处理图片文件的 loader]}
}

5 打包处理样式表中与url 路径相关的文件

src–>image–>xunlei 放一个小图标的图片

src–>index.js 加上这句<img src=“” alt=“” class=“box”>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><!-- <script src="../dist/main.js"></script> --><!-- <script src="../dist/bundle.js"></script> --><!-- 加载和引用内存中的 bundle.js --><script src="/bundle.js"></script>
</head>
<body><ul><li>这是第1个li</li><li>这是第2个li</li><li>这是第3个li</li><li>这是第4个li</li><li>这是第5个li</li><li>这是第6个li</li><li>这是第7个li</li><li>这是第8个li</li><li>这是第9个li</li></ul><!-- 需求：把 /src/images/logo.jpg 设置给 src 属性 --><img src="" alt="" class="box"></body>
</html>

语法

// 1. 导入图片，得到图片文件
import logo from './image/XunLei.png'
// console.log(logo)
// 2. 给 img 标签的 src 动态赋值   
$('.box').attr('src', logo)  //attr()方法设置或返回被选元素的属性值

src–>index1.js

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
import './css/index.css'
import './css/index.less'// 1. 导入图片，得到图片文件
import logo from './image/XunLei.png'
// console.log(logo)  打印图片得到了 图片的base64的字符串
// 2. 给 img 标签的 src 动态赋值   
$('.box').attr('src', logo)  //attr()方法设置或返回被选元素的属性值// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色odd$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'green')// 0 是偶数// 1 是奇数
})

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

其中 ? 之后的是 loader 的参数项：

limit 用来指定图片的大小，单位是字节（byte）
只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片，如果大于则是路径

样式的转换过程

注意在 webpack中把 .css和.less结尾的样式转换成了bundle.js中类似于js的方式去运行

6. 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借

助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

src–>index1.js

// 1. 使用 ES6 导入语法，导入 jQuery
import $ from 'jquery'// 导入样式（在 webpack 中，一切皆模块，都可以通过 ES6 导入语法进行导入和使用）
// 如果某个模块中，使用 from 接收到的成员为 undefined，则没必要进行接收
import './css/index.css'
import './css/index.less'
// 这里没有写成  import a from './css/index.css'  console.log(a) 都是underfined
// 注意在 webpack中 把  .css和.less结尾的样式转换成了bundle.js中 类似于js的方式去运行// 1. 导入图片，得到图片文件
import logo from './image/XunLei.png'console.log(logo)  //打印图片得到了 图片的base64的字符串
// 2. 给 img 标签的 src 动态赋值   
$('.box').attr('src', logo)  //attr()方法设置或返回被选元素的属性值// 2. 定义 jQuery 的入口函数
$(function () {// 3. 实现奇偶行变色// 奇数行为红色odd$('li:odd').css('background-color', 'red')$('li:even').css('background-color', 'green')// 0 是偶数// 1 是奇数
})// 定义装饰器函数
function info(target) {target.info = 'Person info.'
}// 定义一个普通的类
@info
class Person {}console.log(Person.info)

6.1 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

webpack.config.js

//导入path模块
const path = require('path');// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template: './src/index.html',// 指定复制出来的文件名和存放路径filename: './index.html'
})module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名filename: 'bundle.js'},// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件plugins: [htmlPlugin],devServer: {// 首次打包成功后，自动打开浏览器open: true,// 在 http 协议中，如果端口号是 80，则可以被省略port: 8080,// 指定运行的主机地址host: '127.0.0.1'},module: { //所有第三方文件模块的匹配规则rules: [ // 文件后缀名的匹配规则// 定义了不同模块对应的 loader{ test: /\.css$/, use: ['style-loader', 'css-loader',] },// 处理 .less 文件的 loader{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },// 处理图片文件的 loader// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=4096&outputPath=images' },// 使用 babel-loader 处理高级的 JS 语法// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件// 因为第三方包中的 JS 兼容性，不需要程序员关心{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]}
}

6.2 配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {// 声明 babel 可用的插件// 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]}

babel.config.js

module.exports = {// 声明 babel 可用的插件// 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

运行后在控制台输出 Person info.

注意：上面就是插件中的插件 babel-loader用到了插件plugin-proposal-decorators

详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators

1.5 打包发布

前面就是打包到了内存中但是我需要打包到磁盘中，就需要下面的打包发布，交给后端人员

1.5.1 为什么要打包发布

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件

② 开发环境下，打包生成的文件不会进行代码压缩和性能优化

为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。

1.5.2 配置 webpack 的打包发布

在 package.json 文件的 scripts 节点下，新增 build 命令如下：

"scripts": {"dev": "webpack","build": "webpack --mode production"//注意这里 要用 npm run build进行发布 ，前面使用npm run dev来进行实时保存到内存中// 注意build可以随便命名 但是后面的webpack --mode production不能随便写},

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件

进行代码压缩和性能优化。

注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

package.json

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

注意这里说一下流程

我们在运行或者打包时，先进入webpack.config.js 再到package.json中

在npm run dev 时我们要求的是速度快，所以不需要压缩而不需要压缩则速度快，所以在webpack.config.js 中修改 module.exports = {mode: production’'}
在npm run build时我们时发布要求体积小，所以需要压缩，而压缩需要时间所以在webpack.config.js 中修改module.exports = {mode: ‘development’}

由上可知我们在打包中就不需要在 webpack.config.js 指定类型，而在package.json中修改 “scripts”: {“build”: “webpack --mode production”}将mode的默认值development进行修改，改为production，因为–mode选项的优先级高于选项mode的优先级会进行覆盖

当打包过后就可以发布到服务器了

1.5.3 把 JavaScript 文件统一生成到 js 目录中

我们发现我们打包生成的东西比较乱，我们打包后希望图片和图片放一起，js和js放一起。那么我们就需要用到下面的知识。

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：

module.exports = {output: {//这个时指定打包时要放到的地方// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名//filename: 'bundle.js'//现在需要统一jsfilename: 'js/bundle.js'},
}

1.5.4 把图片文件统一生成到 image 目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

webpack.config.js

module.exports = {//前面的代码省略module: { rules: [ // 处理图片文件的 loader// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔// outputPath参数是指打包后存放的路径 ，这里等于images表示打包生成的图片放在dist-->images中 // 注意只有图片大小超过limit的图片才会放到dist-->images中{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=409&outputPath=images' },]}
}

1.5.5 自动清理 dist 目录下的旧文件

由于每次打包发布都需要删除dist目录比较麻烦。

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

首先找到npmjs.com进入官网，然后去点击，文档如下

安装：-D的缩写是–save-dev

Installation
npm install --save-dev clean-webpack-plugin

使用：由于叫clean-webpack-plugin，所以在webpack.config.js 使用

Usage
const { CleanWebpackPlugin } = require('clean-webpack-plugin');const webpackConfig = {plugins: [/*** All files inside webpack's output.path directory will be removed once, but the* directory itself will not be. If using webpack 4+'s default configuration,* everything under <PROJECT_DIR>/dist/ will be removed.* Use cleanOnceBeforeBuildPatterns to override this behavior.** During rebuilds, all webpack assets that are not used anymore* will be removed automatically.** See `Options and Defaults` for information*/new CleanWebpackPlugin(),],
};module.exports = webpackConfig;

上面的代码可以简化为

// 导入clean-webpack-plugin插件
// 下面这句话是解构赋值 
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const obj = require('clean-webpack-plugin');
// console.log(obj);
// 结果为{ CleanWebpackPlugin: [class CleanWebpackPlugin] }
// 则const { CleanWebpackPlugin } = require('clean-webpack-plugin');相当于
// const { CleanWebpackPlugin } = { CleanWebpackPlugin: function () { } };这样 CleanWebpackPlugin就可以直接使用了
// 这个CleanWebpackPlugin是构造函数，一般首字母大写的都是构造函数
module.exportCleanWebpackPlugins = {plugins: [new CleanWebpackPlugin()],
}

webpack.config.js

//导入path模块
const path = require('path');// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象,相当于实例化对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template: './src/index.html',// 指定复制出来的文件名和存放路径filename: './index.html'
})// 导入clean-webpack-plugin插件
// 下面这句话是解构赋值 
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// const obj = require('clean-webpack-plugin');
// console.log(obj);
// 结果为{ CleanWebpackPlugin: [class CleanWebpackPlugin] }
// 则const { CleanWebpackPlugin } = require('clean-webpack-plugin');相当于
// const { CleanWebpackPlugin } = { CleanWebpackPlugin: function () { } };这样 CleanWebpackPlugin就可以直接使用了module.exports = {// mode 代表 webpack 运行的模式，可选值有两个 development 和 production// 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；// 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！mode: 'development',// entry: '指定要处理哪个文件'//__dirname 相当于当前目录 即D:\笔记之前端\笔记之Vue\笔记\code\第一章\change-rows-colorentry: path.join(__dirname, './src/index1.js'),// 指定生成的文件要存放到哪里output: {//这个时指定打包时要放到的地方// 存放的目录path: path.join(__dirname, 'dist'),// 生成的文件名//filename: 'bundle.js'//现在需要统一jsfilename: 'js/bundle.js'},// 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件  // new CleanWebpackPlugin()是 打包时清除旧包 要用到的插件plugins: [htmlPlugin, new CleanWebpackPlugin()],devServer: {// 首次打包成功后，自动打开浏览器open: true,// 在 http 协议中，如果端口号是 80，则可以被省略port: 8080,// 指定运行的主机地址host: '127.0.0.1'},module: { //所有第三方文件模块的匹配规则rules: [ // 文件后缀名的匹配规则// 定义了不同模块对应的 loader{ test: /\.css$/, use: ['style-loader', 'css-loader',] },// 处理 .less 文件的 loader{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },// 处理图片文件的 loader// 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组// 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔// outputPath参数是指打包后存放的路径 ，这里等于images表示打包生成的图片放在dist-->images中 // 注意只有图片大小超过limit的图片才会放到dist-->images中{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=409&outputPath=images' },// 使用 babel-loader 处理高级的 JS 语法// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件// 因为第三方包中的 JS 兼容性，不需要程序员关心{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]}
}// module.exports = {
//     // mode 代表 webpack 运行的模式，可选值有两个 development 和 production
//     // 结论：开发时候一定要用 development，因为追求的是打包的速度，而不是体积；
//     // 反过来，发布上线的时候一定能要用 production，因为上线追求的是体积小，而不是打包速度快！
//     mode: 'production'
// }

1.6 Source Map

比如在src–>index1.js中把第39行的console.log(Person.info)改为consle.log(Person.info)

在我们运行npm run dev时，如果我们代码报错，报错提示的41行是我们在内存中生成的index1.js的行数，而不是我们代码src–>index1.js中的行数

在这里插入图片描述

1.6.1 生产环境遇到的问题

前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的

加载效率。此时就不可避免的产生了另一个问题：

对压缩混淆之后的代码除错（debug）是一件极其困难的事情

在这里插入图片描述

变量被替换成没有任何语义的名称
空行和注释被剔除

1.6.2 什么是 Source Map

Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的

代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

1.6.3 webpack 开发环境下的 Source Map

在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行

的位置，并定位到具体的源代码：

3.1 默认 Source Map 的问题

开发环境下默认生成的 Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行

数不一致的问题。示意图如下：

在这里插入图片描述

3.2 解决默认 Source Map 的问题

开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数

保持一致：

module.exports = {// 在开发调试阶段，建议大家都把 devtool 的值设置为 eval-source-map// devtool: 'eval-source-map',// 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMapdevtool: 'eval-source-map',
}

1.6.4 webpack 生产环境下的 Source Map

在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通

过 Source Map 的形式暴露给别有所图之人。

在这里插入图片描述

4.1 只定位行数不暴露源码

在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将 devtool 的值设置为

nosources-source-map。实际效果如图所示：

在这里插入图片描述

4.2 定位行数且暴露源码

在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将 devtool 的值设置为

source-map。实际效果如图所示：

在这里插入图片描述

1.6.5 Source Map 的最佳实践

① 开发环境下(development)：

建议把 devtool 的值设置为 eval-source-map
好处：可以精准定位到具体的错误行

② 生产环境下(production)：

建议关闭 Source Map (也就是注释掉)或将 devtool 的值设置为 nosources-source-map
好处：防止源码泄露，提高网站的安全性

实际开发中需要自己配置 webpack 吗？

答案：不需要！

实际开发中会使命令行工具（俗称 CLI）一键生成带有 webpack 的项目
开箱即用，所有 webpack 配置项都是现成的！
我们只需要知道 webpack 中的基本概念即可！

1.7webpack中@的原理和好处

当我们在导入模块进行使用时有时需要往上翻 …/…/msg.js

比如新建src–>js，src–>js–>test，src–>js–>test–>info.js，msg.js

src–>js–>test–>info.js

import msg from '../../msg' //如果这个我们需要往上翻两层,才能导入msg.js模块console.log(msg)

msg.js

export default {msg: 'hello Vue.'
}

src–>index1.js

// 导入 src/js/test/info.js
import './js/test/info.js'

执行过程如下先在src–>index1.js中导入src–>js–>test–>info.js，在从src–>js–>test–>info.js中导入msg.js

在这里插入图片描述

结果为{msg: ‘hello Vue.’} 为了不用…/…/而用@代表根目录，进而实现从外往里找、

首先需要在webpack.config.js中进行配置

const path = require('path')// 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')// 2. new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({// 指定要复制哪个页面template: './src/index.html',// 指定复制出来的文件名和存放路径filename: './index.html'
})// 注意：左侧的 { } 是解构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin')// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {mode: 'development',resolve: {alias: {// 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录'@': path.join(__dirname, './src/')}}
}

修改代码

src–>js–>test–>info.js

// import msg from '../../msg' //如果这个我们需要往上翻两层,才能导入msg.js模块
import msg from '@/msg.js'// 建议大家使用 @ 表示 src 源代码目录，从外往里查找；不要使用 ../ 从里往外查找
//     @/msg.jsconsole.log(msg)

msg.js 不变

export default {msg: 'hello Vue.'
}

src–>index1.js

// 导入 src/js/test/info.js
import '@/js/test/info.js'

1.8 总结

① 能够掌握 webpack 的基本使用

安装、webpack.config.js、修改打包入口
了解常用的 plugin 的基本使用
webpack-dev-server、html-webpack-plugin

③ 了解常用的 loader 的基本使用

loader 的作用、loader 的调用过程

④ 能够说出 Source Map 的作用

精准定位到错误行并显示对应的源码
方便开发者调试源码中的错误

查看全文

http://www.dtcms.com/a/326673.html

MySQL杂项

OpenBMC中phosphor-dbus-interfaces深度解析：架构、原理与应用实践

安装AI高性能推理框架llama.cpp

Untiy_SpriteShape

VSCode编辑器常用24款基础插件

QT QVersionNumber 比较版本号大小

自主泊车算法

OFD一键转PDF格式，支持批量转换！

客户端连接redis，redis如何配置

钓鱼鱼饵制作的方式（红队）

定义短的魔术数字时小心负数的整型提升

AIStarter修复macOS 15兼容问题：跨平台AI项目管理新体验

【51单片机数码管循环显示3位数字】2022-10-26

Spring Boot文件上传功能实现详解

day25-IO

gateway进行接口日志打印

刘强东的AI棋局

高并发内存池内存释放回收(6)

如何生成测试报告

加载模型使用torch_dtype参数来显式指定数据类型

美股期权历史波动率数据研究分析教程

基于STM32单片机超声波测速测距防撞报警设计

c# 线程的基础教学（winform 电梯模拟）

C9800 ISSU升级

【Java工具】Java-sftp线程池上传

ADK[5]调用外部工具流程

(附源码)基于Spring Boot的4S店信息管理系统的设计与实现

每日算法刷题Day61:8.11:leetcode 堆11道题，用时2h30min

【功能测试】软件集成测试思路策略与经验总结

HTML应用指南：利用GET请求获取全国vivo体验店门店位置信息

文章目录

1.1 前端工程化的相关概念

1 小白眼中的前端开发 vs 实际的前端开发

2 什么是前端工程化

3 前端工程化的解决方案

1.2 webpack 的基本使用

1.2.1 什么是 webpack

1.2.创建列表隔行变色项目

1.2.3. 在项目中安装 webpack

1.2.4 在项目中配置 webpack

1 mode 的可选值

2 webpack.config.js 文件的作用

3 webpack 中的默认约定

4 自定义打包的入口与出口

1.3 webpack 中的插件

1.3.1 webpack 插件的作用

1.3.2 webpack-dev-server

1 安装 webpack-dev-server

2 配置 webpack-dev-server

3 打包生成的文件哪儿去了？

4 生成到内存中的文件该如何访问？

1.3.3 html-webpack-plugin

1 安装 html-webpack-plugin

2 配置 html-webpack-plugin

3 解惑 html-webpack-plugin

4 devServer 节点

1.4 webpack 中的 loader

1 loader 概述

2 loader 的调用过程

3 打包处理 css 文件

4 打包处理 less 文件

5 打包处理样式表中与url 路径相关的文件

6. 打包处理 js 文件中的高级语法

6.1 安装 babel-loader 相关的包

6.2 配置 babel-loader

1.5 打包发布

1.5.1 为什么要打包发布

1.5.2 配置 webpack 的打包发布

1.5.3 把 JavaScript 文件统一生成到 js 目录中

1.5.4 把图片文件统一生成到 image 目录中

1.5.5 自动清理 dist 目录下的旧文件

1.6 Source Map

1.6.1 生产环境遇到的问题

1.6.2 什么是 Source Map

1.6.3 webpack 开发环境下的 Source Map

3.1 默认 Source Map 的问题

3.2 解决默认 Source Map 的问题

1.6.4 webpack 生产环境下的 Source Map

4.1 只定位行数不暴露源码

4.2 定位行数且暴露源码

1.6.5 Source Map 的最佳实践

实际开发中需要自己配置 webpack 吗？

1.7webpack中@的原理和好处

1.8 总结

相关文章：