浅谈Vue-cli 命令行工具分析

vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。vue-webpack-boilerplate，官方定义为：

full-featured webpack setup with hot-reload, lint-on-save, unit testing & css extraction.

目录结构：

├── readme.md
├── build
│  ├── build.js
│  ├── utils.js
│  ├── vue-loader.conf.js
│  ├── webpack.base.conf.js 
│  ├── webpack.dev.conf.js
│  └── webpack.prod.conf.js
├── config
│  ├── dev.env.js
│  ├── index.js
│  └── prod.env.js
├── index.html
├── package.json
├── src
│  ├── app.vue
│  ├── assets
│  │  └── logo.png
│  ├── components
│  │  └── hello.vue
│  └── main.js
└── static

config 环境配置

config 配置文件用来配置 devserver 的相关设定，通过配置 node_env 来确定使用何种模式（开发、生产、测试或其他）

config
|- index.js #配置文件
|- dev.env.js #开发模式
|- prod.env.js #生产模式

index.js

'use strict'
const path = require('path');

module.exports = {
 dev: {

  // 路径
  assetssubdirectory: 'static', // path：用来存放打包后文件的输出目录
  assetspublicpath: '/', // publicpath：指定资源文件引用的目录
  proxytable: {}, // 代理示例： proxy: [{context: ["/auth", "/api"],target: "http://localhost:3000",}]

  // 开发服务器变量设置
  host: 'localhost',
  port: 8080,
  autoopenbrowser: true, // 自动打开浏览器devserver.open
  erroroverlay: true, // 浏览器错误提示 devserver.overlay
  notifyonerrors: true, // 配合 friendly-errors-webpack-plugin
  poll: true, // 使用文件系统(file system)获取文件改动的通知devserver.watchoptions

  // source map
  csssourcemap: false, // develop 下不生成 sourcemap
  devtool: 'eval-source-map' // 增强调试 可能的推荐值：eval, eval-source-map(推荐), cheap-eval-source-map, cheap-module-eval-source-map 详细：https://doc.webpack-china.org/configuration/devtool
 },
 build: {
  // index模板文件
  index: path.resolve(__dirname, '../dist/index.html'),

  // 路径
  assetsroot: path.resolve(__dirname, '../dist'),
  assetssubdirectory: 'static',
  assetspublicpath: '/',

  // bundleanalyzerreport
  bundleanalyzerreport: process.env.npm_config_report,

  // gzip
  productiongzip: false, // 默认 false
  productiongzipextensions: ['js', 'css'],

  // source map
  productionsourcemap: true, // production 下是生成 sourcemap
  devtool: '#source-map' // devtool: 'source-map' ?
 }
}

dev.env.js

'use strict'
const merge = require('webpack-merge');
const prodenv = require('./prod.env');

module.exports = merge(prodenv, {
  node_env: '"development"'
});
prod.env.js
'use strict'
module.exports = {
  node_env: '"production"'
};

build webpack配置

build
|- utils.js #代码段
|- webpack.base.conf.js #基础配置文件
|- webpack.dev.conf.js #开发模式配置文件
|- webpack.prod.conf.js #生产模式配置文件
|- build.js #编译入口

实用代码段 utils.js

const config = require('../config')
const path = require('path')

exports.assetspath = function (_path) {
  const assetssubdirectory = process.env.node_env === 'production'
    ? config.build.assetssubdirectory // 'static'
    : config.dev.assetssubdirectory
  return path.posix.join(assetssubdirectory, _path) // posix方法修正路径
}

