这个结构也是我们项目目前正在使用的，应对两三百个页面的web项目是没有任何问题的，在扩展性，多人合作方面是非常优秀的。废话不多说，先上结构，再说为什么要这么做。 首先，这个结构是基于Vue来设计的，设计思路来源于小程序分包加载机制。示例的结构主要为src 目录下。 虽然给出的结…

在过去的几星期里，随着 Martin Fowler 博客上，那篇 Cam Jackson 写的微前端的文章发布，到处都在讨论 Microfrontend。作为一个微前端 “专家”，我也分享一下：如何去落地微前端。 微前端不是银弹，它和微服务一样会带来大量的挑战。 遗留系统迁移。…

因为 webpack 根本识别不了 jsx 语法，那怎么办？使用 babel-loader 对文件进行预处理。 babel-loader 使用 babel 解析文件；@babel/core 是 babel 的核心模块；@babel/preset-react 转译 jsx 语法。…

现在我们开发一个 React 项目最快的方式便是使用 Facebook 官方开源的脚手架 create-react-app ，但是随着业务场景的复杂度提升，难免会需要我们再去添加或修改一些配置，这个时候如果对 webpack 不够熟练的话，会比较艰难，那种无力的感觉，就好像是女…

对于一个 webpack 构建的项目，source-map 对于开发调试，打包速度还是影响很大的，但是 webpack 的官方说明却不那么清晰易懂，也没有找到很精简的说明文章，索性自己尝试下所有的参数，概述一下自己的理解。 看上去是不是很烦！！其实抽离出其中的关键字，理解每个关…

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

先说下我们希望达到的效果。 4、在sass中编写，按需合并。 一种是以webpack-spritesmith、postcss-sprites为代表的插件，webpack-spritesmith主要的运行方式是会预先把sprite目录中的图标拼合好，页面主要依赖生成后的雪碧图。而…

本文介绍了如何在 Create React App 脚手架中启用 Sass 和 Less。 关于创建 create-react-app 项目请查看： create-react-app 的安装与创建。 关于在 less 和 sass 如何在 create-react-app 启用…

从 06-webpack 加载 CSS 之后，能够正常加载 CSS ，并且能够正常显示。 要看到压缩 CSS 代码效果，需要先把 CSS 从 bundle.js 中抽离出来，并导入独立的文件中去，然后再添加压缩操作。 需要通过 mini-css-extract-plugin 插…