”你负责开发，我负责打包”系列二

文章内容输出来源：拉勾大前端高薪训练营

- 资源模块加载

- webpack不仅仅是JS模块打包工具，它可以说是整个前端项目或前端工程的模块化打包工具

	- 也就是说，我们还可以通过webpack引入我们在前端项目中的任意类型的文件

- 尝试通过webpack打包我们项目的css文件

	- 添加文件: main.css

		- body {
margin: 0 auto,
padding: 0 20px,
max-width: 800px,
background: #f4f8fb,

}

	- 指定入口文件路径为main.css

		- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.css’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
}
}

	- 打包

		- yarn webpack

			- 报错: Module parse failed: Unexpected token
			- 原因: webpack内部默认只会去处理JS的文件。也就是说webpack会把打包过程中遇到的所有文件都当成JS文件去解析，而此时呢处理的是CSS文件,文件中内容是CSS代码，所以自然会报错。错误之后webpack也给出了相应的提示了。

				- 相应的提示: you may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

			- 解决

				- 安装css loader

					- yarn add css-loader --dev

				- webpack.config.js中添加对应配置

					- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.css’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.css$/,
// 用来指定test匹配到的文件需要使用的loader
use: ‘css-loader’
}
]
}
}

				- 打包

					- yarn webpack

						- OK~

					- serve  .

						- 样式未生效

							- 原因: html中未使用到这个样式
							- 解决

								- 安装style loader

									- yarn add style-loader --dev
									- 用于把css loader转换后的结果，通过style标签的形式追加到页面上

								- webpack.config.js中添加对应配置

									- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.css’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.css$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: [
‘style-loader’,
‘css-loader’
]
}
]
}
}

								- yarn webpack

									- Ok~

										- serve   .

											- Ok~

- Loader 是webpack实现整个前端模块化的核心。

	- 借助于loader就可以加载任何类型的资源

- 导入资源模块

- 通过以上的探索，我们确实可以把css文件作为打包入口。

	- 不过webpack的打包入口一般还是JS
	- 因为webpack的打包入口从某种程度上可以算是我们的运行入口
	- 目前而言前端应用当中的业务是由JS驱动的

- 把打包入口改为main.js

	- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.css$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: [
‘style-loader’,
‘css-loader’
]
}
]
}
}

- 修改main.js文件

	- import createHeading from './heading.js'

import ‘./main.css’
const heading= createHeading()

document.body.append(heading)

- 打包

	- yarn webpack

		- OK~

			- 启动应用: serve  .

				- OK: 样式可以正常工作。

- 为heading添加样式文件heading.css

	- .heading {
padding: 20px,
background: #343a40,
color: #fff

}

- 在heading.js中导入heading.css文件

	- import './heading.css'

export default () ⥤ {
const element = document.createElement(‘h2’)

element.textContent='hello world'
element.classList.add('heading')
element.addEventListener('click', () ⥤ {
   alert('Hello webpack')
})

return element

}
- 打包

		- yarn webpack

			- OK~

				- 启动应用: serve  .

					- OK: 样式可以正常工作。

- webpack建议我们在JS中载入css

	- 原因

		- 其实webpack不仅仅是建议我们在JS中引入css

			- 而是建议我们在编写代码过程当中去引入任何你当前这个代码所需要的资源文件。

				- 因为真正需要资源的不是应用而是此时你正在编写的代码

		- webpack哲学

			- 根据代码的需要动态导入资源

				- 是你JS中的代码需要某个资源才能正常工作

			- JS代码本身就是负责完成整个页面应用的，放大地看，JS驱动整个前端应用。

				- 而在实现业务功能的过程中可能需要样式，字体或图片等等一系列的资源文件。如果建立了这种依赖关系，一来逻辑比较合理，JS确实需要这些资源。二来，确保上线资源不缺失，都是必要的。

			- 题外思考🤔

				- 其实学习一个新事物，不是说学会她的所有用法你就能提高，因为这些东西照着文档谁都可以。

					- 关键是: 新事物的思想才是突破点。

						- 能够搞明白这些新事物为什么这样设计，基本上才算是出道了。

- 资源加载器:loader

- 目前webpack社区提供了非常多的资源加载器

	- 基本你能想到的所有合理需求都有对应loader

- 尝试一些非常有代表性loader

	- 文件资源加载器

		- 大多数加载器都类似于css-loader，都是讲资源模块转换为JS代码的实现方式去工作。

			- 但是还有一些我们经常用到的资源文件，比如像我们项目中的图片和字体，那么这些文件是没有办法通过JS的方式去表示的，对于这一类资源需要使用文件资源加载器，也就是file-loader

		- 如何工作的？

			- src目录下添加一张图片icon.png

				- 我们假设这张图片就是我们在去实现某个功能的时候所需要的资源。
				- 按照webpack思想，我们应该在用到这个资源的地方去通过import的方式去导入这张图片，让webpack去处理我们资源的加载。

			- 修改main.js

				- import createHeading from './heading.js'

