「万字解析」300行代码梳理webpack核心工作流源码，从工程化出发，真正搞懂webpack背后打包机制。带你走进webpack生态开发的世界，真正对应用webpack了然于胸。

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是秦爱德。😄 上篇文章，介绍了webpack的入门基础配置（传送门🚀🚀🚀）。那现在我们就来讲一讲如何通过优化配置项来提高我们的项目构建性能吧。 从项目实战角度出发，我们更关心的还是从项目开发到发布上线。所以优化项可以分为以下几个维…

webpack 打包优化并没有什么固定的模式，一般我们常见的优化就是拆包、分块、压缩等，并不是对每一个项目都适用，针对于特定项目，需要不断调试不断优化。 对于 webpack4，建议从零开始配置，在项目初期，使用 webpack4 默认的配置。 接下来，本篇文章会列出所有适用于…

webpack启动后会从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有Module.每找到一个Module,就会根据配置的Loader去找出对应的转换规则，对Module进行转换后，再解析出当前的Module依赖的Module.这些模块会以Entry…

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

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。 比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。 以上代码片段，摘自webpack配置的module.rule。 可以看出…

最近的项目中为了能够提升那么一丢丢性能，尝试了一下对 chunks 进行预加载处理。虽然做了异步加载的处理，但是项目大小决定了还是有多个异步的 chunk.js 需要进行预加载，这里我指的是 preload 与 prefetch。 这里推荐一个 GoogleChromeLabs…

执行结果可以看到 把 src 文件夹下的 index.js 文件打包到 dist 文件下的 bundle.js，这时就生成了 bundle.js 供 index.html 文件引用。那么打开index.html就可以看到完整的页面效果了 此时，基本的项目配置已经准备完成，只需要…

准备一份将VUE打包成DLL的webpack配置文件。 在build目录下新建一个文件webpack.vue.js，专门用于打包vue的DLL的。