vue-cli配置介绍

好多人只知道用vue-cli,却不知道脚手架的配置文件代表什么,现在就给大家介绍一下脚手架的相关配置.

vue项目结构

├── build --------------------------------- webpack相关配置文件 

│   ├── build.js --------------------------webpack打包配置文件 

│   ├── check-versions.js ------------------------------ 检查npm,nodejs版本 

│   ├── dev-client.js ---------------------------------- 设置环境 

│   ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目 

│   ├── utils.js --------------------------------------- 配置资源路径，配置css加载器 

│   ├── vue-loader.conf.js ----------------------------- 配置css加载器等 

│   ├── webpack.base.conf.js --------------------------- webpack基本配置 

│   ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置 

│   ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置 

├── config ---------------------------------- 配置文件 

├── node_modules ---------------------------- 存放依赖的目录 

├── src ------------------------------------- 源码 

│   ├── assets ------------------------------ 静态文件 

│   ├── components -------------------------- 组件  

│   ├── main.js ----------------------------- 主js 

│   ├── App.vue ----------------------------- 项目入口组件 

│   ├── router ------------------------------ 路由 

├── package.json ---------------------------- node配置文件 

├── .babelrc--------------------------------- babel配置文件 

├── .editorconfig---------------------------- 编辑器配置 

├── .gitignore------------------------------- 配置git可忽略的文件

主要的配置文件

首选来看一下package.json里面scripts字段，看一下在执行npm run dev 和npm run build时做了什么

 "name": "laoli", 

  "version": "1.0.0", 

  "description": "aaa", 

  "scripts": { 

        "dev": "node build/dev-server.js", 

        "start": "node build/dev-server.js", 

        "build": "node build/build.js" 

  } 

当我们执行npm run dev时，首选执行的是dev-server.js

当我们执行npm run build时，首选执行的是build.js

dev-server.js

• 引入配置文件
• 引入相关插件
• 创建express实例
• 配置webpack-dev-middleware和webpack-hot-middleware
• 配置静态资源路径，并挂到express服务上
• 启动服务器，并判断是否自动打开默认浏览器
• 监听端口

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

//引入相关配置 

var config = require('../config') 

// 检查Node的环境变量，如果没有则使用配置文件中设置的环境 

if (!process.env.NODE_ENV) { 

  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 

}


  
  

   
   
//opn -- A better node-open. Opens stuff like websites, files, executables. Cross-platform.
//这里用来打开默认浏览器，打开dev-server监听的端口
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
//express中间件，用于http请求代理到其他服务器
var proxyMiddleware = require('http-proxy-middleware')
//判断当前环境，选择导入的webpack配置
var webpackConfig = process.env.NODE_ENV === 'testing'
  ? require('./webpack.prod.conf')

   
   

    
    require('./webpack.dev.conf')
   
   

  
  

// default port where dev server listens for incoming traffic 

//默认的dev-server的监听端口 

var port = process.env.PORT || config.dev.port 

// automatically open browser, if not set will be false 

//是否自动打开浏览器，默认是false 

var autoOpenBrowser = !!config.dev.autoOpenBrowser 

// Define HTTP proxies to your custom API backend 

// https://github.com/chimurai/http-proxy-middleware 

//定义http代理到你的自定义的API后端 

var proxyTable = config.dev.proxyTable 

//创建express实例 

var app = express() 

// 根据webpack的config创建Compiler对象 

var compiler = webpack(webpackConfig)

//使用compiler相应的文件进行编译和绑定，编译后的内容将存放在内存中 

var devMiddleware = require('webpack-dev-middleware')(compiler, { 

  publicPath: webpackConfig.output.publicPath, 

  quiet: true 

}) 

//用于实现热重载 

var hotMiddleware = require('webpack-hot-middleware')(compiler, { 

  log: false, 

  heartbeat: 2000 

}) 

// force page reload when html-webpack-plugin template changes 

//当html-webpack-plugin提交页面之后，使用热重载强制页面重载 

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 

//一个解决单页的重定向错误的插件 

app.use(require('connect-history-api-fallback')())

// serve webpack bundle output 

// 使用devMiddleware，webpack编译后的文件将挂到express服务器上 

app.use(devMiddleware)

// enable hot-reload and state-preserving 

// compilation error display 

// 使用热重载中间件 

app.use(hotMiddleware)

// serve pure static assets 

//配置静态资源路径 

var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 

//将静态文件挂到express服务器上 

app.use(staticPath, express.static('./static')) 

//设置应用的url 

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

var _resolve 

var readyPromise = new Promise(resolve => { 

  _resolve = resolve 

})

console.log('> Starting dev server...') 

//devMiddleware valid之后，启动服务 

