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


Posted in Javascript onNovember 22, 2017

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

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
实测jquery data()如何存值
Aug 18 Javascript
php is_numberic函数造成的SQL注入漏洞
Mar 10 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
js点击文本框弹出可选择的checkbox复选框
Feb 03 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
js实现图片放大展示效果
Aug 30 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 #Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 #Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 #Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 #Javascript
基于JavaScript实现表格滚动分页
Nov 22 #Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 #Javascript
Vue官方文档梳理之全局配置
Nov 22 #Javascript
You might like
php !function_exists("T7FC56270E7A70FA81A5935B72EACBE29"))代码解密
2011/01/07 PHP
php单例模式实现方法分析
2015/03/14 PHP
详解PHP用substr函数截取字符串中的某部分
2016/12/03 PHP
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
jquery.form.js用法之清空form的方法
2014/03/07 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
python中from module import * 的一个坑
2014/07/20 Python
Python smallseg分词用法实例分析
2015/05/28 Python
Python实时获取cmd的输出
2015/12/13 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
Django的信号机制详解
2017/05/05 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
django反向解析和正向解析的方式
2018/06/05 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
Python生成器常见问题及解决方案
2020/03/21 Python
python实现ping命令小程序
2020/12/28 Python
Internal修饰符有什么含义
2013/07/10 面试题
临床医学大学生求职信
2013/09/28 职场文书
药学专业个人自我评价
2013/11/11 职场文书
假面舞会策划方案
2014/05/29 职场文书
模范班主任事迹材料
2014/12/17 职场文书
作文批改评语
2014/12/25 职场文书
springboot利用redis、Redisson处理并发问题的操作
2021/06/18 Java/Android
Go中的条件语句Switch示例详解
2021/08/23 Golang
Pandas数据结构之Series的使用
2022/03/31 Python