Vue-cli的配置知识
2024-04-18 09:10:57
Vue-cli有两个文件——build和config：build文件包含了脚手架在开发环境和生产环境下webpack该如何配置。config文件则包含了build文件下webpack具体配置的值。换句话说，build下的webpack配置的值要引入config后才能获取到。
一.config文件夹下一共有三个文件：
1.dev.env.js： 导出开发环境名称；
2.prod.env.js： 导出生产环境名称；
3.index.js： 导出不同环境的具体配置；
二.build文件夹下一共有七个文件：
1.build.js： 编译时的入口文件，当执行npm run build时其实就是执行node build/build.js（在package.json中）；
2.check-versions.js： 编译代码时执行的确认node和npm版本的文件，如果版本不符，则停止编译；
3.utils.js：这个文件有两个作用，一是作为vue-loader的配置来使用；另一个是用来给开发环境和生产环境配置loader；
4.vue-loader.conf.js：vue-loader的配置，用在webpack.base.conf.js中；
5.webpack.base.conf.js：vue-cli脚手架的基础webpack配置，通过与webpack.dev.conf.js和webpack.prod.conf.js两个配置文件的合并（合并方式我会在下一章来讲）来实现“不重复原则（Don't repeat yourself - DRY），不会在不同的环境中配置相同的代码”。
6.webpack.dev.conf.js：开发环境下的webpack的配置；
7.webpack.prod.conf.js：生产环境下的webpack的配置；
三.config文件
1.prod.env.js：
//导出一个对象，对象有一个当前node环境的属性，值为“production”（生产环境）
module.exports = { NODE_ENV: '"production"'}
2.dev.env.js：
//导出另一个对象，属性为当前的node环境，值为“development”（开发环境）
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, { NODE_ENV: '"development"'})
- 这里要着重说一下webpack-merge这个包，这个包的作用是来合并两个配置文件对象并生成一个新的配置文件，有点儿类似于es6的Object.assign()方法。如果合并的过程中遇到冲突的属性，第二个参数的属性值会覆盖第一个参数的属性值。
- 前面写到webpack.base.conf.js与webpack.dev.conf.js和webpack.prod.conf.js的合并也用到了webpack-merge。Vue-cli将一些通用的配置抽出来放在一个文件内（webpack.base.conf.js），在对不同的环境配置不同的代码，最后使用webpack-merge来进行合并，减少重复代码。
3.index.js:
index.js作为具体的配置值，我觉得没必要把代码贴出来了，大家可以拿上面的的脑图或者自己项目里的文件来结合我后面要说的代码来看。
四.build文件
1.check.versions.js：
//chalk 是一个用来在命令行输出不同颜色文字的包，可以使用chalk.yellow("想添加颜色的文字....")
//来实现改变文字颜色的;
const chalk = require('chalk')
//semver 的是一个语义化版本文件的npm包，其实它就是用来控制版本的;
const semver = require('semver')const packageConfig = require('../package.json')
//一个用来执行unix命令的包
const shell = require('shelljs')
//child_process 是Node.js提供了衍生子进程功能的模块，execSync()方法同步执行一个cmd命令，
//将返回值的调用toString和trim方法
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{ name: 'node',
//semver.clean()方法返回一个标准的版本号，切去掉两边的空格，比如semver.clean(" =v1.2.3 ")
//返回"1.2.3",此外semver还有vaild,satisfies,gt,lt等方法，
//这里查看https://npm.taobao.org/package/semver可以看到更多关于semver方法的内容
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
}
]
//shell.which方法是去环境变量搜索有没有参数这个命令
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
//执行"npm --version"命令
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
}
)}
//后面这部分代码就比较好理解了
module.exports = function () { const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' + chalk.red(mod.currentVersion) + ' should be ' + chalk.green(mod.versionRequirement) ) } }
if (warnings.length) { console.log('') console.log(chalk.yellow('To use this template, you must update following to modules:')) console.log()
for (let i = 0; i < warnings.length; i++) { const warning = warnings[i] console.log(' ' + warning) }
console.log() process.exit(1) }}
2.utils.js:
const path = require('path')const config = require('../config')
//这个plugin的作用是将打包后生成的css文件通过link的方式引入到html中，如果不适用这个插件css代码会
//放到head标签的style中
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')
//process.env.NODE_ENV是一个环境变量，它是由webpack.dev/prod.conf.js这两个文件声明的;
//这里的意思是判断当前是否是开发环境，如果是就把config下index.js文件中build.assetsSubDirectory或
//dev.assetsSubDirectory的值赋给assetsSubDirectory
exports.assetsPath = function (_path) {
const assetsSubDirectory = process.env.NODE_ENV === 'production'
? config.build.assetsSubDirectory
: config.dev.assetsSubDirectory
//path.posix.join是path.join的一种兼容性写法，它的作用是路径的拼接，这里返回的是"static/_path"
return path.posix.join(assetsSubDirectory, _path
)}
//cssLoaders的作用是导出一个供vue-loader的options使用的一个配置;
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
function generateLoaders (loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
} // styleLoaders是用来给webpack提供所有和css相关的loader的配置，它也使用了cssLoaders()方法;
exports.styleLoaders = function (options) {
const output = [] const loaders = exports.cssLoaders(options)
for (const extension in loaders) {
const loader = loaders[extension]
output.push({
test: new RegExp('\\.' + extension + '$'),
use: loader
})
}
return output
} //'node-notifier'是一个跨平台系统通知的页面，当遇到错误时，它能用系统原生的推送方式给你推送信息
exports.createNotifierCallback = () => {
const notifier = require('node-notifier')
return (severity, errors) => {
if (severity !== 'error') return
const error = errors[0]
const filename = error.file && error.file.split('!').pop()
notifier.notify({
title: packageConfig.name,
message: severity + ': ' + error.name,
subtitle: filename || '',
icon: path.join(__dirname, 'logo.png')
})
}
}
- cssLoaders方法根据传进来的参数(options)是否有extract属性来返回不同的值，如果你看了后面的代码你就会知道在生产模式下extract属性为true，开发模式下为false。也就是说，在生产模式下返回的是一个类似于这样的数组：
ExtractTextPlugin.extract({
use: ["css-loader","less-loader","sass-loader"...],
fallback: 'vue-style-loader'
})
这些css代码打包以link的方式放到HTML中。当然了，use的值确切的说应该是这样：
[ { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { sourceMap: true } } ]
我为了方便看就简写了。
而在开发模式下，cssLoaders返回的是：
| ["vue-style-loader","css-loader","less-loader","sass-loader"...] //我还是简写了 |
styleLoaders方法返回的值就简单了，它返回的就是webpack中module里常用的配置格式：
|
[ |
3.vue-loader.conf.js:
const utils = require('./utils')
|
4.webpack.base.conf.js：
const path = require('path')
|
5.webpack.dev.conf.js：
const utils = require('./utils')
|
关于devServer有两点要说明一下：
- contentBase是来告诉服务器在哪里提供静态的内容，这里我们使用false的原因是使用了“copy-webpack-plugin”插件，不需要使用contentBase了；
- quiet开启后(true)，除了初始启动信息之外的任何内容都不会被打印到控制台，即使是webpack 的错误或警告在控制台也不可见。不过我们用了'friendly-errors-webpack-plugin'插件，就可以设为true了。
6.webpack.prod.conf.js
经过前面这么多代码的分析，其实webpack.prod.conf.js的配置已经很简单了，大致跟webpack.dev.conf.js的配置方式差不多，就是多了几个plugins：
- UglifyJsPlugin是用来压缩JS代码
- optimize-css-assets-webpack-plugin是用来压缩css代码
- HashedModuleIdsPlugin会根据模块的相对路径生成一个四位数的hash作为模块id
- ModuleConcatenationPlugin可以预编译所有模块到一个包中，加快浏览器的运行速度
- CommonsChunkPlugin拆分公共模块，vue里拆分了vendor，manifest和app三个模块
- compression-webpack-plugin gzip压缩
- webpack-bundle-analyzer可以查看打包的具体情况，比如打了多少个包，每个包多大等
好了，plugins的介绍到此结束，接下来就是最后一个文件，也是npm run build编译时的入口文件——build.js了。
同样的，build.js文件其实也没什么可说的了，无非就是执行webpack.prod.conf.js文件，遇到错误时在命令行提示。需要注意的是，build.js里引入了“rimraf”的包，它的作用是每次编译时清空dist文件，避免多次编译时造成文件夹的重复和混乱。
最新文章
- 企业IT管理员IE11升级指南【2】—— Internet Explorer 11 对Adobe Flash的支持
- DBA-mysql-用户控制
- 说说WeakReference弱引用
- RTX发送消息提醒实现以及注意事项
- WCF Service的Restfull风格
- ffmpeg 2.8.1 最新版本 VS2013 可调式动态库
- file_operations结构体解析 1
- Android 百度地图 SDK v3.0.0 （二） 定位与结合方向传感器
- hashtable 和dictionary
- JavaScript DOM编程艺术-学习笔记（第十章、第十一章）
- eclipse清除运行Maven build...后积累的配置项
- JVM-4.类加载机制
- mysql水平分表和垂直分表的优缺点
- samba 搭建
- 【USACO15FEB】审查（黄金）Censoring (Gold)
- Idea查看并过滤某个接口或者类的实现
- 关于4A网络安全管控平台控件加载失败的解决方法
- 网络地址转换-NAT
- authentication failed for xxx错误
- Spark注册UDF函数，用于DataFrame DSL or SQL