在实际项目开发中，需要基于多种环境去设置不同的环境变量以便于在构建阶段或是运行阶段去使用，例如常见的通过process.env.NODE_ENV在构建时去判断当前的构建环境是development还是production，例如需要在开发环境、测试环境和生产环境去访问不同的接口服…

如上，我们创建一个 webpack plugin，通过监听 webpack hooks 在任务执行之前修改对应的资源路径，通用性上升。 此外之前的博客我们还引入了 cdn 的概念，我们可以将上述插件升级，构建的时候引入通用的 cdn 资源，减少构建与加载时间。 上述我们借助了 …

1. 模块热替换 启用此功能需要更新 webpack-dev-server 的配置，和使用 webpack 内置的 HMR 插件。 CSS 的模块热更新，借助于 style-loader 。 2. Tree shaking 「副作用」的定义是，在导入时会执行特殊行为的代码，而不…

对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面： entry 、 output 、 mode 、 resolve 、 modu…

自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。 执行npm run build，默认会调用 node_modules/.bin下的webpack命令，内部会调用we…

团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpack 的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，如果有 webpack…