Webpack该怎么用，怎么知道该引入哪些插件？

Question

我刚开始想用Webpack打包HTML，结果折腾了好久，如下。

• 查了一圈发现是用这个插件：html-webpack-plugin；
• 然后发现HTML中<link>引用的外部CSS没打包出来，于是又查了应该用这个：style-ext-html-webpack-plugin；
• 结果这个插件好像Webpack 4.x不兼容，于是改用：mini-css-extract-plugin。

一开始没注意到文档说明还遇到版本兼容问题，也折腾半天：

我是初学者自学，折腾半天看各种plugin的文档终于弄好了。我想知道是我自己学习方法有问题？还是Webpack本来就是这么“混乱”？我如何知道那些plugin该怎么组合才好用？

Answer 1

其实没什么问题，现在前端工具体系已经非常庞大，功能丰富而又复杂，所以学习的时候不走一些弯路几乎是不可能的。这点任何语言都一样，学习语言本身很容易，但不够，必须理解并学会整个生态。

但我也不认为 webpack 本身是混乱的。因为技术环境本身就在飞速发展，作为底层工具的 webpack 也要不断进步。在演进过程当中有所取舍是必然的，无可厚非。而作为免费的开源产品，一个插件作者不想维护了，另一个插件作者站起来另起炉灶也是再正常不过的事情，作为普通使用者只有跟着学习和迁移。

所以，不是落花有意，也非流水无情，而是缘分未到呀。

当然我认为有更好的学习方法，就是学习别人的代码。比如在 Google 搜索 webpack.config.js site:github.com，可以看到很多别人的配置，然后在 Tools 里选择“Past month”（最近一个月），可以看到最新版本的各种内容，这样会更容易建立感性的认知。还有就是平时注意观察别人项目的构成，看到一个前端项目，就看下它的打包工具、babel 配置等等，找个小本本记起来，这样当你需要的时候，可以找到参考。

Answer 2

也不能说webpack混乱，版本升级的时候有时为了一些特性或者其他的考虑会对一些核心的东西进行大改，那么就可能导致周边的一些库、插件等等这些东西都要随之升级。想知道怎么组合可以网上搜一些教程，但可能都是比较老的，基于webpack2.x或3.x的，可以装对应版本进行参照学习。或者装下像vue-cli,create-react-app这类的脚手架，去看它们内置好的webpack配置，这也是一种学习方法，只不过通常内部会依赖比较多的loader和plugin，毕竟脚手架要满足大多数人的需求，所以东西可能比较多，不是那么容易理解。

Answer 3

我前阵子也是看得头疼。。。推荐一个让我看得不懵的webpack4教程webpack4

至于怎么知道该引入哪些插件主要看自己需要什么。。。像我一开始只用压缩时我没用webpack，我用的glup就单纯压缩html,css,js，后来发现glup压缩js总是看着不好看

$(_0x5620('0x3'))[_0x5620('0x4')]('overflow','visible'),$('html')[_0x5620('0x4')](_0x5620('0x5'),_0x5620('0xb')),

我看人家的都长这样

 function t(t) {
        for (var n, a, i = t[0], u = t[1], s = t[2], l = 0, d = []; l < i.length; l++)
            a = i[l],

然后我就开始捣鼓，后来看到用的webpack可以，然后就看各种网上教程找需要的功能。

Answer 4

你使用webpack的方式完全正确✅，这种工具都是提供一个框框，具体功能是各式各样的开发者实现的，开发者能力、精力、习惯各不相同，使用插件时候遇到的方式也很容易不一样。要么用已有的脚手架、 要么自己搭建脚手架、再要么自己写plugin，就是这么自由。

Answer 5

你的学习方法是正确的，我们去找plugin或者loader也是类似的方法，一层层找下去，不过webpack的大版本升级比较快，周边的plugin没有跟着更新，确实会导致不一致问题，稳定一定的话可以全用Webpack 3.x版本，周边插件基本处理稳定了。

Webpack4我也写过一篇改造传统多页网站的文章，你有兴趣可以看看Webpack4不求人系列