vue基于webpack 模板的目录结构以及目录作用的解析

一个vue目录建好如下：

1.build

这个是我们最终发布的时候会把代码发布在这里

1.1 build.js

生产环境构建脚本，也就是打包的时候需要的一些包的引入配置信息，详细看代码

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'
// 打包开始提示对cli进行输出一个带spinner的文案，告诉用户正在打包中
const ora = require('ora')
// 去除先前的打包,这个模块是用来清除之前的打的包，
// 因为在vue-cli中每次打包会生成不同的hash,每次打包都会生成新的文件，那就不对了，
// 我们要复盖原先的文件，因为hash不同复盖不了，所以要清除
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
// 把webpack模块包给加进入
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')
// 对cli进行输出一个带spinner的文案，告诉用户正在打包中也可以这样设置多个值
// const spinner = ora({
// color: 'green',
//   text: '正为生产环境打包，耐心点，不然自动关机。。。'
// })
// spinner.start()
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 tyescript 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'
    ))
  })
})

1.2 check-versions.js  

用来检测node和npm版本的

'use strict'
// 下面的插件是chalk插件，他的作用是在控制台中输出不同的颜色的字，
// 大致这样用chalk.blue('Hello world')，这款插件只能改变命令行中的字体颜色
const chalk = require('chalk')
// 下面这个是semver插件，是用来对特定的版本号做判断的，
// 比如 // semver.gt('1.2.3','9.8.7') false 1.2.3版本比9.8.7版本低
// // semver.satisfies('1.2.3','1.x || >=2.5.0 || 5.0.0 - 7.2.3') true 1.2.3的版本符合后面的规则
const semver = require('semver')
// 下面是导入package.json文件,要使用里面的engines选项，
// 要注意require是直接可以导入json文件的，并且requrie返回的就是json对象
const packageConfig = require('../package.json')
// 下面这个插件是shelljs，作用是用来执行Unix系统命令
const shell = require('shelljs')
// 下面涉及了很多Unix命令（PS暂时没空看而且看了一眼不太看得懂）
function exec (cmd) {
//脚本可以通过 child_process 模块新建子进程，从而执行 Unix 系统命令
//下面这段代码实际就是把cmd这个参数传递的值转化成前后没有空格的字符串，也就是版本号
//https://nodejs.org/api/child_process.html这是nodejs的子进程教程
//require('child_process') node的模块，execSync(cmd)创建同步进程
  return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
  {
    name: 'node',// node版本的信息
    // 使用semver插件吧版本信息转化成规定格式，也就是 ' =v1.2.3 ' -> '1.2.3' 这种功能
    currentVersion: semver.clean(process.version),
    // 这是规定的pakage.json中engines选项的node版本信息 "node":">= 4.0.0"
    versionRequirement: packageConfig.engines.node
  }
]
/*shell.which('npm')  返回：C:\PROGRAM FILES\NODEJS\NPM.CMD 返回绝对路径，否则返回null*/
if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),// 自动调用npm --version命令，并且把参数返回给exec函数，从而获取纯净的版本号
    versionRequirement: packageConfig.engines.npm// 这是规定的pakage.json中engines选项的node版本信息 "npm": ">= 3.0.0"
  })
}

module.exports = function () {
  const warnings = []

  for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]
//上面这个判断就是如果版本号不符合package.json文件中指定的版本号，就执行下面的代码
    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)
  }
  // 提示用户更新版本
}

1.3 logo.png  就是项目的logo

1.4 utils.js  

此配置文件是vue开发环境的wepack相关配置文件，主要用来处理css-loader和vue-style-loader

'use strict'
// 引入nodejs路径模块
const path = require('path')
// 引入config目录下的index.js配置文件
const config = require('../config')
// 引入extract-text-webpack-plugin插件，用来将css提取到单独的css文件中
const ExtractTextPlugin = require('extract-text-webpack-plugin')

