webpack的基础，看懂webpack如何编译bundle everything

Posted 2023-04-04

参考技术A 这篇文章简单概述webpack构建编译各种资源的通天本领，帮大家简单理解webpack如何强大到编译各种资源（es6/es7、jsx、vue、less、scss、image...）。

webpack天生支持有且只支持以下模块打包编译

糟糕，我们发现它只能读懂 .js、.json文件 。没有看到它支持 jsx、TypeScript 或者我们经常写的 sass、less样式 等的编译处理啊！比如less样式写法并不是原生css支持的，所以他怎么处理非原生模块的语法并进行模块化？

没错，就是用这些装载器把这些非原生样式语法写法转成单纯原生的css规则： index.less => index.css ，现在通过这些loader的编译转换，浏览器可以读懂了。

那么还有哪些常用的loader？

以babel-loader为例，为什么需要它。

例如我们开发中常写的 es6、es7、n... ，所以需要 babel 来编译进行转换为ES5兼容的语法。

对于语法转换，往更深层次的奥义，就是涉及babel原理， AST语法树 ，一般loader都会经过3个步骤：

篇幅概念性太强，请看总结。

参考：

略微讲讲最近的 webpack 该如何加快编译

首先假设 基础的环境是有 creat-react-app 所创建的
即所有基础的loader,插件的 cache 都已经缓存了
在这种情况下想加速,真是很难

不过,有一个插件是可以观察 各个模块所花的时间的:speed-measure-webpack-plugin,他给了我们一个观察点

有很多文章都会说 happypack 有能加速的效果
但是经过我的实际测试,效果不明显甚至无效
他的 bug 也很多,很多 loader 都无法会出现报错,如果没有时间和对于 webpack 的了解,就不要用了

node 升级

有一项是比较有用的即升级 node ,不得不说这是一种有效的方法

alias

项目文件多的可以多使用这个 ,对于打包有一定速度的提升

DLL & DllReference

这个方法至今仍然是最有效的方法,不过配置稍微麻烦了点 但是不能支持 preload-webpack-plugin 需要手动写,或者自己写一个插件

fast-sass-loader

代替sass-loader,据说是有效的,但是我暂未尝试