Vue 脚手架项目分析

build：webpack的一些配置文件以及服务启动文件
config：多为build中所依赖的文件
src: 页面以及逻辑文件夹
static: 字体以及公共样式文件夹
.babelrc: es6编译文件配置，将es6编译为es5
.editorconfig: 编写风格配置文件，比如缩进文件格式等等
.eslintignore: 忽略检测一些文件格式，比如我们默认忽略检测build以及config中的js
.eslintrc.js: 代码规范化配置文件
.gitignore: 忽略上传一些文件或配置
.postcsssrc.js: 用js来处理css
index.html: 主文件入口
package.json: npm依赖以及开发生产环境所以来的模块包
README.md: 解释说明一下本项目是做什么的

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

npm install --save-dev babel-preset-stage-2

 render (createElement) {
    return createElement(
      'span',
      {
        class: { 'my-class': true },
        style: { cursor: 'pointer' },
        on: {
          click: this.hello
        }
      },
      [ this.msg ]
    );
  },

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

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

root = true

[*]
charset = utf-8
# 缩进风格为空格
indent_style = space
# 缩进大小为2
indent_size = 2
# 表示以 Unix 风格的换行符结尾
end_of_line = lf
insert_final_newline = true
#设为 true 表示会除去换行行首的任意空白字符。
trim_trailing_whitespace = true

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  //必备要素之一，入口
  entry: {
    app: './src/main.js'
  },