devMiddleware.waitUntilValid(() => { 

  console.log('> Listening at ' + uri + '\n') 

  // when env is testing, don't need open it 

  //如果设置为自动打开浏览器，通过opn打开uri 

  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') { 

    opn(uri) 

  } 

  _resolve() 

}) 

//监听配置的端口 

var server = app.listen(port)

module.exports = { 

  ready: readyPromise, 

  close: () => { 

    server.close() 

  } 

}

webpack.base.conf.js

• 配置编译入口和输出路径
• 模块resolve的规则
• 配置不同类型模块的处理规则

var path = require('path') 

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' 

  }, 

  output: { 

     //webpack输出文件的路径 

    path: config.build.assetsRoot, 

    //输出的文件命名格式 

    filename: '[name].js', 

    // webpack编译输出的发布路径 

    publicPath: process.env.NODE_ENV === 'production' 

      ? config.build.assetsPublicPath 

      : config.dev.assetsPublicPath 

  }, 

  //模块resolve的规则 

  resolve: { 

    //resolve的后缀名 

    extensions: ['.js', '.vue', '.json'], 

    //配置路径别名，比如import Vue from 'vue/dist/vue.common.js'--> import Vue from 'vue' 

    alias: { 

      'vue$': 'vue/dist/vue.esm.js', 

      '@': resolve('src') 

    } 

  }, 

  //配置不同类型模块的处理规则 

  module: { 

    rules: [ 

    // src和test文件夹下的.js和.vue文件使用eslint-loader 

      { 

        test: /.(js|vue)$/, 

        loader: 'eslint-loader', 

        enforce: 'pre', 

        include: [resolve('src'), resolve('test')], 

        options: { 

          formatter: require('eslint-friendly-formatter') 

        } 

      }, 

      //所有的.vue文件使用vue-loader 

      { 

        test: /.vue$/, 

        loader: 'vue-loader', 

        options: vueLoaderConfig 

      }, 

      //src和test下的.js文件使用babel-loader 

      { 

        test: /.js$/, 

        loader: 'babel-loader', 

        include: [resolve('src'), resolve('test')] 

      }, 

      //所有的图片文件使用url-loader 

      { 

        test: /.(png|jpe?g|gif|svg)(\?.*)?$/, 

        loader: 'url-loader', 

        options: { 

          limit: 10000, 

          name: utils.assetsPath('img/[name].[hash:7].[ext]') 

        } 

      }, 

      //所有的音频文件使用url-loader 

      { 

        test: /.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 

        loader: 'url-loader', 

        options: { 

          limit: 10000, 

          name: utils.assetsPath('media/[name].[hash:7].[ext]') 

        } 

      }, 

      //所有的字体文件使用url-loader 

      { 

        test: /.(woff2?|eot|ttf|otf)(\?.*)?$/, 

        loader: 'url-loader', 

        options: { 

          limit: 10000, 

          name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 

        } 

      } 

    ] 

  } 

}

webpack.dev.conf.js

• 合并基础的webpack配置
• 使用styleLoaders
• 配置Source Maps
• 配置webpack插件

• var utils = require('./utils') 
  
  var webpack = require('webpack') 
  
  var config = require('../config') 
  
  var merge = require('webpack-merge') 
  
  var baseWebpackConfig = require('./webpack.base.conf') 
  
  //生成html文件并自动注入依赖文件的插件， script & link 
  
  var HtmlWebpackPlugin = require('html-webpack-plugin') 
  
  //一个输出webpack警告，错误的插件 
  
  var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
  
  // add hot-reload related code to entry chunks 
  
  //添加热重载相关的代码到entry chunks 
  
  Object.keys(baseWebpackConfig.entry).forEach(function (name) { 
  
    baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 
  
  }) 
  
  //合并webpack.base.conf 
  
  module.exports = merge(baseWebpackConfig, { 
  
    module: { 
  
      //使用styleLoaders处理样式文件 
  
      rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 
  
    }, 
  
    // cheap-module-eval-source-map is faster for development 
  
    //配置Source Maps
  
  devtool: '#cheap-module-eval-source-map', 
  
    //配置webpack插件 
  
    plugins:  
  
      new webpack.DefinePlugin({ 
  
        'process.env': config.dev.env 
  
      }), 
  
      // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 
  
      new webpack.HotModuleReplacementPlugin(), 
  
      //在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误。 
  
      new webpack.NoEmitOnErrorsPlugin(), 
  
      // https://github.com/ampedandwired/html-webpack-plugin 
  
      new HtmlWebpackPlugin({ 
  
        filename: 'index.html', 
  
        template: 'index.html', 
  
        inject: true 
  
      }), 
  
      new FriendlyErrorsPlugin() 
  
     
  
  })

  ** 配置Source Maps

  • source-map 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的sourcemap，但是它会减慢打包文件的构建速度；
  • cheap-module-source-map在一个单独的文件中生成一个不带列映射的map，不带列映射提高项目构建速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
  • eval-source-map 使用eval打包源文件模块，在同一个文件中生成干净的完整的sourcemap。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项，但是在生产阶段一定不要用这个选项；
  • cheap-module-eval-source-map 这是在打包文件时最快的生成source map的方法，生成的SourceMap 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；
  
  

