不是很理解webpack的模块打包思想?

大伯格
  • 371

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

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

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

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

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

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

回复
阅读 2.2k
3 个回答

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

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

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

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

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

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

另外webpack是可以分开打包的

宣传栏