vue.js学习之vue-cli定制脚手架详解

初探Vue.js开发：定制vue-cli脚手架的实践之路

背景介绍：

随着公司老后台系统的维护难度和开发效率逐渐增大，我们决定重新构建一套更加现代化、易于维护的系统。经过调研，我们选择了Vue全家桶和ElementUI来开发后台系统，以提升交互体验、开发体验和生产效率。

在重构过程中，我们面临了诸多挑战，如代码仓库管理、开发环境和测试环境的搭建、项目打包上线流程的接入、目录划分、模块划分、登录和权限管理等。本文将重点关注与脚手架相关的改造，特别是如何使用vue-cli进行定制。

技术实现：

在开发过程中，我们决定采用多入口打包的方式，将项目划分为多个单页应用，每个模块一个入口。这样可以确保只加载用户所需的页面和资源，提高性能和用户体验。

具体实现步骤如下：

1. 在/build/utils目录下创建getEntries函数，用于从指定路径获取所有入口文件。

2. 在/build/webpack.base.conf文件中，将entry配置为通过getEntries函数获取的入口对象。

3. 在/build/webpack.dev.conf和/build/webpack.prod.conf文件中，配置多个HtmlWebpackPlugin实例，分别对应每个页面的入口文件。这样可以在打包后自动注入路径。

注意事项：

在实现多页面入口配置时，需要注意以下两点：

1. 入口配置需为数组形式。

2. plugins中需要添加多个HtmlWebpackPlugin实例，分别对应每一个页面，以实现js打包后路径的自动注入功能。

还需要注意抽取公用的js和css代码。我们进行了改造，指定将echarts提取出来，而不是按引用次数自动提取。这个过程需要注意一些细节，详细见注释。

详细配置：

在webpack.prod.conf的plugins中加入以下配置：

将vue、vue-router、vuex、element-ui和vue-echarts等库作为单独的入口进行提取。

// 这里是一个需要注意的地方，避免配置出错导致的问题……

通过以上的改造，我们成功使用了vue-cli来定制我们的脚手架，实现了多页面入口配置，提高了开发效率和系统性能。在这个过程中，我们遇到了一些挑战和注意事项，需要注意细节和避免常见的错误。希望这篇文章对正在学习vue-cli定制脚手架的朋友们有所帮助。在编程的世界里，每一个模块和插件的排列顺序都至关重要，就像织造一件精美的艺术品，每一个细节都不能忽视。关于echarts的父模块以及CommonsChunkPlugin的声明顺序，这背后隐藏着不可忽视的规则。

echarts，作为数据可视化领域的佼佼者，其运行离不开其父模块的支撑。这就好比一座大厦，只有稳固的根基，才能支撑起高楼大厦的巍峨壮观。webpack中的模块顺序，尤其是像echarts这样的核心模块的父模块，它的顺序是绝对不能被颠倒的。

而关于CommonsChunkPlugin的声明顺序，这同样是一个不能随意调整的环节。HtmlWebpackPlugin注入模块链接的时候，其顺序就是由CommonsChunkPlugin的声明顺序来决定的。在Webpack的优化过程中，CommonsChunkPlugin扮演着重要的角色，它通过抽离出公共的代码块，减少了重复的代码，提升了网页的加载速度。在这个插件的使用中，对模块资源的判断尤为重要。只有当模块资源符合一定的条件时，才会被抽离到公共的代码块中。这里的条件就是模块资源必须是css文件，并且这个文件必须位于node_modules目录下。

关于上述内容的实现，可以参考以下代码片段：

new webpack.optimizemonsChunkPlugin({
names: ['echarts', 'vendor'], // 抽取公共模块，包括echarts和vendor
minChunks: function (module) { // 判断模块是否符合抽离条件
return (
module.resource && // 模块必须有资源路径
/\.css$/.test(module.resource) && // 模块资源必须是css文件
module.resourcedexOf(path.join(__dirname, '../node_modules')) === 0 // 模块资源位于node_modules目录下
)
}
})

以上就是关于模块顺序以及CommonsChunkPlugin使用的介绍。希望这些内容对大家有所帮助，如果有任何疑问或者需要交流的地方，欢迎留言。同时感谢大家对狼蚁SEO的支持与关注。让我们共同编程的奥秘，享受编程的乐趣。通过cambrian.render('body')将内容呈现在网页上。