因为检测并加载了sourcemap，所以可以直接定位到编译前代码的特定位置。所以用一句话解释sourcemap很简单，就是一段维护了前后代码映射关系的json描述文件。但如果细究其内容，可以泡杯茶说一段故事了~ 在2009年google的一篇 文章 中，在介绍Cloure Co…

随着web开发变得越来越复杂，我们需要使用工具来帮助我们构建现代化网站。这是一个完整通过复杂webpack4配置的线上生产例子。 构建现代化网站已经成为自定义应用程序开发，网站期望能做的更多，具有传统应用的功能，而不仅仅是一个推广网站。 随着一个流程变得复杂时，我们就会将它分解…

总结Webpack4常见的配置, 含DEMO, 一步步肥肠详细，略长, 后续结束时候我们给出源码文件。 然后通过npx执行webpack进行打包。 或者配成一个script命令也可以。 在浏览器打开index.html就会发现代码执行成功了。 假设我们现在需要在index.js…

本文主要记录一下如何基于 Vue 开发组件，并在 npm 上发布。废话不多说，进入正题 好了，到这里准备工作做好了，我们可以开始开发组件了，接着上面的例子，下面开始开发一个 switch 组件。 写的比较简单，主要还是提供思路。用习惯了开源的组件自己总得了解一下嘛，有的时候在…

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

vue-cli, create-react-app、react-native-cli 等都是非常优秀的脚手架，通过脚手架，我们可以快速初始化一个项目，无需自己从零开始一步步配置，有效提升开发体验。尽管这些脚手架非常优秀，但是未必是符合我们的实际应用的，我们可以定制一个属于自己的…

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度,将包含大量复用模块且不会频繁更新的库进行编译，只需要编译一次，编译完成后存在指定的文件中。在之后的构建过程中不会再对这些模块进行编译，而是直接使用 D…

在老袁写这篇文章的时候，v5版本仍然处于早期阶段，可能仍然有问题。而且作为一个major版本，其中有一些breaking changes，可能会导致一些配置和插件不工作。但这并无妨碍我们去开始对changelog上的新特性进行尝鲜实战。大家如果遇到什么问题可以移步到这进行反馈。…

将静态资源文件（运行依赖包）与源文件分开打包，先使用DllPlugin给静态资源打包，再使用DllReferencePlugin让源文件引用资源文件。