vue-cli 目录结构详细讲解总结

├─build // 保存一些webpack的初始化配置,项目构建
│ ├─build.js // 生产环境构建
│ ├─check-version.js // 检查npm、node版本
│ ├─vue-loader.conf.js // webpack loader配置
│ ├─webpack.base.conf.js// webpack基础配置
│ ├─webpack.dev.conf.js // 开发环境配置，构建本地开发服务器
│ ├─webpack.prod.conf.js// 生产环境的配置
│
├─config // config文件夹保存一些项目初始化的配置
│ ├─dev.env.js // 开发环境的配置
│ ├─index.js // 项目一些配置变量
│ ├─prod.env.js // 生产环境的配置
│
├─dist // 打包后的项目
├─node_modules // 依赖包
│
├─src // 源码目录
│ ├─assets // 静态文件目录
│ ├─components // 组件文件
│ ├─router // 路由
│ ├─App.vue // 是项目入口文件
│ ├─main.js // 是项目的核心文件，入口
├─static // 静态资源目录 
├─.babelrc // Babel的配置文件
├─.editorconfig // 代码规范配置文件
├─.gitignore // git忽略配置文件
├─.postcssrc.js // postcss插件配置文件
├─index.html // 页面入口文件
├─package-lock.json // 项目包管控文件
├─package.json // 项目配置
└─README.md // 项目说明书

// 检查NodeJS和npm的版本
require('./check-versions')()