exports.cssloaders = function (options) { // 示例： ({ sourcemap: config.dev.csssourcemap, usepostcss: true })
 options = options || {};

 // cssloader
 const cssloader = {
  loader: 'css-loader',
  options: { sourcemap: options.sourcemap }
 }
 // postcssloader
 var postcssloader = {
  loader: 'postcss-loader',
  options: { sourcemap: options.sourcemap }
 }

 // 生成 loader
 function generateloaders (loader, loaderoptions) {
  const loaders = options.usepostcss ? [cssloader, postcssloader] : [cssloader] // 设置默认loader
  if (loader) {
   loaders.push({
    loader: loader + '-loader',
    options: object.assign({}, loaderoptions, { // 生成 options 对象
     sourcemap: options.sourcemap
    })
   })
  }

  // 生产模式中提取css
  if (options.extract) { // 如果 options 中的 extract 为 true 配合生产模式
   return extracttextplugin.extract({
    use: loaders,
    fallback: 'vue-style-loader' // 默认使用 vue-style-loader
   })
  } else {
   return ['vue-style-loader'].concat(loaders)
  }
 }

 return { // 返回各种 loaders 对象
  css: generateloaders(),
  postcss: generateloaders(),
  less: generateloaders('less'), 
  // 示例：[
  // { loader: 'css-loader', options: { sourcemap: true/false } },
  // { loader: 'postcss-loader', options: { sourcemap: true/false } },
  // { loader: 'less-loader', options: { sourcemap: true/false } },
  // ]
  sass: generateloaders('sass', { indentedsyntax: true }),
  scss: generateloaders('sass'),
  stylus: generateloaders('stylus'),
  styl: generateloaders('stylus')
 }
}

exports.styleloaders = function (options) {
 const output = [];
 const loaders = exports.cssloaders(options);
 for (const extension in loaders) {
  const loader = loaders[extension]
  output.push({
    test: new regexp('\\.' + extension + '$'),
   use: loader
  })
  // 示例：
  // {
  //  test: new regexp(\\.less$),
  //  use: {
  //   loader: 'less-loader', options: { sourcemap: true/false }
  //  }
  // }
 }
 return output
}

exports.createnotifiercallback = function () { // 配合 friendly-errors-webpack-plugin
 // 基本用法：notifier.notify('message');
 const notifier = require('node-notifier'); // 发送跨平台通知系统

 return (severity, errors) => {
  // 当前设定是只有出现 error 错误时触发 notifier 发送通知
  if (severity !== 'error') { return } // 严重程度可以是 'error' 或 'warning'
  const error = errors[0]

  const filename = error.file && error.file.split('!').pop();
  notifier.notify({
   title: pkg.name,
   message: severity + ': ' + error.name,
   subtitle: filename || ''
   // icon: path.join(__dirname, 'logo.png') // 通知图标
  })
 }
}

基础配置文件 webpack.base.conf.js

基础的 webpack 配置文件主要根据模式定义了入口出口，以及处理 vue, babel 等的各种模块，是最为基础的部分。其他模式的配置文件以此为基础通过 webpack-merge 合并。

'use strict'
const path = require('path');
const utils = require('./utils');
const config = require('../config');

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

module.exports = {
 context: path.resolve(__dirname, '../'), // 基础目录
 entry: {
  app: './src/main.js'
 },
 output: {
  path: config.build.assetsroot, // 默认'../dist'
  filename: '[name].js',
  publicpath: process.env.node_env === 'production'
  ? config.build.assetspublicpath // 生产模式publicpath
  : config.dev.assetspublicpath // 开发模式publicpath
 },
 resolve: { // 解析确定的拓展名，方便模块导入
  extensions: ['.js', '.vue', '.json'], 
  alias: {  // 创建别名
   'vue$': 'vue/dist/vue.esm.js', 
   '@': resolve('src') // 如 '@/components/helloworld'
  }
 },
 module: {
  rules: [{
    test: /\.vue$/, // vue 要在babel之前
    loader: 'vue-loader',
    options: vueloaderconfig //可选项： vue-loader 选项配置
   },{
    test: /\.js$/, // babel
    loader: 'babel-loader',
    include: [resolve('src')]
   },{ // url-loader 文件大小低于指定的限制时，可返回 dataurl，即base64
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, // url-loader 图片
    loader: 'url-loader',
    options: { // 兼容性问题需要将query换成options
     limit: 10000, // 默认无限制
     name: utils.assetspath('img/[name].[hash:7].[ext]') // hash:7 代表 7 位数的 hash
    }
   },{
    test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, // url-loader 音视频
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetspath('media/[name].[hash:7].[ext]')
    }
   },{
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, // url-loader 字体
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: utils.assetspath('fonts/[name].[hash:7].[ext]')
    }
   }
  ]
 },
 node: { // 是否 polyfill 或 mock
  setimmediate: false,
  dgram: 'empty',
  fs: 'empty',
  net: 'empty',
  tls: 'empty',
  child_process: 'empty'
 }
}

