莫得盐

本文所讲述的微前端区别于广泛认知的微前端定义，它不兼容不同技术栈（微前端的简单实现），为了区分我称之为同构微前端。相比之下，同构微前端降低复杂度的同时，又避免了多个框架、组件库导致的依赖臃肿问题，是我十分推崇的架构设计。 通过上一节的优化，我们已经有了从零构建中小型单页项目的能…

上一节我们解决了工程的开发调试问题，项目的生产和开发环境也已配置完成，还约定了 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 就是专门用…

Webpack 是一个 Javascript 应用程序的静态模块打包器，它会读取 Javascript 文件所需依赖，并把他们打包到一个或多个目标文件。 准备安装 Webpack 之前请确认你已安装 Nodejs 最新稳定版本，过旧版本可能会缺少 Webpack 需要的包。 如…

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