使用 webpack 4 和 Babel 7 配置 Vue.js 工程模板

团队最近开始一个新项目，技术栈采用 Vue.js 2 框架。由于是一个较复杂的大型单页应用，决定使用官方推荐的 webpack 工程作为应用工程脚手架。该工程模板中使用了 webpack 3 和 babel 6，由于 webpack 4 已发布，Babel 7 也出来挺长一段时间了，所以想对工程模板进行升级改造，以尝试工程化开发工具的最新特性。

2018/12/21 更新
最近已升级到Babel 7 GA 版本，详情请看github项目
vue-cli已出v3版本，封装了更加开箱即用的 cli-service，但如果想了解webpack与babel配置细节，还是可以动手尝试自行配置，之后会整理出一个脱离官方工程模板的轻量化配置方案，敬请期待

关键调整

webpack工程模板本身是为大型应用设计的，构建脚本和配置文件的结构相比一般项目稍显复杂，添加了一些开发辅助工具，并且做了一定程度的封装。本次升级也是沿用了此套结构，只是对升级后的几个工具配置项做了调整。几个关键调整：除了 webpack 4 和 Babel 7，配套的 vue-loader 也升级到了 v15（官方的文档已经是v15了）；另外为了配套 webpack 4，extract-text-webpack-plugin 插件也被替换成了mini-css-extract-plugin，并且配合 css-hot-loader 可实现提取css文件的热替换。主要配置项调整请看下文，前后配置代码差异可以见这里，完整工程模板库地址：https://github.com/xsbear/vue...，有需要的同学可以直接 clone。

基础配置 build/webpack.base.conf.js

这里的主要变化是新的 vue-loader 配置，由于新版配置选项发生变更，原来vue-loader.conf.js里的配置项基本已废弃，本方案直接将transformAssetUrls选项配置在了 vue-loader 的 rule options 里；另外需引入vue-loader/lib/plugin，以确保正确解析 .vue文件

使用 webpack 4 和 Babel 7 配置 Vue.js 工程模板

关键调整

基础配置 build/webpack.base.conf.js

你可能感兴趣的:(webpack,javascript,开发工具)