webpack 的基本使用

一. webpack 的基本使用

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

     2. 新建 src 源代码目录

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

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

     5. 在项目中安装 webpack

// 在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D

     6. 在项目中配置 webpack

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

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

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

scripts: {
	"dev": "webpack"
}

          6.3. 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

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

                6.4.1. development

                     ⚫ 开发环境

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

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

               6.4.2. production

                     ⚫ 生产环境

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

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

 

     7. webpack.config.js 文件的作用

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

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

 

     8. webpack 中的默认约定

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

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

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

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

 

     9. 自定义打包的入口与出口

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

          示例代码如下：

// 导入 node.js中专门操作路径的模块
const path = require('path')
// 使用 Node.js 中的导出语法，向外导出一个 webpack 的配置对象
module.exports = {
	// entry: '指定要处理哪个文件'
	entry: path.join(__dirname, './src/index1.js'),
	// 指定生成的文件要存放到哪里
	output: {
		// 存放的目录
		path: path.join(__dirname, 'dist'),
		// 生成的文件名
		filename: 'js/bundle.js'
	}
}

 

 

二. webpack 插件

     1. webpack 插件的作用

          1.1. webpack-dev-server

               ⚫ 类似于 node.js 阶段用到的 nodemon 工具

               ⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建

 

           1.2. html-webpack-plugin 将src目录下的主入口文件复制一份到src同级

               ⚫ webpack 中的 HTML 插件（类似于一个模板引擎插件）

               ⚫ 可以通过此插件自定制 index.html 页面的内容

 

     2. webpack-dev-server

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

          2.1.安装 webpack-dev-server

npm install webpack-dev-server@3.11.2 -D

          2.2.配置 webpack-dev-server

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

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

        再次运行 npm run dev 命令，重新进行项目的打包

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

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

 

        2.3.打包生成的文件区别

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

                      ⚫ 严格遵守开发者在 webpack.config.js 中指定配置

                      ⚫ 根据 output 节点指定路径进行存放

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

                      ⚫ 不再根据 output 节点指定的路径，存放到实际的物理磁盘上

                      ⚫ 提高了实时打包输出的性能，

 

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

               ⚫ 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件

               ⚫ 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

 

     3. html-webpack-plugin

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

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

          3.1. 在项目中安装此插件

npm install html-webpack-plugin@5.3.2 -D

          3.2. 配置 html-webpack-plugin

// 导入 html-webpack-plugin 这个插件，得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
// new 构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({

	// 指定要复制哪个页面
	template: './src/index.html',
	// 指定复制出来的文件名和存放路径
	filename: './index.html'
})

module.exports = {
	mode: 'development',
	// 通过 plugins 节点，使 htmlPlugin 插件生效
	plugins: [htmlPlugin]
}

          3.3. 解惑 html-webpack-plugin

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

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

 

     4. devServer 节点

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

示例代码如下：
devServer: {
	// 首次打包成功后，自动打开浏览器
	open: true,
	// 在 http 协议中，如果端口号是 80，则可以被省略
	port: 80,
	// 指定运行的主机地址
	host: '127.0.0.1'
}
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

三. webpack中的Loader

     说明：在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！

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

          ⚫ css-loader 可以打包处理 .css 相关的文件

          ⚫ less-loader 可以打包处理 .less 相关的文件

          ⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

     

     执行原理

           1.webpack默认打包只能处理.js后缀结尾的文件，处理不了其他后缀结尾的文件

           2.由于代码中包含了xxx.css的文件，webpack默认是处理不了的

           3.当webpack发现处理不了，会查找webpack.config.js这个文件，看 module.rules 数组中，是否配置了对应对 loader 加载器

           4.webpack将xxx.css转交给最后的loader进行处理

           5.当css.loader处理完成后，会将处理完的结果转交给下一个sytle.loader

           6.当style.loader处理完成，发现没有下一个loader，将处理结果转交给webpack

           7.webpack把 style.loader 处理结果，合并到/dist/bundle.js中，最终生成打包好的文件

 

     1. 打包处理 css 文件

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

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