const packageConfig = require('../package.json')
// exports其实就是一个对象，用来导出方法的最终还是使用module.exports，此处导出assetsPath
exports.assetsPath = function (_path) {
  // 如果是生产环境assetsSubDirectory就是'static'，否则还是'static'
  const 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的基本配置
  const cssLoader = {
    loader: 'css-loader',
    options: {
      // options是用来传递参数给loader的
      // minimize表示压缩，如果是生产环境就压缩css代码
      // minimize: process.env.NODE_ENV === 'production',
      // 是否开启cssmap，默认是false
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    // 将上面的基础cssLoader配置放在一个数组里面
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [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表示不单独提取，这个可以在使用的时候单独配置
    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) {
  const output = []
  // 下面就是生成的各种css文件的loader对象
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    // 把每一种文件的laoder都提取出来
    const loader = loaders[extension]
    output.push({
      // 把最终的结果都push到output数组中
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

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')
    })
  }
}

1.5 vue-loader.conf.js

处理.vue文件的配置文件

'use strict'
// utils配置文件用来解决css相关文件loader
const utils = require('./utils')
// 生产和开发环境的相关属性
const config = require('../config')
// 判断当前是否生产环境
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  // 调用utils配置文件中的cssLoaders方法，用来返回配置好的css-loader和vue-style-loader
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction// 这一项是自定义配置项，设置为true表示生成单独样式文件
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

1.6 webpack.base.conf.js

wabpack基础配置

'use strict'
// 引入nodejs路径模块
const path = require('path')

// 引入utils工具模块，具体查看我的博客关于utils的解释，
// utils主要用来处理css-loader和vue-style-loader的
const utils = require('./utils')

// 引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性
const config = require('../config')

// vue-loader.conf配置文件是用来解决各种css文件的，定义了诸如css,less,sass之类的和样式有关的loader
// 下面是vue-loader.conf.js配置文件的解释，如果你看过我关于utils的解释，下面很好懂
// // utils配置文件用来解决css相关文件loader
// var utils = require('./utils')
// // 生产和开发环境的相关属性
// var config = require('../config')
// // 判断当前是否生产环境
// var isProduction = process.env.NODE_ENV === 'production'
//
// module.exports = {
//   // 调用utils配置文件中的cssLoaders方法，用来返回配置好的css-loader和vue-style-loader
//   loaders: utils.cssLoaders({
//     sourceMap: isProduction
//       ? config.build.productionSourceMap
//       : config.dev.cssSourceMap, // 这一句话表示如何生成map文
//     extract: isProduction // 这一项是自定义配置项，设置为true表示生成单独样式文件
//   })
// }
const vueLoaderConfig = require('./vue-loader.conf')

// 此函数是用来返回当前目录的平行目录的路径，因为有个'..'
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    // 入口文件是src目录下的main.js
    app: './src/main.js'
  },
  output: {
    // 路径是config目录下的index.js中的build配置中的assetsRoot，也就是dist目录
    path: config.build.assetsRoot,
    // 文件名称这里使用默认的name也就是main
    filename: '[name].js',
    // 上线地址，也就是真正的文件引用路径，如果是production生产环境，其实这里都是 '/'
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    // resolve是webpack的内置选项，顾名思义，决定要做的事情，也就是说当使用 import "jquery"，
    // 该如何去执行这件事情就是resolve配置项要做的，
    // import jQuery from "./additional/dist/js/jquery"
    // 这样会很麻烦，可以起个别名简化操作
    extensions: ['.js', '.vue', '.json'],
    alias: {
      //后面的$符号指精确匹配，
      // 也就是说只能使用 import vuejs from "vue"
      // 这样的方式导入vue.esm.js文件，不能在后面跟上 vue/vue.js
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  // module用来解析不同的模块
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        // 也就是说，对.js和.vue文件在编译之前进行检测，检查有没有语法错误'eslint-loader'
        // enforce: 'pre'选项可以确保，eslint插件能够在编译之前检测，如果不添加此项，就要把这个配置项放到末尾，确保第一个执行
        // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
        loader: 'vue-loader',
        // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
        loader: 'babel-loader',
        // 指明src和test目录下的js文件要使用该loader
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        // 对图片相关的文件使用 url-loader 插件，这个插件的作用是将一个足够小的文件生成一个64位的DataURL
        // 可能有些老铁还不知道 DataURL 是啥，当一个图片足够小，为了避免单独请求可以把图片的二进制代码变成64位的
        // DataURL，使用src加载，也就是把图片当成一串代码，避免请求，神不神奇？？
        loader: 'url-loader',
        options: {
          // 限制 10000 个字节一下的图片才使用DataURL
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        // 字体文件处理，和上面一样
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

1.7 webpack.dev.conf.js

webpack.dev.conf.js，这里面在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：

1. 将webpack的热重载客户端代码添加到每个entry对应的应用
2. 合并基础的webpack配置
3. 配置样式文件的处理规则，styleLoaders
4. 配置Source Maps
5. 配置webpack插件

'use strict'
// 引入当前目录中的utils工具配置文件
const utils = require('./utils')

// 引入webpack来使用webpack内置插件
const webpack = require('webpack')

// 引入config目录中的index.js配置文件
const config = require('../config')

// 引入webpack-merge插件用来合并webpack配置对象，也就是说可以把webpack配置文件拆分成几个小的模块，然后合并
const merge = require('webpack-merge')

// 引入当前目录下的webpack.base.conf.js配置文件，主要配置的是打包各种文件类型的配置
const baseWebpackConfig = require('./webpack.base.conf')

// 下面是一个自动生成html的插件，能够把资源自动加载到html文件中
// (1)html-webpack-plugin插件是用来生成html文件的，有很灵活的配置项，下面是基本的一些用法
// plugins: [
//   new HtmlWebpackPlugin(), // Generates default index.html
//   new HtmlWebpackPlugin({  // Also generate a test.html
//     filename: 'test.html', // 生成的文件的名称
//     title: 'Custom template', // 文件的标题
//     template: 'my-index.ejs' //可以指定模块html文件
//   })
// ]
// 下面是模板文件my-index.ejs的内容
// <!DOCTYPE html>
// <html>
// <head>
// <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
// <title><%= htmlWebpackPlugin.options.title %></title> //这里使用特殊的表示插入配置项的title
//   </head>
//   <body>
//   </body>
//   </html>
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 下面这个插件是用来把webpack的错误和日志收集起来，漂亮的展示给用户
// friendly-errors-webpack-plugin插件，把webpack编译出来的错误展示给我们，方便调试
// 安装 npm install friendly-errors-webpack-plugin --save-dev
// 基本使用
// plugins: [
//   new FriendlyErrorsWebpackPlugin(),
// ]
// 注意点，使用这个插件要遵守下点
// 您需要关闭所有的错误日志记录，将webpack配置静默选项设置为true
// 也就是遵循以下三点即可
// 在使用webpack-dev-middleware插件，关于这个插件的解释在我的dev-sever-js配置文件中有解释，设置以下内容
// app.use(require('webpack-dev-middleware')(compiler, {
//   quiet: true, // 必须设置
//   publicPath: config.output.publicPath,
// }));
// 使用webpack-dev-server时设置如下
// {
//   devServer: {
//     quiet: true
//   }
// }
// 使用webpack-hot-middleware中间件，关于这个插件的解释也在我的dev-server-js文章中
// app.use(require('webpack-hot-middleware')(compiler, {
//   log: () => {}
// }));
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

const portfinder = require('portfinder')
//第一步
const express = require('express')
const app = express()//请求server
var appData = require('../data.json')//加载本地数据文件
var seller = appData.seller//获取对应的本地数据
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

// 下面是合并配置对象，将这个配置文件特有的配置添加替换到base配置文件中
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    // 下面是把utils配置中的处理css类似文件的处理方法拿过来，并且不生成cssMap文件
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  // debtool是开发工具选项，用来指定如何生成sourcemap文件，cheap-module-eval-source-map此款soucemap文件性价比最高
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    //第二步找到devServer,在里面添加
before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })//接口返回json数据，上面配置的数据seller就赋值给data请求后调用
  }),
  app.get('/api/goods', (req, res) => {
    res.json({
      errno: 0,
      data: goods
    })
  }),
  app.get('/api/ratings', (req, res) => {
    res.json({
      errno: 0,
      data: ratings
    })
  })
}
  },

  plugins: [
    // DefinePlugin内置webpack插件，专门用来定义全局变量的，下面定义一个全局变量 process.env 并且值是如下
    /*  'process.env': {
     NODE_ENV: '"development"'
     } 这样的形式会被自动转为
     'process.env': '"development"'
     各位骚年看好了，development如果不加双引号就当做变量处理，程序会报错
     */
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    // 目前不是很懂
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    // 当webpack编译错误的时候，来中端打包进程，防止错误代码打包到文件中，你还不知道
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true //设置为true表示把所有的js文件都放在body标签的屁股
    }),
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

