2020年即将到来,在众多前端的招聘要求里,webpack、工程化这些字眼频率越来越高。日常开发者中，我们常常在用诸如vue-cli、create-react-app的脚手架来构建我们的项目。但是如果你想在团队脱颖而出(鹤立鸡群)、拿到更好的offer(还房贷)，那么你必须去深…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…

前段时间，在公司做了个 Webpack 的分享。听众40多人，感觉还不错。所以总结一下，先看一下ppt的目录： 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建…

几个月前，我的任务是将我们组的 Vue.js 项目构建配置升级到 Webpack 4。我们的主要目标之一是利用 tree-shaking 的优势，即 Webpack 去掉了实际上并没有使用的代码来减少包的大小。现在，tree-shaking 的好处将根据你的代码库而有所不同。由…

对于我们引入的一些第三方包，比如jQuery，在这些包内部是肯定不会依赖别的包，所以根本不需要webpack去解析它内部的依赖关系，可以在webpack配置文件中的module属性下加上noParse属性，它的值是一个正则表达式，用来匹配无需解析的模块，这样可以节约webpac…

5 监视文件改动，热部署。 1. 安装webpack： npx 会自动查找当前依赖包中的可执行文件，如果找不到，就会去 PATH 里找。如果依然找不到，就会帮你安装。 2. webpack 自定义配置 3. 自定义配置文件名 4. webpack-dev-server: 是一个…

webpack是一个现代 JavaScript 应用程序的静态模块打包器（module bundler）。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bu…

build/newUtils.js 里的 getEntry方法 根据目录下的 所有html文件生成页面路径以及对应html的对象。 文件夹名与主文件名以及模板html 文件名 必须要一致，层级结构不限制。 以 VUE_APP_ 开头的变量，在代码中可以通过 process.en…

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