Webpack

目录

1. webpack 中的插件 

1.1. 什么是 webpack

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

1.3. 在项目中安装 webpack

1.4. 在项目中配置 webpack

 1.4.1mode 的可选值

1.4.2 webpack.config.js 文件的作用

1.4.3 webpack 中的默认约定

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

2. webpack 中的插件

2.1.webpack 插件的作用

2.2. webpack-dev-server

2.2.1 安装 webpack-dev-server

2.2.2 配置 webpack-dev-server

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

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

2.3. html-webpack-plugin

2.3.1 安装 html-webpack-plugin

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

2.3.2 配置 html-webpack-plugin​编辑

2.3.3 解惑 html-webpack-plugin

2.4. devServer 节点

3. webpack 中的 loader 

3.1. loader 概述

3.2. loader 的调用过程​编辑 

3.3. 打包处理 css 文件

3.4. 打包处理 less 文件

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

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

3.6.1 安装 babel-loader 相关的包

3.6.2 配置 babel-loader

4. 打包发布 

4.1. 为什么要打包发布

4.2. 配置 webpack 的打包发布

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

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

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

5. Source Map

5.1. 生产环境遇到的问题

5.2. 什么是 Source Map

5.3. webpack 开发环境下的 Source Map

5.3.1 默认 Source Map 的问题

5.3.2 解决默认 Source Map 的问题

5.4. webpack 生产环境下的 Source Map

5.4.1 只定位行数不暴露源码

5.4.2 定位行数且暴露源码(实际开发中，为了安全性不推荐，也不要用)

 5.5.Source Map 的最佳实践

5.6. Webpack中@的原理和好处

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

总结：​编辑

---

1. webpack 中的插件 

1.1. 什么是 webpack

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

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

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前Vue，React 等前端项目，基本上都是基于webpack 进行工程化开发的。

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

① 新建项目空白目录，并运行npm init –y 命令，初始化包管理配置文件package.json

② 新建 src 源代码目录

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

④ 初始化首页基本的结构

⑤ 运行npm install jquery –S 命令，安装 jQuery

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

1.3. 在项目中安装 webpack

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

npm install webpack@5.42.1 webpack-cli@4.7.2 –D

-s是--save的简写

-D是--save-dev的简写

1.4. 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：（Development是开发时设定；production是产品发布时设定）

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下： ③ 在终端中运行npm run dev 命令，启动webpack 进行项目的打包构建

 1.4.1mode 的可选值

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

①  development

开发环境

不会 对打包生成的文 件 进 行 代 码压 缩 和 性 能优化

打包 速度快 ，适合在 开 发阶 段 使用

②  production

生产环境

会 对打包生成的文件 进 行 代 码 压 缩 和 性 能 优化

打包 速度很慢 ，仅适 合 在项 目 发布 阶 段 使用

1.4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

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

1.4.3 webpack 中的默认约定

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

① 默认的打包入口文件为 src -> index.js

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

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

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

在 webpack.config.js 配置文件中，通过entry 节点指定打包的入口。通过output 节点指定打包的出口。 示例代码如下：

2. webpack 中的插件

2.1.webpack 插件的作用

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

①  webpack-dev-server</