1.8 webpack.prod.conf.js        webpack生产环境的核心配置文件

'use strict'
// 下面是引入nodejs的路径模块
const path = require('path')
// 下面是utils工具配置文件，主要用来处理css类文件的loader
const utils = require('./utils')
// 下面引入webpack，来使用webpack内置插件
const webpack = require('webpack')
// 下面是config目录下的index.js配置文件，主要用来定义了生产和开发环境的相关基础配置
const config = require('../config')
// 下面是webpack的merger插件，主要用来处理配置对象合并的，可以将一个大的配置对象拆分成几个小的，合并，相同的项将覆盖
const merge = require('webpack-merge')
// 下面是webpack.base.conf.js配置文件，用来处理不同类型文件的loader
const baseWebpackConfig = require('./webpack.base.conf')
// copy-webpack-plugin使用来复制文件或者文件夹到指定的目录的
const CopyWebpackPlugin = require('copy-webpack-plugin')
// html-webpack-plugin是生成html文件，可以设置模板
const HtmlWebpackPlugin = require('html-webpack-plugin')
// extract-text-webpack-plugin这个插件是用来将bundle中的css等文件产出单独的bundle文件的
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// optimize-css-assets-webpack-plugin插件的作用是压缩css代码的，还能去掉extract-text-webpack-plugin插件抽离文件产生的重复代码，
// 因为同一个css可能在多个模块中出现所以会导致重复代码，换句话说这两个插件是两兄弟
// optimize-css-assets-webpack-plugin插件
// 在生产环境中使用extract-text-webpack-plugin，最好也使用这个插件
// 使用方法如下
// 安装 npm install --save-dev optimize-css-assets-webpack-plugin
// 还要安装 cssnano 这是一个css编译器 npm install --save-dev cssnano 这个vue-cli脚手架并没有使用cssnano，但是这个插件的官方说要安装cssnano，这是不是一个bug??
//   new OptimizeCssAssetsPlugin({
//     assetNameRegExp: /\.optimize\.css$/g, // 不写默认是/\.css$/g
//     cssProcessor: require('cssnano'), // 编译器选项，不写默认是cssnano，所以使用这个插件不管怎样都要cssnano
//     cssProcessorOptions: { discardComments: {removeAll: true } }, // 传递给编译器的参数
//     canPrint: true // 是否能够输出信息
//   })
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')

