初衷： 整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。 适合人群： 前端初级开发。 用途： 用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到…

实际的工作场景中我们往往会确定一个入口文件，例如叫做index.js文件,该文件会引入所有依赖文件，例如.less样式文件、.sass样式文件、Jquery等第三方文件，有的这些文件是无法被浏览器解析直接呈现出来的，如果我们一个一个的手动去调整文件在大型项目中是十分繁琐易错的，…

1. webpack打包基本原理 1. 处理单个模块（以入口为例） 我们可以看到，入口文件index.js的所有内容都以字符串形式输出了，我们接下来可以用正则表达式或者其它一些方法，从中提取到import以及export的内容以及相应的路径文件名，来对入口文件内容进行分析，获取…

有时候使用npm上的包，发现有bug，我们知道如何修改，但是别人可能一时半会没法更新，或者是我们特殊需求，别人不愿意修改，这时候我们只能自己动手丰衣足食。那么我们应该如何修改别人的源码呢？首先，直接修改node_modules里面的文件是不太行的，重新安装依赖就没有了。一般常用…

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

懒加载或“按需”加载是优化站点或应用程序的一个好方法。这种实践基本上涉及到在逻辑断点处拆分代码，然后在用户完成需要新代码块的操作后加载它。这会加速应用程序的初始负载，并减轻其整体重量，因为某些块甚至可能永远不会加载。懒加载并不是webpack才有的，只不过是webpack支持这…

这些环境变量都是在项目根目录下建立的，如果写有变量，那么我们运行相关命令的时候，会根据不同环境载入不同的文件，以至于能正确读到文件里的变量。载入的优先级别是： .env.development 的文件就只会在 development 模式下被载入。 当然，我们是可以通过参数来修…

先抛出一个尖锐问题：MPA 多页应用或微前端架构，如何处理页面的公共部分。 引入公共模板，这样在访问页面时会直接渲染公共部分。 但如果是现代化工程（比如 React），可前后端又未分离的MPA项目（页面仍由后端渲染，Dom 渲染交由 React 接管），我们就会将构建后的资源文…

平常当中经常这么写，只不过你可能不知道这就是路由懒加载。官网，官网上提到这是由于异步组件和weback的代码分割code-splitting功能，每个异步路由会打包成不同的块，实现按需加载。除了上面的ES2015模块的写法，它还有 然后去看了下vue-cli的具体配置，路由已经…