webpack 的基本使用 -

yixinhu

浏览: 32552 次
性别:
来自: 上海

最近访客更多访客>>

wangyy

u012363178

dyfxfxw520

源代码清单

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

webpack 的基本使用

博客分类：

Vue2+Vue3开发

一. 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节点下，表示只有开发的时候用到，打包不会包含

分享到：

JDK8流和lambda应用 | XML通过运行jar包转快速转实体

2021-08-20 16:59
浏览 573
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

webpack 的基本使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

webpack 的基本使用

评论

发表评论

相关推荐

最近访客更多访客>>