// 获取基本配置
var config = require('../config')
// 如果Node的环境变量中没有设置当前的环境（NODE_ENV），则使用config中的dev环境配置作为当前的环境
if (!process.env.NODE_ENV) {
 process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

// opn是一个可以调用默认软件打开网址、图片、文件等内容的插件
// 这里用它来调用默认浏览器打开dev-server监听的端口，例如：localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
// http-proxy-middleware是一个express中间件，用于将http请求代理到其他服务器
// 例：localhost:8080/api/xxx --> localhost:3000/api/xxx
// 这里使用该插件可以将前端开发中涉及到的请求代理到提供服务的后台服务器上，方便与服务器对接
var proxyMiddleware = require('http-proxy-middleware')
// 开发环境下的webpack配置
var webpackConfig = require('./webpack.dev.conf')

// dev-server 监听的端口，如果没有在命令行传入端口号，则使用config.dev.port设置的端口，例如8080
var port = process.env.PORT || config.dev.port
// 用于判断是否要自动打开浏览器的布尔变量，当配置文件中没有设置自动打开浏览器的时候其值为 false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// HTTP代理表，指定规则，将某些API请求代理到相应的服务器
var proxyTable = config.dev.proxyTable
// 创建express服务器
var app = express()
// webpack根据配置开始编译打包源码并返回compiler对象
var compiler = webpack(webpackConfig)
// webpack-dev-middleware将webpack编译打包后得到的产品文件存放在内存中而没有写进磁盘
// 将这个中间件挂到express上使用之后即可提供这些编译后的产品文件服务
var devMiddleware = require('webpack-dev-middleware')(compiler, {
 publicPath: webpackConfig.output.publicPath, // 设置访问路径为webpack配置中的output里面所对应的路径
 quiet: true // 设置为true，使其不要在控制台

var path = require('path')
var fs = require('fs')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')

// 获取绝对路径
function resolve (dir) {
 return path.join(__dirname, '..', dir)
}

module.exports = {
 // webpack入口文件
 entry: {
 app: './src/main.js'
 },
 // webpack

var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
// webpack-merge是一个可以合并数组和对象的插件
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// html-webpack-plugin用于将webpack编译打包后的产品文件注入到html模板中
// 即自动在index.html里面加上<link>和<script>标签引用webpack打包后的文件
var HtmlWebpackPlugin = require('html-webpack-plugin')
// friendly-errors-webpack-plugin用于更友好地

// 引入nodejs路径模块
var path = require('path')
// 引入config目录下的index.js配置文件
var config = require('../config')
// 引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中
// 详情请看(1)
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// exports其实就是一个对象，用来导出方法的最终还是使用module.exports，此处导出assetsPath
exports.assetsPath = function (_path) {
 // 如果是生产环境assetsSubDirectory就是'static'，否则还是'static'，哈哈哈
 var assetsSubDirectory = process.env.NODE_ENV === 'production'
 ? config.build.assetsSubDirectory
 : config.dev.assetsSubDirectory
 // path.join和path.posix.join的区别就是，前者返回的是完整的路径，后者返回的是完整路径的相对根路径
 // 也就是说path.join的路径是C:a/a/b/xiangmu/b，那么path.posix.join就是b
 return path.posix.join(assetsSubDirectory, _path)
 // 所以这个方法的作用就是返回一个干净的相对根路径
}
 
// 下面是导出cssLoaders的相关配置
exports.cssLoaders = function (options) {
 // options如果没值就是空对象
 options = options || {}
 // cssLoader的基本配置
 var cssLoader = {
 loader: 'css-loader',
 options: {
 // options是用来传递参数给loader的
 // minimize表示压缩，如果是生产环境就压缩css代码
 minimize: process.env.NODE_ENV === 'production',
 // 是否开启cssmap，默认是false
 sourceMap: options.sourceMap
 }
 }
 
 // generate loader string to be used with extract text plugin
 function generateLoaders (loader, loaderOptions) {
 // 将上面的基础cssLoader配置放在一个数组里面
 var loaders = [cssLoader]
 // 如果该函数传递了单独的loader就加到这个loaders数组里面，这个loader可能是less,sass之类的
 if (loader) {
 loaders.push({
 // 加载对应的loader
 loader: loader + '-loader',
 // Object.assign是es6的方法，主要用来合并对象的，浅拷贝
 options: Object.assign({}, loaderOptions, {
 sourceMap: options.sourceMap
 })
 })
 }
 
 // Extract CSS when that option is specified
 // (which is the case during production build)
 // 注意这个extract是自定义的属性，可以定义在options里面，主要作用就是当配置为true就把文件单独提取，false表示不单独提取，这个可以在使用的时候单独配置，瞬间觉得vue作者好牛逼
 if (options.extract) {
 return ExtractTextPlugin.extract({
 use: loaders,
 fallback: 'vue-style-loader'
 })
 } else {
 return ['vue-style-loader'].concat(loaders)
 }
 // 上面这段代码就是用来返回最终读取和导入loader，来处理对应类型的文件
 }
 
 // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 return {
 css: generateLoaders(), // css对应 vue-style-loader 和 css-loader
 postcss: generateLoaders(), // postcss对应 vue-style-loader 和 css-loader
 less: generateLoaders('less'), // less对应 vue-style-loader 和 less-loader
 sass: generateLoaders('sass', { indentedSyntax: true }), // sass对应 vue-style-loader 和 sass-loader
 scss: generateLoaders('sass'), // scss对应 vue-style-loader 和 sass-loader
 stylus: generateLoaders('stylus'), // stylus对应 vue-style-loader 和 stylus-loader
 styl: generateLoaders('stylus') // styl对应 vue-style-loader 和 styl-loader 
 }
}
 
// Generate loaders for standalone style files (outside of .vue)
// 下面这个主要处理import这种方式导入的文件类型的打包，上面的exports.cssLoaders是为这一步服务的
exports.styleLoaders = function (options) {
 var output = []
 // 下面就是生成的各种css文件的loader对象
 var loaders = exports.cssLoaders(options)
 for (var extension in loaders) {
 // 把每一种文件的laoder都提取出来
 var loader = loaders[extension]
 output.push({
 // 把最终的结果都push到output数组中，大事搞定
 test: new RegExp('\\.' + extension + '$'),
 use: loader
 })
 }
 return output
}

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 module.exports = {
 module: {
 rules: [
 {
 test: /\.css$/, //主要用来处理css文件
 use: ExtractTextPlugin.extract({
 fallback: "style-loader", // fallback表示如果css文件没有成功导入就使用style-loader导入
 use: "css-loader" // 表示使用css-loader从js读取css文件
 })
 }
 ],
 plugins: [
 new ExtractTextPlugin("styles.css") //表示生成styles.css文件
 ]
 }
 }

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
 // 处理.vue文件中的样式
 loaders: utils.cssLoaders({
 // 是否打开source-map
 sourceMap: isProduction
 ? config.build.productionSourceMap
 : config.dev.cssSourceMap,
 // 是否提取样式到单独的文件
 extract: isProduction
 }),
 transformToRequire: {
 video: 'src',
 source: 'src',
 img: 'src',
 image: 'xlink:href'
 }
}

/* eslint-disable */
// 实现浏览器端的EventSource，用于跟服务器双向通信
// webpack热重载客户端跟dev-server上的热重载插件之间需要进行双向通信
// 服务端webpack重新编译后，会向客户端推送信息，告诉客户端进行更新
require('eventsource-polyfill')
// webpack热重载客户端
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

// 客户端收到更新动作，执行页面刷新
hotClient.subscribe(function (event) {
 if (event.action === 'reload') {
 window.location.reload()
 }
})

// 检查NodeJS和npm的版本
require('./check-versions')()

process.env.NODE_ENV = 'production'

// ora，一个可以在终端显示spinner的插件
var ora = require('ora')
// rm，用于删除文件或文件夹的插件
var rm = require('rimraf')
var path = require('path')
// chalk，用于在控制台

var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// copy-webpack-plugin，用于将static中的静态文件复制到产品文件夹dist
var CopyWebpackPlugin = require('copy-webpack-plugin')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
// optimize-css-assets-webpack-plugin，用于优化和最小化css资源
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

var env = config.build.env

var webpackConfig = merge(baseWebpackConfig, {
 module: {
 // 样式文件的处理规则，对css/sass/scss等不同内容使用相应的styleLoaders
 // 由utils配置出各种类型的预处理语言所需要使用的loader，例如sass需要使用sass-loader
 rules: utils.styleLoaders({
 sourceMap: config.build.productionSourceMap,
 extract: true
 })
 },
 // 是否使用source-map
 devtool: config.build.productionSourceMap ? '#source-map' : false,
 // webpack

// chalk, 用于在控制台

// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
 // 构建产品时使用的配置
 build: {
 // 环境变量
 env: require('./prod.env'),
 // html入口文件
 index: path.resolve(__dirname, '../dist/index.html'),
 // 产品文件的存放路径
 assetsRoot: path.resolve(__dirname, '../dist'),
 // 二级目录，存放静态资源文件的目录，位于dist文件夹下
 assetsSubDirectory: 'static',
 // 发布路径，如果构建后的产品文件有用于发布CDN或者放到其他域名的服务器，可以在这里进行设置
 // 设置之后构建的产品文件在注入到index.html中的时候就会带上这里的发布路径
 assetsPublicPath: '/',
 // 是否使用source-map
 productionSourceMap: true,
 // Gzip off by default as many popular static hosts such as
 // Surge or Netlify already gzip all static assets for you.
 // Before setting to `true`, make sure to:
 // npm install --save-dev compression-webpack-plugin
 // 是否开启gzip压缩
 productionGzip: false,
 // gzip模式下需要压缩的文件的扩展名，设置js、css之后就只会对js和css文件进行压缩
 productionGzipExtensions: ['js', 'css'],
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 // 是否展示webpack构建打包之后的分析报告
 bundleAnalyzerReport: process.env.npm_config_report
 },
 // 开发过程中使用的配置
 dev: {
 // 环境变量
 env: require('./dev.env'),
 // dev-server监听的端口
 port: 8080,
 // 是否自动打开浏览器
 autoOpenBrowser: true,
 // 静态资源文件夹
 assetsSubDirectory: 'static',
 // 发布路径
 assetsPublicPath: '/',
 // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
 proxyTable: {},
 // CSS Sourcemaps off by default because relative paths are "buggy"
 // with this option, according to the CSS-Loader README
 // (https://github.com/webpack/css-loader#sourcemaps)
 // In our experience, they generally work as expected,
 // just be aware of this issue when enabling this option.
 // 是否开启 cssSourceMap
 cssSourceMap: false
 }
}
'use strict'
const path = require('path')

module.exports = {
 dev: {
 // 开发环境下面的配置
 assetsSubDirectory: 'static',//子目录，一般存放css,js,image等文件
 assetsPublicPath: '/',//根目录
 proxyTable: {},//可利用该属性解决跨域的问题
 host: 'localhost', // 地址
 port: 8080, //端口号设置，端口号占用出现问题可在此处修改
 autoOpenBrowser: false,//是否在编译（输入命令行npm run dev）后打开http://localhost:8080/页面，以前配置为true，近些版本改为false，个人偏向习惯自动打开页面
 errorOverlay: true,//浏览器错误提示
 notifyOnErrors: true,//跨平台错误提示
 poll: false, //使用文件系统(file system)获取文件改动的通知devServer.watchOptions
 devtool: 'cheap-module-eval-source-map',//增加调试，该属性为原始源代码（仅限行）不可在生产环境中使用
 cacheBusting: true,//使缓存失效
 cssSourceMap: true//代码压缩后进行调bug定位将非常困难，于是引入sourcemap记录压缩前后的位置信息记录，当产生错误时直接定位到未压缩前的位置，将大大的方便我们调试
 },

 build: {
 // 生产环境下面的配置
 index: path.resolve(__dirname, '../dist/index.html'),//index编译后生成的位置和名字，根据需要改变后缀，比如index.php
 assetsRoot: path.resolve(__dirname, '../dist'),//编译后存放生成环境代码的位置
 assetsSubDirectory: 'static',//js,css,images存放文件夹名
 assetsPublicPath: '/',//发布的根目录，通常本地打包dist后打开文件会报错，此处修改为./。如果是上线的文件，可根据文件存放位置进行更改路径
 productionSourceMap: true,
 devtool: '#source-map',//①
 //unit的gzip命令用来压缩文件，gzip模式下需要压缩的文件的扩展名有js和css
 productionGzip: false,
 productionGzipExtensions: ['js', 'css'],
 bundleAnalyzerReport: process.env.npm_config_report
 }
}

'use strict'
module.exports = {
 NODE_ENV: '"production"'
}

'use strict'//采用严格模式
const merge = require('webpack-merge')//①
const prodEnv = require('./prod.env')
//webpack-merge提供了一个合并函数，它将数组和合并对象创建一个新对象。
//如果遇到函数，它将执行它们，通过算法运行结果，然后再次将返回的值封装在函数中.这边将dev和prod进行合并
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"'
})

{
//制定转码的规则
 "presets": [
 //env是使用babel-preset-env插件将js进行转码成es5，并且设置不转码的AMD,COMMONJS的模块文件，制定浏览器的兼容
 ["env", {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 }
 }],
 "stage-2"
 ],
 
 "plugins": ["transform-vue-jsx", "transform-runtime"]//①
}