import ‘./main.css’
import icon from ‘./icon.lng’
const heading= createHeading()

document.body.append(heading)

const img = new Image()
omg.src = icon

document.body.append(img)

			- 安装file-loader

				- yarn add file-loader --dev

			- 打包

				- yarn webpack

					- OK~

						- 启动应用: serve  .

							- OK: 样式可以正常工作。

			- 修改配置文件webpack.config.js

				- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: ‘file-loader’
}
]
}
}
- 打包

					- yarn webpack

						- OK~

							- 启动应用: serve  .

								- OK: 此时dist目录中会多出来一张图片

									- 这张图片就是刚刚我们在代码中导入的那张图片，不过文件名称发生了改变。不过文件名称改变的问题，后续会有介绍。
									- 在bundle.js中这张图片是怎么体现的？

										- 看最后一个模块

											- 展开这个模块，我们发现其实也特别简单，它就是把我们刚刚生成的那个文件名称导出出去了
											- 然后再回到我们的入口模块即第一个模块当中，里面直接使用了导出的文件路径，并没有任何复杂的地方。

									- serve  .

										- 问题:此时发现图片并不能正常的加载

											- 这里别慌，我们正常的反应是先打开开发人员工具去看一下。
											- 根据开发工具的显示我们发现，这里它是直接加载了我们根目录下的这张图片文件，而我们的网站根目录下并没有这个文件。这个文件应该是在网站根目录下的dist目录中。
											- 这个问题是由于我在这里演示的时候，我们的index.html并没有生成到dist目录，而是放在了项目根目录下，所以我就把项目的根目录作为了网站的根目录，而webpack会默认认为它所有打包的结果都会放在网站的根目录下面。所以就造成了此问题。

										- 解决方法

											- 通过配置文件去告诉webpack，你打包过后的文件最终在我们网站当中的位置
											- 具体做法

												- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: ‘file-loader’
}
]
}
}

											- 打包

												- yarn webpack

													- OK~

														- 启动应用: serve  .

															- OK: 可以正常工作。
															- 再仔细观察bundle.js文件

																- 找到图片所在的模块位置，那么这里的文件名前面拼接了一个变量p，这个变量p是由webpack内部的代码所提供的。这个变量的值就是我们刚刚设置的publicPath。

																	- 这也解释了为啥publicPath最后的斜线不能省略的原因

															- serve   .

																- 刷新页面

																	- 成功加载图片

		- 总结一下文件加载器的工作过程

			- webpack在打包时遇到了我们的资源文件
			- 然后根据配置文件中的配置，匹配到对应的文件加载器，此时文件加载器开始工作了。

				- 先是将我们导入的这个文件拷贝到输出的目录，然后再将我们的文件拷贝到输出目录的路径作为当前这个模块的返回值返回。那么对于我们的应用来说，所需要的这个资源就被发布出来了。那我们也可以通过模块的导出成员拿到这个文件的访问路径。

	- Data URLS 与 url-loader

		- 其实除了file-loader这种通过拷贝物理文件的形式去处理文件资源以外

			- 还有一种通过Data URL的形式去表示文件，这种方式呢也非常常见

		- Data URL是一种特殊的URL协议

			- 可以用来直接去表示一个文件
			- 我们传统URL要求服务器上有一个对应的文件，然后通过请求这个地址得到服务器上对应的文件
			- Data URL是一种当前URL就可以直接去表示文件内容的方式。

				- data:[<mediatype>][;base64],<data>

				  协议，媒体类型和编码，数据

					- 实例

						- data:text/html;charset=UTF-8,<h1>html content</h1>

					- 如果是图片或者字体这类无法直接通过文本去表示的二进制类型文件

						- 可以通过将文件的内容通过base64编码，以base64编码的结果也就是一个字符串去表示文件内容
						- 实例

							- data:image/png;base64,iVBOw0KGoAAAANSUhE...SuQmCC

								- 表示一个png类型的文件
								- 一般base64会比较长，但浏览器同样可以解析出来对应的文件

				- 这种URL当中的文本就已经包含了文件的内容

					- 所以在使用这种URL的时候就不会再去发送任何的http请求

				- 在webpack打包静态资源时我们同样可以以这种方式去实现

					- 通过Data URL，我们就可以代码的形式去表示任何类型的文件了

						- 我们需要用到一个专门的加载器

							- url-loader

		- 安装url-loader

			- yarn add url-loader --dev
			- 修改配置文件webpack.config.js

				- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: ‘url-loader’
}
]
}
}

			- 打包

				- yarn webpack

					- OK~
					- 此时dist目录没有单独的图片文件生成了
					- 看下bundle.js

						- 同样定位到文件当中最后一个模块

							- 此时这个模块导出的就不是一个文件路径，而是一个完整的Data URL
							- 由于这个Data URL已经包含了文件的内容

								- 所以我们就不需要单独的物理文件了

							- 复制Data URL

								- 浏览器中访问

									- OK~

					- serve  .

						- OK~
						- Data URL这种方式非常适合我们项目当中体积比较小的资源

							- 因为如果体积过大的话就会造成我们的打包结果非常大，从而造成我们的运行速度

		- 最佳实践

			- 小文件使用Data URLs, 减少请求次数

				- 用url-loader

			- 大文件单独提取存放，提高加载速度

				- 用file-loader

			- 配置实现

				- 修改配置文件webpack.config.js

					- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: {
loader: ‘url-loader’,
options: {
limit: 10 * 1024, // 10KB，url-loader只将10KB以下的文件转换为Data URL形式，超过此大小的仍然交给file-loader完成加载
}
}
}
]
}
}

				- 打包

					- yarn webpack

						- OK~
						- 超出10KB的文件会单独存放
						- 小于10KB的文件转换为Data URLs嵌入代码中
						- 特别需要注意

							- 要实现此最佳实践，必须安装file-loader。尽管配置文件webpack.config.js中并未对其进行配置。

								- 因为url-loader实现内部用到了file-loader

