关于 webpack4 的 14 个知识点，童叟无欺

没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。     

最近工作中用到了nuxt,才发现，如果 webpack 学的 6，nuxt 基本不需要学习，没什么学习成本的。因此，这篇重新记录下 webpack4 的一些基础知识点，下一篇将会配置一个优化到极致的react脚手架, 也希望大家能够持续关注，配置 webpack 就是优化优化再优化，哈哈~

已经发布了 webpack4的30个步骤打造优化到极致的react开发环境，如约而至, 点击这里

酒壮怂人胆，我学这个的办法基本就分 3 步：

1. 首先，将这些必要的配置，以及某些 loader,某些插件，像语文课文一样默读，并背诵(这一步最重要)

2. 动手去实践，去试错

3. 理解其原理

好了，正式开始。

前言

Webpack 可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript 等），并将其打包为合适的格式以供浏览器使用。

WebPack 和 Grunt 以及 Gulp 相比有什么特性

其实 Webpack 和另外两个并没有太多的可比性，Gulp/Grunt 是一种能够优化前端的开发流程的工具，而 WebPack 是一种模块化的解决方案，不过 Webpack 的优点使得 Webpack 在很多场景下可以替代 Gulp/Grunt 类的工具。

1. Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。

2. Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。

3. Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。

4. Loader：模块转换器，用于把模块原内容按照需求转换成新内容。

5. Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。

6. Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

1. 从 0 开始配置结构

• 初始化项目结构

2. 配置 webpack.config.js

• 在项目根目录新建 webpack.config.js

3. 配置开发服务器

4. 打包 js

5. 支持 ES6,react,vue

6. 处理 css,sass,以及 css3 属性前缀

处理 css

动态卸载和加载CSS

style-loader为 css 对象提供了use()和unuse()两种方法可以用来加载和卸载css

比如实现一个点击切换颜色的需求，修改index.js

处理 sass

提取 css 文件为单独文件

7.产出 html

8. 处理引用的第三方库,暴露全局变量

webpack.ProvidePlugin 参数是键值对形式，键就是我们项目中使用的变量名，值就是键所指向的库

9. code splitting、懒加载(按需加载)

说白了就是在需要的时候在进行加载，比如一个场景，点击按钮才加载某个js.

10. JS Tree Shaking

11. 图片处理

12. Clean Plugin and Watch Mode

清空目录，文件有改动就重新打包

13. 区分环境变量

14. 开发模式与webpack-dev-server,proxy

到这里基本就结束了,觉得有帮助,不妨点个赞,不足之处，还望斧正~

作者：张不怂

https://juejin.im/post/5cea1e1ae51d4510664d1652

往期精文

欢迎关注以下公众号 全栈修炼，学到不一样的武功秘籍 ！

关注公众号并回复 福利 可领取免费学习资料，福利详情请猛戳： 免费资源获取--Python、Java、Linux、Go、node、vue、react、javaScript