//输出文件。打包到哪
  output: {
  //读取utils index.js中的build的assetRoot,就是 'dist'文件夹
    path: config.build.assetsRoot,
// 导出文件的文件名
    filename: '[name].js',
 // 生产模式或开发模式下的html、js等文件内部引用的公共路径
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
//文件解析 resolve
  resolve: { 
// 自动解析确定的扩展名，使导入模块时不带扩展名
    extensions: ['.js', '.vue', '.json'],
    alias: {
// 创建import或 require的别名
      'vue$': 'vue/dist/vue.esm.js',
//用@来代替src
      '@': resolve('src'),
    }
  },
//如何处理项目中不同类型的模块
  module: {
    rules: [
      {
        test: /\.vue$/,// vue文件后缀
        loader: 'vue-loader',// 使用vue-loader进行处理
        options: vueLoaderConfig// 对vue-loader做的额外的选项配置
      },
      {
        test: /\.js$/,  //js 文件后缀
        loader: 'babel-loader',  // 使用babel-loader进行处理
//必须处理包含src、test的文件夹
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
 // 图片后缀
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
 // 使用url-loader处理
        loader: 'url-loader',
//对loader做的额外配置
        options: {
// 对于小于10Kb的以base64进行引用
          limit: 10000,
 // 文件名为name.7位hash值.扩展名
          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'
  }

module: {
    // 通过传入一些配置来获取rules配置，此处传入了sourceMap: false，表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
  }

exports.styleLoaders = function (options) {
  var output = [];  // 定义返回数组，数组中保存的是针对各类型的样式文件的处理方式

  var loaders = exports.cssLoaders(options) // 调用cssLoaders方法返回各类型的样式对象 (css: loader)
  for (var extension in loaders) {  // 遍历loaders
    var loader = loaders[extension] // 根据遍历获得的key(extension) 来得到value (loader)
    output.push({
      test: new RegExp(‘\\.’ + extension + ‘$’),  //  处理文件的类型
      use: loader // 用loader来处理，loader来自loaders【extension】
    })
  }
  return output
}

exports.cssLoaders = function (options) {
  options = options || {}

  var cssLoader = {
    loader: 'css-loader',
    options: { // options 是 css-loader的选项配置
      minimize: process.env.NODE_ENV === ‘production’, // 生成生产环境下的压缩文件
      sourceMap: options.sourceMap // 根据参数是否要生成sourceMap文件
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {   // 生成loader
    var loaders = [cssLoader]  // 默认的loader是css-loader
    if (loader) { // 如果参数loader还在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {  // 将loaderOptions和sourceMap组成一个对象
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {  // 如果传入的options存在extract并且为true
      return ExtractTextPlugin.extract({  // ExtractTextPlugin 分离js中引入的css文件
        use: loaders, // 处理loader
        fallback: ‘vue-style-loader’ // 没有被提取分离时使用的loader
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
  return { // 返回css类型对应的loader组成的对象  generateLoaders()来生成loader
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

plugins: [
//定义全局变量
    new webpack.DefinePlugin({  
      ‘process.env’: config.dev.env // 当前环境为开发环境
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(), // 热更新插件
 new webpack.NamedModulesPlugin(), //这个插件的作用是在热加载时直接返回更新文件名，而不是文件的id。
    new webpack.NoEmitOnErrorsPlugin(), // 不触发错误，即编译后运行的包正常运行
    // https://github.com/ampedandwired/html-webpack-plugin 
    new HtmlWebpackPlugin({ // 自动生成html文件，比如编译后文件的引用
      filename: ‘index.html’, // 生成的文件名
      template: ‘index.html’, // 模板
      inject: true
    }),
 // copy custom static assets
//将资源进行复制的插件
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])，
    new FriendlyErrorsPlugin() // 友好的错误提示
  ]

const baseWebpackConfig = require('./webpack.base.conf')
const merge = require('webpack-merge')

const webpackConfig = merge(baseWebpackConfig, {...})

module: {  
    rules: utils.styleLoaders({    
    sourceMap: config.build.productionSourceMap,     
    extract: true   
 }) 
}

output: {   
    path: config.build.assetsRoot,  //导出文件目录 
    filename: utils.assetsPath('js/[name].[chunkhash].js'),   //导出的文件名 
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')   //非入口文件的文件名，而又需要被打包出来的文件命名配置,如按需加载的模块 
}

  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env  // 配置全局环境为生产环境
    }),
    new webpack.optimize.UglifyJsPlugin({ // js压缩插件
      compress: { // 压缩配置
        warnings: false //不显示警告
      },
      sourceMap: true // 生成sourceMap文件
    }),
    // extract css into its own file
    new ExtractTextPlugin({ // 将js中引入css分离插件
      filename: utils.assetsPath('css/[name].[contenthash].css') // 分离出来的css文件名
    }),
 
    new OptimizeCSSPlugin(),    // 压缩提取出的css,并解决ExtractTextPlugin分离出的js重复问题(多个文件引用同一个css文件)
    // 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
    new HtmlWebpackPlugin({  //生成html的插件,引入css文件和js文件
      filename: config.build.index, // 生成的html的文件名
      template: 'index.html', // 依据的模板
      inject: true, // 注入的js文件会被放在Body标签中，当值为'head'的时候，将被放在head标签中
      minify: { // 压缩配置
        removeComments: true, // 删除html中的注释代码
        collapseWhitespace: true, // 删除html中的空白符
        removeAttributeQuotes: true // 删除html元素中属性的引号
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency' //按dependency的顺序引入
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({ //分离公共js到vendor中
      name: 'vendor', // 文件名
      minChunks: function (module, count) { // 声明公告的模块来自 node_modules文件夹
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
//上面虽然已经分离了第三方库,每次修改编译都会改变vendor的hash值，导致浏览器缓存失效。
// 原因是vendor包含了webpack在打包过程中会产生一些运行时代码，运行时代码中实际上保存了打包后的文件名。
// 当修改业务代码时,业务代码的js文件的hash值必然会改变。一旦改变必然会导致vendor变化。vendor变化会导致其hash值变化。
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({  //下面主要是将运行时代码提取到单独的manifest文件中，防止其影响vendor.js
      name: 'manifest',
      chunks: ['vendor']
    }),
    // copy custom static assets
    new CopyWebpackPlugin([  // 复制静态资源,将static文件内的内容复制到指定文件夹
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']  //忽视.*文件
      }
    ])
  ]

if (config.build.productionGzip) {  // 配置文件开启gzip压缩
  var CompressionWebpackPlugin = require('compression-webpack-plugin')  // 引入压缩文件的组件，该插件会对生成的文件进行压缩，生成一个.gz文件

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',  // 目标文件名
      algorithm: 'gzip', // 使用gzip压缩
      test: new RegExp( // 满足正则表达式的文件会被压缩
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,  // 资源文件大于10KB的时候会被压缩
      minRatio: 0.8  // 最小压缩比达到0.8的时候会被压缩
    })
  )
}

npm run dev

  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js"
  }

require('./check-versions')()  // 检查版本

var config = require('../config')  // nodejs环境配置
if (!process.env.NODE_ENV) {
  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}

var opn = require('opn')  // 强制打开浏览器
var path = require('path')  // 提供文件路径的方法
var express = require('express')  // 借助express来启动服务
var webpack = require('webpack')
var proxyMiddleware = require('http-proxy-middleware') // http代理中间件
var webpackConfig = require('./webpack.dev.conf') // 依赖开发配置

// default port where dev server listens for incoming traffic
var port = process.env.PORT || config.dev.port // 端口号
// automatically open browser, if not set will be false
var autoOpenBrowser = !!config.dev.autoOpenBrowser  // 是否打开浏览器
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
var proxyTable = config.dev.proxyTable  // http的代理url

var app = express(); // 启动express
var compiler = webpack(webpackConfig);  // webpack编译

// devMiddleware这个中间件是express专门为webpack开发的中间件
// webpack-dev-middleware的作用
// 1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件
// 2.当文件改变时,会自动编译。
// 3.当在编译过程中请求某个资源时，webpack-dev-server不会让这个请求失败，而是会一直阻塞它，直到webpack编译完毕
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  quiet: true
});

// webpack-hot-middleware的作用就是实现浏览器的无刷新更新,这个中间件是webpack中的一个小亮点
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
  log: () => {}
});
// force page reload when html-webpack-plugin template changes
//声明hotMiddleware无刷新更新的时机:html-webpack-plugin 的template更改之后
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  });
});

// proxy api requests
//将代理请求的配置应用到express服务上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(options.filter || context, options))
})

// handle fallback for HTML5 history API
//使用connect-history-api-fallback匹配资源
//如果不匹配就可以重定向到指定地址
app.use(require('connect-history-api-fallback')())

app.use(devMiddleware)  // 应用devMiddleware中间件
app.use(hotMiddleware)  // 应用hotMiddleware中间件

// 配置express静态资源目录
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
app.use(staticPath, express.static('./static'))

var uri = 'http://localhost:' + port  

devMiddleware.waitUntilValid(function () {  //编译成功后打印uri
  console.log('> Listening at ' + uri + '\n')
})

module.exports = app.listen(port, function (err) {  // 启动express服务
  if (err) {
    console.log(err)
    return
  }

  // when env is testing, don't need open it
 // 满足条件则自动打开浏览器
  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    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,
    }
  },

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

process.env.NODE_ENV = 'production' // 设置当前的环境为production

var ora = require('ora') // 终端显示的转轮loading
var rm = require('rimraf') // node环境下rm -rf的命令库
var path = require('path') // 文件路径处理
var chalk = require('chalk')  // 终端显示带颜色的文字
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')  // 生产环境下的webpack配置

var spinner = ora('building for production...')  // 在终端显示ora库的loading效果
spinner.start()

// 删除已编译文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
//在删除完成的回调函数中开始编译
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()  // 停止loading
    if (err) throw err
    // 在编译完成的回调函数中,在终端输出编译的文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')

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