- 常用加载器分类

	- webpack中的资源加载器有点像我们生活中工厂里的生产车间

		- 它是用来处理和加工我们打包过程当中所遇到的资源文件

	- 除了以上所述的加载器，社区当中还有很多其他的加载器

		- 对于常用的loader我们后续基本都会用到
		- 在此之前，为了更好的去了解他它们，将它们大致分为三类

	- 三大类loader

		- 编译转换类的加载器

			- 此类loader会把加载到的资源模块转换为JS代码

				- 例如

					- css-loader

						- 将css代码转换为了 以JS形式工作的CSS模块

		- 文件操作类型的加载器

			- 通常文件操作类型的加载器会将加载到的资源模块拷贝到输出目录

				- 同时又将这个文件的访问路径向外导出

					- 例如

						- file-loader

							- 是非常典型的文件操作类型加载器

		- 代码质量检查的加载器

			- 就是对加载到的资源文件一般是代码去进行检验的一种加载器
			- 这种类型的加载器是为了统一代码风格，从而提高代码质量
			- 这种类型的加载器一般不会修改生产环境的代码
			- 例如: es-loader

- 处理ES2015

- 由于webpack默认就能处理代码中的import和export,所以有人会认为webpack会自动编译ES6的代码。

	- 实则不然，webpack仅仅是对模块去完成打包工作。

		- 所以webpack才会去对代码中的import,export做一些相应的转换
		- 除此之外，webpack并不能去转换代码中的其他的ES6特性

- 尝试

	- 打包

		- yarn webpack

			- OK~
			- 找到bundle.js

				- 折叠代码找到模块

					- 此时模块当中使用的const和箭头函数之类的ES6新特性并未被webpack额外处理

- 如果我们需要webpack在打包过程中同时处理其他ES6新特性的转换

	- 我们需要为JS文件配置一个额外的编译型loader

		- 例如最常见的就是babel-loader

	- 安装依赖

		- yarn add babel-loader @babel/core @babel/preset-env --dev

	- 修改配置文件webpack.config.js

		- 此时babel-loader会取代默认的加载器，在打包过程当中帮我们处理代码中的一些ES6新特性了
		- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 123: …' }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: [
‘style-loader’,
‘css-loader’
]
},
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.png$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: ‘url-loader’
}
]
}
}
- yarn webpack

			- OK~
			- 回到bundle.js

				- 折叠代码找到模块

					- 发现ES6新特性依然未被转换
					- 未转换原因: babel严格意义上说，只是转换JS代码的一个平台，我们需要基于babel这个平台去通过不同的插件来去转换代码中的一些具体的特性
					- 所以需要为babel配置它所需要使用的插件

						- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.jsKaTeX parse error: Expected 'EOF', got '}' at position 282: …} }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: [
‘style-loader’,
‘css-loader’
]
},
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.png$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: ‘url-loader’
}
]
}
}
- 重新打包: yarn webpack

							- OK:再次找到生成的代码，此时ES2015新特性的代码都已经被成功转换。

- 总结

	- Webpack只是打包工具，不会去处理ES6+的新特性代码
	- 加载器可以用来编译转换代码

- 模块加载方式