build.js

• webpack编译
• 输出信息

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

process.env.NODE_ENV = 'production' 

//控制台loading动画 

var ora = require('ora') 

var rm = require('rimraf') 

var path = require('path') 

// 高亮控制台输出的插件 

var chalk = require('chalk') 

var webpack = require('webpack') 

var config = require('../config') 

var webpackConfig = require('./webpack.prod.conf') 

//在控制台输出building for production... 

var spinner = ora('building for production...') 

//开始loading动画 

spinner.start() 

//获取输出文件路径 

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 

  if (err) throw err 

  //webpack编译 

  webpack(webpackConfig, function (err, stats) { 

    //停止loading动画 

    spinner.stop() 

    //如果错误抛出错误 

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

webpack.prod.conf.js

• 合并基础的webpack配置
• 配置webpack的输出
• 配置webpack插件
• 配置gzip模式
• 配置webpack-bundle-analyzer，分析打包后生成的文件结构

var env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')

  
  


   
   
config.build.env 

//合并webpack.base.conf 

var webpackConfig = merge(baseWebpackConfig, { 

module: { 

rules: utils.styleLoaders({ 

  sourceMap: config.build.productionSourceMap, 

  extract: true 

}) 

}, 

devtool: config.build.productionSourceMap ? '#source-map' : false, 

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 

}), 

//压缩js插件 

new webpack.optimize.UglifyJsPlugin({ 

  compress: { 

    warnings: false 

  }, 

  sourceMap: true 

}), 

// extract css into its own file 

//从bundle中抽取css文件 

new ExtractTextPlugin({ 

  filename: utils.assetsPath('css/[name].[contenthash].css') 

}), 

// Compress extracted CSS. We are using this plugin so that possible 

// duplicated CSS from different components can be deduped. 

//压缩抽取的css文件 

new OptimizeCSSPlugin({ 

  cssProcessorOptions: { 

    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 

//用于生成dist/index.html，加入hash用于缓存。hash不改变不进行更新 

new HtmlWebpackPlugin({ 

  filename: process.env.NODE_ENV === 'testing' 

    ? 'index.html' 

    : config.build.index, 

  template: 'index.html', 

  inject: true, 

  minify: { 

    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 

  chunksSortMode: 'dependency' 

}), 

// split vendor js into its own file 

//分离第三方js到单独的文件中 

new webpack.optimize.CommonsChunkPlugin({ 

  name: 'vendor', 

  minChunks: function (module, count) { 

    // 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 

    ) 

  } 

}), 

// 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({ 

  name: 'manifest', 

  chunks: ['vendor'] 

}), 

// copy custom static assets 

new CopyWebpackPlugin([ 

  { 

    from: path.resolve(__dirname, '../static'), 

    to: config.build.assetsSubDirectory, 

    ignore: ['.*'] 

  } 

]) 

] 

}) 

// 配置gzip模式 

if (config.build.productionGzip) { 

var 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 

}) 

) 

} 

//配置webpack-bundle-analyzer，分析打包后生成的文件结构 

if (config.build.bundleAnalyzerReport) { 

var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 

webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 

}

  
  


module.exports = webpackConfig 

config/index.js

最后是config中的index.js文件，它都配置了什么

var path = require('path')

module.exports = { 

    //打包时使用的配置 

  build: { 

    //webpack的环境 

    env: require('./prod.env'), 

    //输入的index.html的路径 

    index: path.resolve(__dirname, '../dist/index.html'), 

    //输出的目标文件夹路径 

    assetsRoot: path.resolve(__dirname, '../dist'), 

    //输出的子文件夹路径 

    assetsSubDirectory: 'static', 

    //发布路径 

    assetsPublicPath: '/', 

    //是否使用SourceMap 

    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的压缩文件类型 

    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 

    bundleAnalyzerReport: process.env.npm_config_report 

  }, 

  //开发时使用的配置 

  dev: { 

    //webpack环境 

    env: require('./dev.env'), 

    //端口 

    port: 8080, 

    //是否自动打开浏览器 

    autoOpenBrowser: true, 

    //输出的子文件夹路径 

    assetsSubDirectory: 'static', 

    //发布路径 

    assetsPublicPath: '/', 

    //配置代理表 

    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: false 

  } 

}