有时候可能会遇见这样的场景：模块A引用了模块B里的func1方法，而模块B又引用了模块A里的func2方法。 类似上面的场景，或者其它更复杂的如：A 引用 B，B 引用 C，C 又引用了 A，在不经意间可能会遇到一些诡异问题，如：明明代码没问题，却读不到导入的模块......

本系列文章将从 Webpack 的基础使用开始，循序渐进，最终构建一个完整的前端项目 。本系列文章适宜人群： 由于如今最常用的两个前端框架 react 和 vue 的脚手架都是基于 webpack 实现打包的，所以有很大一群人都使用着 Webpack 但对其并不是很了解。当遇到…

上一节我们解决了工程的开发调试问题，项目的生产和开发环境也已配置完成，还约定了 Webpack 配置文件规范。但它还很粗糙，这一节我们就来一起打磨这套配置。 在之前的配置中我们使用使用 MiniCssExtractPlugin.loader 来代替 style-loader ，…

本节就将通过使用 webpack-dev-server 来解决这个问题，并且在体验上会比以前更好，因为连刷新浏览器都不需要你做了。 在介绍 webpack-dev-server 之前，我们其实还有一种不完善的方法来处理开发环境调试的问题，那就是 Webpack 的 watch …

本节将在项目中加入 vue ，并使用单文件组件的方式进行后续开发。在这之前我们应该想到，.vue 文件是一种之前没有处理过的文件类型， Webpack 要解析它肯定需要使用其对应的 loader 。 我们能从 vue 文档的菜单中找到 vue-loader 文档，接下来就按照文…

上文使用 HtmlWebpackPlugin 生成了一个 index.html 文件，并且插件自动把打包后的资源添加到 index.html 文件中，使我们可以打开 index.html 在浏览器看到 js 的执行效果。本节我们将用 Webpack Loaders 来处理工作中…

上一节我有提到 Webpack 只能处理 Javascript 文件，这显然不能满足用户的日常使用需求，所以 Webpack 提供了 loader 和 plugins 两个配置选项，用于扩展 Webpack 的处理类型。本节要讲的 HtmlWebpackPlugin 就是专门用…