参考链接：https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html 全集链接 ➡️ webpack 易混淆知识点   webp

2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

最近突然想到一个问题，在webpack中我们添加plugin是以数组的形式添加的，那么如何保证这些插件的执行顺序呢，比如一个插件依赖需要等另一个插件改完，比如一个插件和另一个插件是可以并行的，于是从源码从去探析出了结果。 插件是webpack的支柱，webpack实际自身也是基…

在实际业务开发中，有可能遇到这样一种问题，因平台打包或者差异性等原因，提交给测试的包，我们需要确定是否为某一版本，这就要求我们的生成包中需要有一版本标记，并且这个版本标记在运行时是固定不变但在下次编译时是可变的，而且在打包编译生成时写入。 前端工程化，目前使用较多的为Webpa…

因为产品风格的统一性，需要抽象需要抽象一些css变量与方法，如下文件。

而关于如何应用该路径并没有说清楚... 这个最终静态资源访问路径在使用html-webpack-plugin打包后得到的html中可以看到。所以publicPath设置成相对路径后，相对路径是相对于build之后的index.html的，例如，如果设置publicPath: '…

下面通过例子来了解一下path、publicPath和contentBase的区别吧。 output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。…

所谓Tree-shaking就是‘摇’的意思，作用是把项目中没必要的模块全部抖掉，用于在不同的模块之间消除无用的代码，可列为性能优化的范畴。 Tree-shaking早期由rollup实现，后来webpack2也实现了Tree-shaking的功能，但是至今还不是很完备。至于为…

webpack 的特点之一是处理一切模块，我们可以将逻辑拆分到不同的文件中，然后通过模块化方案进行导出和引入。现在 ES6 的 Module 则是大家最常用的模块化方案，所以你一定写过 import './xxx' 或者 import 'something-in-nodemod…