test表示匹配规则，/\.转义，css$结尾的规则才使用 use 那些加载器
module.exports = {
	rules: [
		// 处理 .css 文件的 loader 
		{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
	]
}

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

     注意：

          ⚫ use 数组中指定的 loader 顺序是固定的

          ⚫ 多个 loader 的调用顺序是：从后往前调用

 

     2. 打包处理 less 文件

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

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

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

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

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

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

module.exports = {
	rules: [
	  // 处理图片文件的 loader
	  // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个loader，则必须指定数组
	  // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分隔
	  { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }
	]
}

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

          ⚫ limit 用来指定图片的大小，单位是字节（byte）

          ⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

 

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

          4.1 webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。

例如 webpack 无法处理下面的 JavaScript 代码：
// 定义了名为 info 的装饰器
function info(target){
	// 为目标添加静态属性 info
	target.info = "Person info"
}
// 为 Person 类应用 info 装饰器
@info
class Person{}

// 打印 Person 的静态属性 info
console.log(Person.info)

     4.2. 解决方案：安装 babel-loader 相关的包

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

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

// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可；一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性，不需要程序员关心
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}

     4.4. 配置 babel-loader

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

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

四. webpack打包发布

     1. 为什么要打包发布

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

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

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

 

     2. 配置 webpack 的打包发布

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

 

 

scripts": {
	"dev": "webpack serve", // 开发环境中，运行 dev 命令
	"build": "webpack --mode production" // 项目发布时，运行 build 命令
}
--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项 

 

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

 

在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
output: {
	path: path.join(__dirname, 'dist'),
	// 明确告诉 webpack 把生成的 bundle.js 文件存到 dist目录下的 js 子目录中
	filename: 'js/bundle.js'
}

 

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

 

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
{
	test: /\.jpg|png|gif$/, 
	use: 'url-loader',
	options:{
		limit: 22229,
		// 明确指定把打包生成的图片文件，存储到 dist 目录下的 image 文件夹中
		outputPath: 'image'
	}
}

 

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

 

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

// 导入插件，得到插件的构造函数之后，创建插件的实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

// 把创建的 cleanPlugin 插件实例对象，挂载到 plugin 节点中
plugins: [htmlPlugin, cleanPlugin] // 挂载插件

 

五. Source Map使用

     1. 生产环境遇到的问题

     前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情

 

     2. 什么是 Source Map

     Source Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

 

     3. webpack 开发环境下的 Source Map

     在开发环境下，webpack 默认启用了 Source Map 功能。当程序运行出错时，可以直接在控制台提示错误行的位置，并定位到具体的源代码：

          3.1. 默认 Source Map 的问题

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

 

          3.2. 解决默认 Source Map 的问题

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

module.exports = {
	mode: 'development',
	// eval-source-map 仅限在 “开发模式” 下使用，不建议在 “生成环境” 下使用
	// 此选项生成的 Source Map 能够保证 “运行时报错的行数” 与 “源代码的行数” 保持一致
	// 在实际发布的时候，建议大家把 devtool 的值设置为 nosources-source-map 或直接关闭 SourceMap
	devtool: 'eval-source-map'
}

          3.3. webpack 生产环境下的 Source Map

          在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人

 

          3.4. 只定位行数不暴露源码

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

 

          3.5. 定位行数且暴露源码ss

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

          采用此选项后：你应该将你的服务器配置为，不允许普通用户访问 source map 文件！

 

          3.6. Source Map 的最佳实践

               3.6.1. 开发环境下：

                    ⚫ 建议把 devtool 的值设置为 eval-source-map

                    ⚫ 好处：可以精准定位到具体的错误行

               3.6.2. 生产环境下：

                    ⚫ 建议关闭 Source Map 或将 devtool 的值设置为 nosources-source-map

                    ⚫ 好处：防止源码泄露，s's's提高网站的安全性

 

     命令行简写说明：

     -S 安装组件到package.json中的dependencies节点下，表示打包和开发需要用到的组件，打包后包含该节点下的组件。

     -D 安装组件到package.json中的devDependencies节点下，表示只有开发的时候用到，打包不会包含