Webpack 4 配置最佳实践

Webpack 4 发布已经有一段时间了。Webpack 的版本号已经来到了 4.12.x。但因为 Webpack 官方还没有完成迁移指南,在文档层面上还有所欠缺,大部分人对升级 Webpack 还是一头雾水。 不过 Webpack 的开发团队已经写了一些零散的文章,官网上也有了新版配置的文档。社区中一些开发者也已经成功试水,升级到了 Webpack 4,并且总结成了博客。所以我也终于去了解了 Webpack 4 的具体情况。以下就是我对迁移到 Webpack 4 的一些经验。 本文的重点在: Webpack 4 在配置上带来了哪些便利?要迁移需要修改配置文件的哪些内容? 之前的 Webpack 配置最佳实践在 Webpack 4 这个版本,还适用吗? Webpack 4 之前的 Webpack 最佳实践 这里以 Vue 官方的 Webpack 模板 vuejs-templates/webpack 为例,说说 Webpack 4 之前,社区里比较成熟的 Webpack 配置文件是怎样组织的。 区分开发和生产环境 大致的目录结构是这样的: + build + config + src 在 build 目录下有四个 webpack 的配置。分别是: webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js webpack.test.conf.js 这分别对应开发、生产和测试环境的配置。其中 webpack.base.conf.js 是一些公共的配置项。我们使用 webpack-merge 把这些公共配置项和环境特定的配置项 merge 起来,成为一个完整的配置项。比如 webpack....

June 19, 2018