webpack基本使用

一、webpack的基本使用

1. 什么是webpack

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

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

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

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

2. 在项目中安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D
webpack是开发时依赖所以后面加-D 就是–save-dev

3. 在项目中配置webpack

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

module.exports = {
  mode: 'development'
}

mode有两个选项
development：开发模式
production：生产模式 部署上线

二者区别：
开发时用development这样打包速度块
发布时用production，因为追求的是体积而不是速度

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

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

script节点下的脚本，可以通过npm run 执行。例如npm run dev

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

4.1 webpack.config.js 文件的作用

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

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

4.2 webpack 中的默认约定

在webpakc 4.x和5.x的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js

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

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

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

const path = require('path')  // 导入 node.js 中专门操作路劲的模块

module.exports = {
  entry: path.join(__dirname, './src/index.js'),   // 打包入口文件的路径
  output: {
	path: path.join(__dirname, './dist'),  // 输出文件的存放路径
	filename: 'bundle.js'  // 输出文件的名称
  }
}

二、webpack 中的插件

1. webpack插件的作用

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

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

② html-webpack-plugin

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

2.1 安装webpack-dev-server

npm i webpack-dev-server@3.11.2 -D

2.2 配置 webpack-dev-server

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

"scripts": {
  "dev":  "webpack serve"	// script 节点下的脚本，可以通过 npm run 执行
}

② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080地址，查看自动打包效果

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

3.1 安装 html-webpack-plugin

npm i html-webpack-plugin@5.3.2 -D

3.2 配置 html-webpack-plugin

// 1. 导入HTML插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
  template: './src/index.html',   // 指定原文件的存放路径
  filename: './index.html'        // 指定生成文件的存放路径
})

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

4. devServer 节点

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

devServer: {
  open: true,				// 初次打包完成后，自动打开浏览器
  host: '127.0.0.1',	// 实时打包所使用的主机地址
  // 在 http 协议中，如果端口号是 80，则可以被省略
  port: 80					// 实时打包所使用的端口号
}

三、webpack中的loader

1. loader 概述

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

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

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

2. 打包处理css文件

① 运行 npm install style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装CSS的loader
② 在webpage.config.js的module -> rules数组中，添加loader规则如下：

	module: {			// 所以第三方文件模块的匹配规范
	 rules: [			// 文件后缀名的匹配规则
	   { test: /\.css$/, use: ['style-loader', 'css-loader'] }
	  ]
	}

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

• use数组中指定的loader顺序是固定的
• 多个loader的调用顺序是：从后往前调用

3. 打包处理less文件

① 运行 npm install less-loader@10.0.1 less@4.1.1 -D 命令
② 在webpage.config.js的module -> rules数组中，添加loader规则如下：

	module: {			// 所以第三方文件模块的匹配规范
	 rules: [			// 文件后缀名的匹配规则
	   { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
	  ]
	}

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

① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
  rules: [
	{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' },
  ]
}

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

• limit 用来指定图片的大小，单位是字节（byte）
• 只有 <= limit 大小的图片，才会被转为 base64 格式的图片

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

webpack 只能打包处理一部分高级的JavaScript语法。对于webpack无法处理的高级js语法，需要借助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

// 1. 定义了名为 info 的装饰器
function info(target) {
  // 2. 为目标添加静态属性 info
  target.info = 'Person info'
}

// 3. 为 Person 类应用 info 装饰器
@info
class Person {}

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

5.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 规则如下：

// 注意：必须使用 exclude 指定排除项：新名 node_modules 目录下的第三方包不需要被打包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

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

module.exports = {
  // 声明 babel 可用的插件
  plugins: [[ '@babel/plugin-proposal-decorators', { legacy: true } ]]
}

四、打包发布

1. 配置 webpack 的打包发布

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

"scripts": {
  "dev": "webpack serve",		// 开发环境中，运行 dev 命令
  "build": "webpack --mode production"		// 项目发布时，运行 build 命令
}

–model 是一个参数项，用来指定webpack的运行模式。production 代表生成环境，会对打包生成的文件进行代码压缩和性能优化。

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

2. 把图片文件同意生成到image目录中

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

{
  test: /\.jpg|png|gif$/,
  use: {
	loader: 'url-loader',
	options: {
		limit: 22228,
		// 明确指定要把打包生成的图片文件，存储到 dist 目录下的 image 文件夹中
		optputPath: 'image'	
	}
  }
}

第二种写法（推荐）

  // 在配置 url-loader 的时候，多个参数之间，使用 & 符号进行分割
  { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&optputPath=images' }

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

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

// 1. 安装清理 dist 目录的 webpack 插件
npm install clean-webpack-plugin@3.0.0 -D

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

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

五、Source Map

1. 什么是 Source Map

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

2. 默认 Source Map 的问题

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

3. 解决默认 Soucre Map 的问题

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

module.exports = {
  mode: 'development',
  // eval-source-map 仅限在"开发模式"下使用，不建议在"生产模式"下使用
  // 此选项生成的 Source Map 能够保证"运行时报错的行数"与"源代码的行数"保持一致
  devtool: 'eval-source-map',
}

4. webpack 生产环境下的 Source Map

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

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

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

6. Source Map 的最佳实践

① 开发环境下：

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

② 生产环境下：

• 建议关闭Source Map 或将 devtool 的值设置为 nosources-source-map
• 好处：防止源码泄露，提高网站的安全性