一、build:打包的配置文件的文件夹
1、build.js 生产版本的配置文件,一般这个文件我们是不改的
'use strict' //调用检查版本的文件,check-versions的导出直接是一个函数 //check-versions是一个插件,可以检查版本号,其名称是否符合规范,如果有问题会错误抛出 require('./check-versions')() //设置一个全局的环境变量,设置当前版本是开发版本还是生产版本 process.env.NODE_ENV = 'production'
const ora = require('ora') const rm = require('rimraf')
//node.js自带的函数 const path = require('path') const chalk = require('chalk') const webpack = require('webpack') const config = require('../config') const webpackConfig = require('./webpack.prod.conf') const spinner = ora('building for production...') spinner.start()
//在打包之前将删除之前的版本文件 rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { if (err) throw err webpack(webpackConfig, (err, stats) => { spinner.stop() if (err) throw err process.stdout.write(stats.toString({ colors: true, modules: false, children: false, // if you are using ts-loader, setting this to true will make typescript errors show up during build chunks: false, chunkModules: false }) + '\n\n') if (stats.hasErrors()) { console.log(chalk.red(' Build failed with errors.\n')) process.exit(1) } console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) }) })
2、check-versions 版本检查工具
3、dev-client.js 重载的插件
4、dev-server.js 通过启动一个express框架,在前端启动一个服务
5、utils.js
6、vue-loader
7、webpack,base.conf.js
8、webpack.dev.conf.js
9、webpack.prod.conf.js
二、config:打包的配置
1、dev.env.js
2、index.js
3、prod.env.js
三、src项目的源码
四、static静态的资源
五、babelrc.js解析ES6的配置
六、.editorconfig.js编辑器的配置
七、gitignore.js 跟git提交代码有关的配置文件
八、postcssrc.js html添加前缀的配置
九、index.html 单页面的入口文件
十、package.json 配置文件包含项目版本号等信息 还包括项目的依赖库、引擎、浏览器列表
十一、dist 是文件打包后 生成的文件夹