基于 Webpack 4 构建 Vue.js 项目

截至 2018 年 7 月 11 日,Vue CLI 尚未支持 Webpack 4,因此将介绍如何手动创建一个基于 Webpack 4 的 Vue.js 初始化模板。

Webpack 4 带来了显著的性能提升,包括更快的开发模式编译速度和生产模式打包速度。此外,它还引入了新的代码优化技术,例如使用新的语法替换 optimize.CommonsChunkPlugin 以及压缩 ES6 代码。

尽管打包目标通常是 ES5 代码,但压缩 ES6 代码有助于减小最终打包文件的大小,从而提升应用程序的加载速度。

项目初始化

  1. 使用 npm 安装最新版本的 Webpack 和相关插件:
npm i -D webpack@4.15.1 vue-loader@15.2.4 mini-css-extract-plugin
  1. 根据项目需求安装其他必要的依赖,例如 Babel、Vue Router 和 Vuex 等。
zip 文件大小:101.75KB