Webpack 使用方法2 | 青训营笔记

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

一、本节课重点内容

在我们学习完 Webpack 是什么之后，本节课将主要学习 Webpack 的部分使用方法，这节课的内容也可以帮助我们完成从理论到实践的过渡，学习能够通过代码展示与案例讲解，了解关于 Webpack 的具体使用方法。

课程重点内容，归纳总结如下所示：

1. 流程类配置
2. 处理 CSS
3. 接入 Bable
4. 生成 HTML
5. 使用 Webpack - 工具线

二、详细知识点介绍

问题:

• Loader有什么作用?
• 为什么这里需要用到css-loader、style loader
• 与旧时代在HTML文件中维护css相比，这种方式会有什么优劣处?
• 有没有接触过Less、Sass、Stylus 这一类CSS预编译框架?如何在Webpack接入这些工具?

使用Webpack一一接入Babel

思考题:

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

使用Webpack一一生成HTML 使用一个插件来进行生成（右上角的代码段） 思考题:

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

使用Webpack——工具线：

使用Webpack - HMR （Hot Module Replacement 模块热替换） 我们写的代码段，可以立即被运行到浏览器上，并且这个浏览器是不需要整个刷新的。

主要是需要这个npx webpack serve的配置项来进行运作。 这是最重要的一个配置项：devserve

在这里hot的值必须是true。

三、总结

loader是什么？ 是将一种形式的代码，通过逻辑转变成另一种形式的代码，转换后的代码webpack就能识别了。

Babel是什么？ 语法转换，通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块，可以进行源码转换 (codemods)。

webpack与babel：

1. webpack自身只打包js文件；
2. Babel 是一个 JavaScript 编译器，只做文件转义，不做文件整合；
3. webpack把所有文件都当成模块 (module)，但是webpack只懂js，所以loaders起到关键作用。webpack与babel通常是配合起来使用，webpack通过使用babel-loader使用Babel。