// UglifyJsPlugin插件是专门用来压缩js文件的
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// 如果当前环境变量NODE_ENV的值不是testing，则设置env为"production"
const env = require('../config/prod.env')

// 把当前的配置对象和基础的配置对象合并
const webpackConfig = merge(baseWebpackConfig, {
  module: {
    // 下面就是把utils配置好的处理各种css类型的配置拿过来，和dev设置一样，就是这里多了个extract: true，此项是自定义项，设置为true表示，生成独立的文件
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  // devtool开发工具，用来生成个sourcemap方便调试
  // 按理说这里不用生成sourcemap多次一举，这里生成了source-map类型的map文件，只用于生产环境
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    // 打包后的文件放在dist目录里面
    path: config.build.assetsRoot,
    // 文件名称使用 static/js/[name].[chunkhash].js, 其中name就是main,chunkhash就是模块的hash值，用于浏览器缓存的
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    // chunkFilename是非入口模块文件，也就是说filename文件中引用了chunckFilename
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    // 下面是利用DefinePlugin插件，定义process.env环境变量为env
    new webpack.DefinePlugin({
      'process.env': env
    }),
    // UglifyJsPlugin插件是专门用来压缩js文件的
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      // 生成独立的css文件，下面是生成独立css文件的名称
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      // 压缩css文件
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    // 生成html页面
    new HtmlWebpackPlugin({
      //非测试环境生成index.html
      filename: config.build.index,
      template: 'index.html',
      // 将js文件放到body标签的结尾
      inject: true,
      minify: {
        // 压缩产出后的html页面
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      // 分类要插到html页面的模块
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vender modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    // 下面的插件是将打包后的文件中的第三方库文件抽取出来，便于浏览器缓存，提高程序的运行速度
    new webpack.optimize.CommonsChunkPlugin({
      // common 模块的名称
      name: 'vendor',

      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        // 将所有依赖于node_modules下面文件打包到vendor中
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    // 把webpack的runtime代码和module manifest代码提取到manifest文件中，防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    // 下面是复制文件的插件，我认为在这里并不是起到复制文件的作用，而是过滤掉打包过程中产生的以.开头的文件
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  // 开启Gzi压缩打包后的文件，老铁们知道这个为什么还能压缩吗？？，就跟你打包压缩包一样，把这个压缩包给浏览器，浏览器自动解压的
  // 你要知道，vue-cli默认将这个神奇的功能禁用掉的，理由是Surge 和 Netlify 静态主机默认帮你把上传的文件gzip了
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  // 打包编译后的文件打印出详细的文件信息，vue-cli默认把这个禁用了，可以自行配置
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

2.config

2.1 dev.env.js

'use strict'
// 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被后者覆盖，
const merge = require('webpack-merge')
// 导入prod.env.js配置文件
const prodEnv = require('./prod.env')
// 将两个配置对象合并，最终结果是 NODE_ENV: '"development"'
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

2.2 index.js

'use strict'
// Template version: 1.2.7
// see http://vuejs-templates.github.io/webpack for documentation.
// path是node.js的路径模块，用来处理路径统一的问题
const path = require('path')

module.exports = {

  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: true,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    // 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: false,
  },
// 下面是build也就是生产编译环境下的一些配置
  build: {
    // Template for index.html
    // 下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html
//path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    // 下面定义的是静态资源的根目录 也就是dist目录
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
    assetsSubDirectory: 'static',
    // 下面定义的是静态资源的公开路径，也就是真正的引用路径
    assetsPublicPath: '/',

    /**
     * Source Maps
     */
// 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 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
    // 下面是是否在生产环境中压缩代码，如果要压缩必须安装compression-webpack-plugin
    productionGzip: false,
    // 下面定义要压缩哪些类型的文件
    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
    // 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭
bundleAnalyzerReport: process.env.npm_config_report
  }
}

2.3 prod.env.js

'use strict'
// 作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境
module.exports = {
  NODE_ENV: '"production"'
}

3.node_modules

用来存放项目依赖的各种包

4.src

用来存放项目代码

5.static

静态资源目录 如图片、字体等

6.babelrc

babelrc文件是babel的配置文件

主要适用于编译es6转义为es5

一般用2个插件es2015,stage-2,transfer-runtime

"comments": false,表示不生成注释，反之就是生成注释

文件配置如下：

{
//  .babelrc文件是babel的配置文件
//  主要适用于编译es6转义为es5'
//  "presets"表示预设，表示babel预先需要安装的一些插件。
//  stage表示ECMA的草案，后面的数字表示草案的阶段，数字越小表示包含的草案就越多
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
//  表示其他的预设插件，其他的预设插件都是通过plugins来配置的，
//  transform-runtime表示把ES6的一些语法进行一些特殊的转化例如将ES6转化成ES5
//  transform-vue-jsx：JSX是基于Javascript的语言扩展， 它允许在Javascript代码中插入XML语法风格的代码。
//  预设这个之后在babel和webpack打包的时候就会将JSX的语法编译为js（PS；浏览器默认是解析不了JSX的）
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

6.1 JSX简介在vue中的用法transform-vue-jsx引入的原因和用法：（以下摘自一个博友的文章如有侵权请联系删除，此处只做为笔记记录）

我们知道Vue 2.0中对虚拟DOM的支持。我们可以通过JavaScript动态的创建元素，而不用在template中写HTML代码。虚拟DOM最终将被渲染为真正的DOM。

data: {
msg: 'Hello world'
},
render (h) {
return h(
'div',
{ attrs: { id: 'my-id' },
[ this.msg ]
);
}

渲染后的内容为：

<div id='my-id'>Hello world</div>

Vue 2.0中的render为我们开启了一片新的天地，赋予了我们无限的想象力。比如，我们可以把React中用到的JSX语法应用到Vue中来。接下来，我们就聊聊怎么在Vue项目中使用JSX.

6.2 JSX简介

JSX是基于Javascript的语言扩展， 它允许在Javascript代码中插入XML语法风格的代码。如下所示：

data: {
  msg: 'Hello world'
},
render (h) {
  return (
    <div id='my-id'>,
      { this.msg } 
    </div>
  );
}

但值得注意的是，浏览器默认是解析不了JSX的，它必须要先编译成标准的JavaScript代码才可以运行。就像我们需要将sass或者less编译为CSS代码之后才能运行一样。

6.3 在Vue中使用JSX

Vue框架并没有特意地去支持JSX，其实它也没必要去支持，因为JSX最后都会编译为标准的JavaScript代码。既然这样， 那Vue和JSX为什么能配合在一起使用呢？ 很简单， 因为Vue支持虚拟DOM， 你可以用JSX或者其他预处理语言，只要能保证render方法正常工作即可。

Vue官方提供了一个叫做babel-plugin-transform-vue-jsx的插件来编译JSX， 我们稍后介绍如何使用它。

6.4 为什么要在Vue中使用JSX

为什么要再Vue中使用JSX ? 其实Vue并没有强迫你去使用JSX， 它只是提供了一种新的方式而已。正所谓萝卜青菜，各有所爱。有的人觉得在render方法中使用JSX更简洁，有的人却觉得在JavaScript代码中混入HTML代码很恶心。反正你喜欢就用，不喜欢就不用呗。废话少说，我们先看一个简单的应用：

script.js

new Vue({
  el: '#app',
  data: {
    msg: 'Click to see the message'
  },
  methods: {
    hello () {
      alert('This is the message')
    }
  }
});

index.html

<div id="app">
    <span 
        class="my-class" 
        style="cursor: pointer" 
        v-on:click="hello"
    >
        {{ msg }}
    </span>
</div>

代码很简单，就是在页面上显示一个span, 里面的内容为"Click to see the message"。当点击内容时，弹出一个alert。我们看看用render怎么实现。

6.5 用Vue 2.0中的render函数实现

script.js

new Vue({
  el: '#app',
  data: {
    msg: 'Click to see the message'
  },
  methods: {
    hello () {
      alert('This is the message')
    }
  },
  render (createElement) {
    return createElement(
      'span',
      {
        class: { 'my-class': true },
        style: { cursor: 'pointer' },
        on: {
          click: this.hello
        }
      },
      [ this.msg ]
    );
  },
});

index.html

<div id="app"><!--span will render here--></div>

new Vue({
  el: '#app',
  data: {
    msg: 'Click to see the message'
  },
  methods: {
    hello () {
      alert('This is the message')
    }
  },
  render (createElement) {
    return createElement(
      'span',
      {
        class: { 'my-class': true },
        style: { cursor: 'pointer' },
        on: {
          click: this.hello
        }
      },
      [ this.msg ]
    );
  },
});

index.html

<div id="app"><!--span will render here--></div>

6.6 使用JSX来实现

script.js

new Vue({
  el: '#app',
  data: {
    msg: 'Click to see the message.'
  },
  methods: {
    hello () {
      alert('This is the message.')
    }
  },
  render: function render(h) {
    return (
      <span
        class={{ 'my-class': true }}
        style={{ cursor: 'pointer' }}
        on-click={ this.hello }
      >
        { this.msg }
      </span>
    )
  }
});

index.html和上文一样。

6.7 babel-plugin-transform-vue-jsx

正如前文所说， JSX是需要编译为JavaScript才可以运行的， 所以第三个样例需要有额外的编译步骤。这里我们用Babel和Webpack来进行编译。

打开你的webpack.config.js文件， 加入babel loader:

loaders: [
  { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]

新建或者修改你的.babelrc文件，加入 babel-plugin-transform-vue-jsx 这个插件

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}

现在运行webpack, 代码里面的JSX就会被正确的编译为标准的JavaScript代码。

7.editorconfig

编辑代码风格

root = true

[*]
charset = utf-8
indent_style = space  //代码的缩进方式基于一个空格缩进
indent_size = 2    // //缩进长度 2格
end_of_line = lf   //换行符风格
insert_final_newline = true //创建一个新文件的时候会在文件末尾插入新行
trim_trailing_whitespace = true//自动移除行尾空格

8.eslintignore：忽略ESLint语法检查的文件目录配置

/build/
/config/
/dist/
/*.js

9.eslintrc.js  eslint的配置文件

// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    //表示继承一个标准规则具体在github查看standard的标准是在安装vue-cil的时候被选中的
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
    //定义规则进行修改
  rules: {
    // allow async-await
    'generator-star-spacing': 'off',
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    //需要分号；否则报错的配置http://eslint.org/docs/rules/semi
    'semi':['error','always'],
    //缩进设置为0，使用webstorm默认的缩进方式
    'indent':0
  }
}

10.gitignore

表示这里面的内容再提交到git仓库的时候忽略

11.postcssrc.js

应该是你用到的css的前or后处理器的配置吧

12.data.json

在没用后台数据的时候模拟的数据集合

13.index.html

首页

14.package.json

整个项目的一个启动入口和依赖包安装指南（npm install会安装的包基本都在这里配了）

15.package_lock.json

对于npm修改node_modules树或package.json的任何操作，将自动生成package-lock.json。 它描述了生成的确切树，以便后续安装能够生成相同的树，而不管中间依赖性更新如何。

该文件旨在被提交到源存储库，并提供各种用途：描述依赖关系树的单一表示形式，以确保队友，部署和持续集成确保安装完全相同的依赖关系。

就比如说你安装了  node1.0版本，你队友安装的时候自动会安装1.0版本的，不会再装一个2.0版本的最后提交代码产生冲突

参照：https://docs.npmjs.com/files/package-lock.json

16.README.md

项目介绍

整体简介