- 除了代码中的import可以触发模块的加载，webpack中还提供了其他几种方式
- 具体是

	- 遵循ES Modules标准的import声明

		- import createHeading from './heading.js'

import ‘./main.css’
const heading= createHeading()

document.body.append(heading)

	- 遵循CommonJS标准的require函数

		- const createHeading = require( './heading.js')

require( ‘./main.css’)
const heading= createHeading()

document.body.append(heading)
- 如果通过require的方式去载入一个ES Modules模块的话

			- 那么需要注意，对于ES Module的默认导出我们需要通过导入也就是require函数导入结果的default属性去获取

				- const createHeading = require( './heading.js').default

require( ‘./main.css’)
const heading= createHeading()

document.body.append(heading)

	- 遵循AMD标准的define函数和require函数

		- define(['./heading.js','./icon.png', './main.css'], (createHeading, icon)⥤{ 
const heading = createHeading.default()
const img = new Image()
img.src = icon
document.body.append( heading) 
document.body.append(img)

})

require([’./heading.js’，’./icon.png’，*./main.css’],(createHeading,icon)⥤ {
const heading = createHeading.default() const img = new Image()
img.src = icon
document.body.append(heading)
document.body.append(img)
})

	- 除了以上三种模块加载标准外，还有一些独立的加载器Loader在工作时也会去处理我们所加载到的资源当中的一些导入的模块

		- 例如css-loader加载的css文件，在这样的文件当中的@import指令和url函数
		- HTML代码中图片标签的src属性
		- 试验

			- 在样式文件中导入资源模块

				- main.js

					- import createHeading from './heading.js'

import ‘./main.css’
const heading= createHeading()

document.body.append(heading)

				- main.css

					- body {
min-height: 100vh,
background: #f4f8fb,
background-image: url(background.png),
background-size: cover,

}

				- 打包

					- yarn webpack

						- OK~
						- serve  .

							- OK~

				- reset.css

					- * {
  margin: 0,
  padding: 0,

}

				- 修改main.css

					- import url(reset.css)

body {
min-height: 100vh,
background: #f4f8fb,
background-image: url(background.png),
background-size: cover,
}

				- 打包

					- yarn webpack

						- OK~
						- serve  .

							- OK~

				- footer.html

					- <footer>

				- 修改main.js

					- import createHeading from './heading.js'

import ‘./main.css’
import footerHtml from ‘./footer.html’
const heading= createHeading()

document.body.append(heading)
document.write(footerHtml)

						- 

				- yarn add html-loader --dev
				- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: {
loader: ‘url-loader’,
options: {
limit: 10 * 1024, // 10KB，url-loader只将10KB以下的文件转换为Data URL形式，超过此大小的仍然交给file-loader完成加载
}
}
} ,
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.html$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: {
loader: ‘html-loader’
}
}
]
}
}
- 打包

					- yarn webpack

						- OK~
						- serve  .

							- OK~

				- 修改footer.html

					- <footer>

down load png

- 打包

						- yarn webpack

							- OK~
							- serve  .

								- 问题: 点击a标签找不到对应的资源文件
								- 解决

									- const path = require ('path')

module.exports = {
mode: ‘none’,
// 指定webpack打包的入口路径，指定相对路径时，’./'不能省略
entry: ‘./src/main.js’,
// 设置输出文件的位置
output: {
// 设置输出文件名称
filename: ‘bundle.js’,
// 指定输出文件所在目录，不可使用相对路径
path: path.join(__dirname,‘output’)
// 默认值是个空字符串:代表网站的根目录。这里的/线不能省略
publicPath: ‘dist/’,
},
module: {
// 针对于其他资源模块的加载规则的配置
rules: [
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.cssKaTeX parse error: Expected 'EOF', got '}' at position 198: …] }̲, …/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: {
loader: ‘url-loader’,
options: {
limit: 10 * 1024, // 10KB，url-loader只将10KB以下的文件转换为Data URL形式，超过此大小的仍然交给file-loader完成加载
}
}
} ,
// 每个规则对象都需要配置两个属性: test和use
{
// 正则表达式，用于匹配我们在打包过程中所遇到的文件路径
test: /.html$/,
// 用来指定test匹配到的文件需要使用的loader，配置多个loader时执行顺序是从后往前执行
use: {
loader: ‘html-loader’,
options: {
attrs: [‘img:src’, ‘a:href’]
}
}
}
]
}
}
- 打包

										- yarn webpack

											- OK~
											- serve  .

												- OK~

- 经验

	- 换句话说webpack兼容多种模块化标准，但是除非必要，否则一定不要在在项目中混合使用这些标准。

		- 如果混合使用，会大大降低项目的可维护性
		- 每个项目只需要统一去使用一个独立的标准即可