开发模式配置文件 webpack.dev.conf.js

开发模式的配置文件主要引用了 config 对于 devserver 的设定，对 css 文件的处理，使用 defineplugin 判断是否生产环境，以及其他一些插件。

'use strict'
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const basewebpackconfig = require('./webpack.base.conf');
const htmlwebpackplugin = require('html-webpack-plugin');
const portfinder = require('portfinder'); // 自动检索下一个可用端口
const friendlyerrorsplugin = require('friendly-errors-webpack-plugin'); // 友好提示错误信息

const devwebpackconfig = merge(basewebpackconfig, {
  module: {
    rules: utils.styleloaders({ sourcemap: config.dev.csssourcemap, usepostcss: true })
    // 自动生成了 css, postcss, less 等规则，与自己一个个手写一样，默认包括了 css 和 postcss 规则
  },

  devtool: config.dev.devtool,// 添加元信息(meta info)增强调试

  // devserver 在 /config/index.js 处修改
  devserver: {
    clientloglevel: 'warning', // console 控制台显示的消息，可能的值有 none, error, warning 或者 info
    historyapifallback: true, // history api 当遇到 404 响应时会被替代为 index.html
    hot: true, // 模块热替换
    compress: true, // gzip
    host: process.env.host || config.dev.host, // process.env 优先
    port: process.env.port || config.dev.port, // process.env 优先
    open: config.dev.autoopenbrowser, // 是否自动打开浏览器
    overlay: config.dev.erroroverlay ? { // warning 和 error 都要显示
      warnings: true,
      errors: true,
    } : false,
    publicpath: config.dev.assetspublicpath, // 配置publicpath
    proxy: config.dev.proxytable, // 代理
    quiet: true, // 控制台是否禁止打印警告和错误 若使用 friendlyerrorsplugin 此处为 true
    watchoptions: {
      poll: config.dev.poll, // 文件系统检测改动
    }
  },
  plugins: [
    new webpack.defineplugin({
      'process.env': require('../config/dev.env') // 判断生产环境或开发环境
    }),
    new webpack.hotmodulereplacementplugin(), // 热加载
    new webpack.namedmodulesplugin(), // 热加载时直接返回更新的文件名，而不是id
    new webpack.noemitonerrorsplugin(), // 跳过编译时出错的代码并记录下来，主要作用是使编译后运行时的包不出错
    new htmlwebpackplugin({ // 该插件可自动生成一个 html5 文件或使用模板文件将编译好的代码注入进去
      filename: 'index.html',
      template: 'index.html',
      inject: true // 可能的选项有 true, 'head', 'body', false
    }),
  ]
})

module.exports = new promise((resolve, reject) => {
 portfinder.baseport = process.env.port || config.dev.port; // 获取当前设定的端口
 portfinder.getport((err, port) => {
  if (err) { reject(err) } else {
   process.env.port = port; // process 公布端口
   devwebpackconfig.devserver.port = port; // 设置 devserver 端口

   devwebpackconfig.plugins.push(new friendlyerrorsplugin({ // 错误提示插件
    compilationsuccessinfo: {
     messages: [`your application is running here: http://${config.dev.host}:${port}`],
    },
    onerrors: config.dev.notifyonerrors ? utils.createnotifiercallback() : undefined
   }))

   resolve(devwebpackconfig);
  }
 })
})

生产模式配置文件 webpack.prod.conf.js

'use strict'
const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const basewebpackconfig = require('./webpack.base.conf');
const copywebpackplugin = require('copy-webpack-plugin');
const htmlwebpackplugin = require('html-webpack-plugin');
const extracttextplugin = require('extract-text-webpack-plugin');
const optimizecssplugin = require('optimize-css-assets-webpack-plugin');

const env = process.env.node_env === 'production'
 ? require('../config/prod.env')
 : require('../config/dev.env')