module.exports = {
 "plugins": {
 "postcss-import": {},//①
 "postcss-url": {},//②
 "autoprefixer": {}//③
 }
}

{
//从name到private都是package的配置信息，也就是我们在脚手架搭建中输入的项目描述
 "name": "shop",//项目名称：不能以.(点)或者_（下划线）开头，不能包含大写字母，具有明确的的含义与现有项目名字不重复
 "version": "1.0.0",//项目版本号：遵循“大版本.次要版本.小版本”
 "description": "A Vue.js project",//项目描述
 "author": "qietuniu",//作者名字
 "private": true,//是否私有
 //scripts中的子项即是我们在控制台运行的脚本的缩写
 "scripts": {
 //①webpack-dev-server:启动了http服务器，实现实时编译;
 //inline模式会在webpack.config.js入口配置中新增webpack-dev-server/client?http://localhost:8080/的入口,使得我们访问路径为localhost:8080/index.html（相应的还有另外一种模式Iframe）;
 //progress:显示打包的进度
 "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 
 "start": "npm run dev",//与npm run dev相同，直接运行开发环境
 "build": "node build/build.js"//使用node运行build文件
 },
 //②dependencies(项目依赖库):在安装时使用--save则写入到dependencies
 "dependencies": {
 "vue": "^2.5.2",//vue.js
 "vue-router": "^3.0.1"//vue的路由插件
 },
 //和devDependencies（开发依赖库）：在安装时使用--save-dev将写入到devDependencies
 "devDependencies": {
 "autoprefixer": "^7.1.2",//autoprefixer作为postcss插件用来解析CSS补充前缀，例如 display: flex会补充为display:-webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex。
 //babel:以下几个babel开头的都是针对es6解析的插件。用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本
 "babel-core": "^6.22.1",//babel的核心，把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。
 "babel-helper-vue-jsx-merge-props": "^2.0.3",//预制babel-template函数，提供给vue,jsx等使用
 "babel-loader": "^7.1.1",//使项目运行使用Babel和webpack来传输js文件，使用babel-core提供的api进行转译
 "babel-plugin-syntax-jsx": "^6.18.0",//支持jsx
 "babel-plugin-transform-runtime": "^6.22.0",//避免编译