内容来源 - webpack中文文档
总结一下，学了几次，记录一下！

问题区域

如何使用其他库，如threejs？

基本安装

创建基本环境

接着安装 webpack-cli（此工具用于在命令行中运行 webpack）

mkdir webpack-demo
cd webpack-demo
npm init -y // package.json
npm install webpack webpack-cli --save-dev // node_modules

创建文件

index.html // 写入内容 - 引入lodash + 引入index.js
src
- index.js // 添加一个div？？？

修改package.json

以便确保我们安装包是 private(私有的)
并且移除 main 入口。这可以防止意外发布你的代码。

创建一个bundle

目录结构

dist
- index.html // 这里应该自动生成
index.html
src
- index.js

添加lodash打包依赖

npm install --save lodash

1
2
3

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。
如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），
你应该使用 npm install --save-dev。更多信息请查看 npm 文档。

执行 npx webpack

// 这之前还修改了dist - index.html文件 - 引入main.js
在dist里面输出了main.js

使用一个配置文件

webpack.config.js - 创建 - 输入命令

1
2

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。
我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用的。

npm scripts

“build”: “webpack”

可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。

基本使用完成

总结：
可以运行起来了🤣

在dist文件里面的index.html 可以出现 hello webpack
以上使用了lodash，然后生成了dist文件

管理资源

管理资源 - 官方文档

比如 images

初始配置

修改

dist/index.html // 引入bundle.js
webpack.config.js // 输出文件名为 bundle.js

加载 CSS

npm install --save-dev style-loader css-loader

多了以下资源

“css-loader”: “^6.6.0”,
“style-loader”: “^3.3.1”,

在webpack.config.js
配置modules，用来加载以上资源

module: {
		rules: [
			{
				test: /\.css$/i, // 所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。
				use: ['style-loader', 'css-loader'],
			}
		]
	}

模块 loader 可以链式调用。链中的每个 loader 都将对资源进行转换。
链会逆序执行。第一个 loader 将其结果（被转换后的资源）传递给下一个 loader，
依此类推。最后，webpack 期望链中的最后的 loader 返回 JavaScript。

应保证 loader 的先后顺序

在src文件下，添加style.css
在src文件下，index.js中引入style.css，并给元素添加样式

运行文件 - npm run build

运行后 - 出现红色Hello webpack🌈

可以在head里面查看到样式文件

注意，在多数情况下，你也可以进行压缩 CSS，以便在生产环境中节省加载时间。
最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 风格 - postcss, sass 和 less 等。🎵🎵🎵

加载 images 图像

现在我们正在下载 CSS，但是像 background 和 icon 这样的图像，要如何处理呢？
在 webpack 5 中，可以使用内置的 Asset Modules

在webpack.config.js
配置module的rules

作用 - 替换路径

在使用 css-loader 时，如前所示，会使用类似过程处理你的 CSS 中的 url('./my-image.png')。
loader 会识别这是一个本地文件，并将 './my-image.png' 路径，
替换为 output 目录中图像的最终路径。而 html-loader 以相同的方式处理 <img src="./my-image.png" />。
{
	test: /\.(png|svg|jpg|jpeg|gif)$/i,
	type: 'asset/resource',
}

在src文件下，放入图片
在src/index.js，引入图片import Icon from './icon.png'; // img标签
通过js添加到 div中

在src/style.css 添加background: url('./icon.png'); // 属性背景

重新构建

可以看到图片，图片名字也被处理过了！✌

加载 fonts 字体

字体来了！

还是修改modelu里面的rules

type: 'asset/resource'
使用 Asset Modules 可以接收并加载任何文件，然后将其输出到构建目录。
这就是说，我们可以将它们用于任何类型的文件，也包括字体。

这样可行！
src: url('./PangMenZhengDaoXiXianTi-2.ttf') format('woff2');

在css中通过@font-face 声明将其混合，本地的 url(…) 指令会被 webpack 获取处理
然后添加到样式里

可以出现！

加载数据

可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。
JSON 支持实际上是内置的，也就是说 import Data from ‘./data.json’ 默认将正常运行。

要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。、

npm install --save-dev csv-loader xml-loader

然后配置module的rules
使用use

定义文件 - 到js中引入 + 使用

可行！！！

自定义 JSON 模块 parser

通过使用自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。

npm install toml yamljs json5 --save-dev

定义文件 + module rules添加 + js中引入 + 打包

全局资源

上述所有内容中最出色之处在于，以这种方式加载资源，你可以以更直观的方式将模块和资源组合在一起。
无需依赖于含有全部资源的 /assets 目录，而是将资源与代码组合在一起使用。

这种配置方式会使你的代码更具备可移植性 - 原来如此！🍗🍗🍗

假如你想在另一个项目中使用 /my-component，只需将其复制或移动到 /components 目录下。

总结：
定义文件 + module rules添加 + js中引入 + 打包

管理输出

待续！