const webpackconfig = merge(basewebpackconfig, {
 module: {
  rules: utils.styleloaders({
   sourcemap: config.build.productionsourcemap, // production 下生成 sourcemap
   extract: true, // util 中 styleloaders 方法内的 generateloaders 函数
   usepostcss: true
  })
 },
 devtool: config.build.productionsourcemap ? config.build.devtool : false,
 output: {
  path: config.build.assetsroot,
  filename: utils.assetspath('js/[name].[chunkhash].js'),
  chunkfilename: utils.assetspath('js/[id].[chunkhash].js')
 },
 plugins: [
  new webpack.defineplugin({ 'process.env': env }),
  new webpack.optimize.uglifyjsplugin({ // js 代码压缩还可配置 include, cache 等，也可用 babel-minify
   compress: { warnings: false },
   sourcemap: config.build.productionsourcemap,
   parallel: true // 充分利用多核cpu
  }),
  // 提取 js 文件中的 css
  new extracttextplugin({
   filename: utils.assetspath('css/[name].[contenthash].css'),
   allchunks: false,
  }),
  // 压缩提取出的css
  new optimizecssplugin({
   cssprocessoroptions: config.build.productionsourcemap
   ? { safe: true, map: { inline: false } }
   : { safe: true }
  }),
  // 生成 html
  new htmlwebpackplugin({
   filename: process.env.node_env === 'production'
    ? config.build.index
    : 'index.html',
   template: 'index.html',
   inject: true,
   minify: {
    removecomments: true,
    collapsewhitespace: true,
    removeattributequotes: true
   },
   chunkssortmode: 'dependency' // 按 dependency 的顺序引入
  }),
  new webpack.hashedmoduleidsplugin(), // 根据模块的相对路径生成一个四位数的 hash 作为模块 id
  new webpack.optimize.moduleconcatenationplugin(), // 预编译所有模块到一个闭包中
  // 拆分公共模块
  new webpack.optimize.commonschunkplugin({
   name: 'vendor',
   minchunks: function (module) {
    return (
     module.resource &&
     /\.js$/.test(module.resource) &&
     module.resource.indexof(
      path.join(__dirname, '../node_modules')
     ) === 0
    )
   }
  }),
  new webpack.optimize.commonschunkplugin({
   name: 'manifest',
   minchunks: infinity
  }),
  new webpack.optimize.commonschunkplugin({
   name: 'app',
   async: 'vendor-async',
   children: true,
   minchunks: 3
  }),

  // 拷贝静态文档
  new copywebpackplugin([{
    from: path.resolve(__dirname, '../static'),
    to: config.build.assetssubdirectory,
    ignore: ['.*']
  }])]
})

if (config.build.productiongzip) { // 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, // 10kb 以上大小的文件才压缩
   minratio: 0.8 // 最小比例达到 .8 时才压缩
  })
 )
}

if (config.build.bundleanalyzerreport) { // 可视化分析包的尺寸
 const bundleanalyzerplugin = require('webpack-bundle-analyzer').bundleanalyzerplugin;
 webpackconfig.plugins.push(new bundleanalyzerplugin());
}

module.exports = webpackconfig;

build.js 编译入口

'use strict'

process.env.node_env = 'production'; // 设置当前环境为生产环境
const ora = require('ora'); //loading...进度条
const rm = require('rimraf'); //删除文件 'rm -rf'
const chalk = require('chalk'); //stdout颜色设置
const webpack = require('webpack');
const path = require('path');
const config = require('../config');
const webpackconfig = require('./webpack.prod.conf');

const spinner = ora('正在编译...');
spinner.start();

// 清空文件夹
rm(path.join(config.build.assetsroot, config.build.assetssubdirectory), err => {
  if (err) throw err;
  // 删除完成回调函数内执行编译
  webpack(webpackconfig, function (err, stats) {
    spinner.stop();
    if (err) throw err;
  
  // 编译完成，输出编译文件
    process.stdout.write(stats.tostring({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkmodules: false
    }) + '\n\n');

  //error
  if (stats.haserrors()) {
    console.log(chalk.red(' 编译失败出现错误.\n'));
    process.exit(1);
  }

  //完成
  console.log(chalk.cyan(' 编译成功.\n'))
  console.log(chalk.yellow(
   ' file:// 无用，需http(s)://.\n'
  ))
 })

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。