javascript - 不是很理解webpack的模块打包思想？

问题描述

正在通过webpack官方文档学习webpack；开始webpack是把所有资源当作模块来处理，并进行打包成bundle。看着还不错 很吸引人。

但是看到后面我对打包这个概念表示迷惑。

看到代码分离那里，说为了充分利用浏览器的并行加载和缓存机制，要把css和第三方库文件单独打包成一个bundle。

那结果不就是把常规的用标签引入资源，改成了用require的方式在js里显示的加载了吗？那么除了显示的声明了依赖以外，模块打包的优势是什么？

看到代码分离那个地方，我反而在想，既然要分开，那我为什么还要模块打包呢？

这个模块打包有什么好处吗？

问题解答

比如说，分离css那里。要先require把css引入，然后用插件单独打包成一个bundle，然后在html里用标签引入。

我为什么要多此一举，打包一下？直接像常规做法那样html里用标签引入不是更好吗？

模块化是为了写代码方便，打包是为了运行代码方便

另外webpack是可以分开打包的

如果你做SPA，或者如果你不使用scss，postcss，图片压缩，图片base64自动转换，手动插入CSS或者JS其实问题不算大。做一个vue多页面的项目，可能会体会到js或者css自动插入到html的便利之处了。

以前手动link方式引入css的时候，为了方便，我会将所有的css内容放在同一个文件中，否则又要加link，但是所有的css在一个文件，开发其实是不方便的。有的webpack之后，我可以让css文件尽量切分，从文件结构上就变得清晰

webpack的关于CSS的的好处，暂时就想到这么些