这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

Webpack知识体系

什么是Webpack?

Webpack是基于模块化打包的⼯具: ⾃动化处理模块，webpack把⼀切当成模块，当 webpack 处理应⽤程序时，它会递归地构建⼀个依赖关系图 (dependency graph)，其中包含应⽤程序需要的每个模块，然后将所有这些模块打包成⼀个或多个 bundle。

核心流程

入口处理

依赖解析

资源解析

资源合并打包

使用Webpack

关于webpack的基本使用，基本都围绕配置展开，而这些配置大致可划为两类： 流程类：作用于流程中某个或若干个环节，直接影响打包效果的配置

工具类：主流程之外，提供更多工程化能力的配置项

安装

npm i -D webpack webpack-cli

编辑配置文件 webpack.config.js

module.exports = {
    entry: 'main.js',
    output:{
        filename:"[name].js",
        path:path.join(__dirname,"./dist")
    },
    module:{
        rules:[{
            test:/\.less$/i,
            use:['style-loader','css-loader','less-loader']
        }]
    }
}

在终端执行编译命令

npx webpack

工具类

开启tree-shaking： mode：production； optimization.useExports:true;

热模块更新 HMR，开启

module.exports = {
	devServer:{
		hot:true:}
}

启动：

npx webpack serve

其他的工具： 缓存、Sourcemap、性能监控、日志、代码压缩、分包

问题汇总

Loader有什么作用？为什么要用到css-loader、style-loader？？？ loader这里是用来转译过滤出来的文件的，在转译过程是需要调用对应的加载资源库， css-loader、style-loader就是在转译时所需要的库。

与旧时代相比，在html维护css相比，这种方式有什么优劣之处 显然在此时我们已经不需要再手动去维护HTML文件中的css代码了，这些多出来的冗余操作可以丢掉了。

有没有接触过less、sass、stylus这一类的css预编译框架？？如何在webpack中接入这些工具？？？

Babel具体有什么功能?

Babel 是一个 JavaScript 编译器，我们很多类型的代码文件单独拎出来其实是不能跑的。比如react中的JSX，react也是在脚手架中直接引入babel编译器，把JSX代码解析成JS代码。所以Babel就是把一些其他类型的代码编译成JS。

Babel与Webpack分别解决了什么问题?为何两者能协作到一起了?

Babel是来解析代码变成JS代码，webpack是用来打包压缩整合代码的工具。在webpack中有个东西叫loader，loader需要解析到很多代码文件，两者有同样的应用场景，因此用到出现babel-loader其实并不奇怪。

相比于手工维护HTML内容，这种自动生成的方式有什么优缺点

在传统项目中，每次对项目打包后我们都需要手动在index.html添加js的链接，当打包后的js入口文件名更改时，我们又需要再一次修改index.html中的js。 但是用自动生成的方式即可避免这种问题。

除了上面提到的内容，还有哪些配置可划分为“流程类”配置

工具类配置具体有什么作用？包括，‘devtool/cache/stat’

理解Loader

webpack只认识JS，为了处理非标准的JS资源，设计出资源翻译模块-loader，将资源翻译为标准JS

import styles from './a.less'

module:{
	rules:[{
		test:/\.less$/i,
		use:[
				"style-loader",
				"css-loader",
				"less-loader"
			]
}]
}

1.Loader输入是什么?要求的输出是什么?

Loader函数的输入是通过source参数输入，为执行的 loader 资源文件的内容。 Loader的输出是通过函数的返回值进行的，一般Loader 要做的事情就是将 source 转译为另一种形式的 output，也就是返回可模块化的内容。

2.Loader 的链式调用是什么意思?如何串联多个Loader?

Loader 之间按照配置的顺序从前到后(pitch)，再从后到前依次执行，从而形成一套内容转译工作流。，通过module属性中的use来按顺序配置loader。（注意这里是逆序）

3、 Loader中如何处理异步场景？？

1.调用 this.async 获取异步回调函数，此时 Webpack 会将该 Loader 标记为异步加载器，会挂起当前执行队列直到 callback 被触发；2.调用对应库将所需的资源转译为标准目标文件（比如例子中调用less库，转译成css）；3.调用异步回调 callback 返回处理结果