通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 DefinePlugin中的每个键，是一个标识符或者通过.作为多个标识符。 如果value是…

很显然，NODE_ENV 属性并不在 process.env 对象上，但通过字面意思（node environment）可以知道，这意为 node.js 环境。 express.js 中首次使用该变量，然后推广、普及至整个前端社区。 它的主要用途是：在使用 node.js 环境…

optimization. runtimeChunk配置

随着项目迭代，需要的前端依赖、js、css、静态资源等不断增加，代码越来越冗余，导致打包后的文件过大，打包速度也变得越来越慢。最近的项目打包时间已经近5分钟，再加上jenkins部署时的依赖安装、文件上传等，一次构建需要7-8分钟，这样的速度，严重影响到了开发及发版效率。 因此…

对于 Angular 项目，推荐使用 angular-cli 创建打包项目 Angular 会默认帮我们配置。 但是有特殊的需求时就显然不是很灵活，比如想分割一些较大的打包文件、分析每个打包文件组成，自定义webpack一些参数的时候就发现无从下手。 对许多项目的常见依赖项是日…

App往往有一个入口文件，相当于一棵树的主干，入口文件有很多依赖的模块，相当于树枝。实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过Tree shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。 关于Tree shaking的原理，在Tree S…

webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

这个关键词表示每个模块用eval执行，并且存在@sourceUrl，就是说这种配置的devtool在打包的时候，生成的bundle.js文件模块都会被eval包裹，并且后面跟着sourceUrl,指向的是原文件index.js，调试的时候就是根据这个sourceUrl找到的in…