vue-cli解析

前言

这段时间，算是空出手来写几篇文章了。因为好久都没有时间整理如今所用的东西了，因此，接下来会慢慢整理出一些文档来记录前段时间的工做和生活。

这篇文章的主题是vue-cli的理解。或许，不少人在开发vue的时候，咱们会发现一个问题——只会去用，而不明白它的里面的东西。如今的框架能够说是足够的优秀，让开发者不用为搭建开发环境而烦恼。可是有时候，咱们仍是得回到原始生活体验一下，才可以让本身更上层楼，但愿你们共勉。若是你喜欢个人文章，欢迎评论，欢迎Star~。欢迎关注个人github博客

正文

首先，咱们来讲一下安装的东西吧！处于有头有尾的目的，仍是几句话草草了事。步骤以下：

• 安装vue-cli

  npm install vue-cli -g

• 以webpack模版安装目录

  vue init webapck webpack-template

这样以后，咱们就可使用IDE打开目录了。

此处注明个人vue-cli的版本2.9.2，以避免以后改版以后，误导读者。

以后，附上本身的目录截图，并无作改动，如图：

首先，第一个问题，从何看起呢？固然，是从webpack.base.conf.js开始看起了。这个是dev和prod环境都会去加载的东西。而后，咱们能够先从webpack.base.conf.js中会被用到的几个文件看起。其实，base中被用到了以下的文件，咱们能够从代码中看出：

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

分别是：

• path 【路径模块】
• build目录中的utils.js文件
• config目录中的index文件
• build目录中的vue-loader.conf.js文件

path路径

这个模块能够看nodejs官网的介绍，其实，就是一个文件路径的获取和设置等模块，学习node的时候，咱们每每会看到这个模块被大量运用。

path模块提供了用于处理文件和目录路径的使用工具

utils.js

咱们能够到其中去看一下代码，其实光从名字上咱们能够推断出，它多是为整个脚手架提供方法的。咱们能够先来看一下头部引用的资源文件：

const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

一样的，它也引用了path模块和config目录中的index.js文件，以后的话是一个npm包——extract-text-webpack-plugin。这个包的话，是用来分离css和js的内容的。后续咱们能够详细了解一下。同时，它还引用的package.json文件，这是一个json文件，加载过来以后，会变成一个对象。

因此，咱们须要从它的头部依赖开始提及：

path模块咱们以前提到过，这里就不细说。咱们能够来分析一下config目录下的index.js文件。

index.js

这个文件中，其实有十分充足的代码注释，咱们也能够来深刻探究一下。

从代码中，咱们能够看到经过module.exports导出了一个对象，其中包含两个设置dev和build。

在dev中，设置了一些配置，代码以下：

modules.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,
      }
  }

经过它的注释，咱们能够理解它在dev中配置了静态路径、本地服务器配置项、Eslint、Source Maps等参数。若是咱们须要在开发中，改动静态资源文件、服务器端口等设置，能够在这个文件中进行修改。

下面还有一个build的对象，它是在vue本地服务器启动时，打包的一些配置， 代码以下：

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    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
    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
    bundleAnalyzerReport: process.env.npm_config_report
  }

其中包括模版文件的修改，打包完目录以后的一些路径设置，gzip压缩等。明白了这些字段的意思以后，就能够在以后的开发中，主动根据项目需求，改动目录内容。

聊完config下的index.js文件，回到utils.js文件中，咱们能够来看几个其中的方法，来分析它们分别起到了什么做用。

1. assetsPath方法

   接受一个_path参数

   返回static目录位置拼接的路径。

   它根据nodejs的proccess.env.NODE_ENV变量，来判断当前运行的环境。返回不一样环境下面的不一样static目录位置拼接给定的_path参数。

2. cssLoaders方法

   接受一个options参数，参数还有的属性：sourceMap、usePostCSS。

   同时，这里用到了咱们以前提到的extract-text-webpack-plugin插件，来分离出js中的css代码，而后分别进行打包。同时，它返回一个对象，其中包含了css预编译器(less、sass、stylus)loader生成方法等。若是你的文档明确只须要一门css语言，那么能够稍微清楚一些语言，同时能够减小npm包的大小(毕竟这是一个使人烦躁的东西)。

3. styleLoaders方法

   接受的options对象和上面的方法一致。该方法只是根据cssLoaders中的方法配置，生成不一样loaders。而后将其返回。

4. createNotifierCallback方法

   此处调用了一个模块，能够在GitHub上找到，它是一个原生的操做系统上发送通知的nodeJS模块。用于返回脚手架错误的函数

一共这么四个函数方法，在utils中被定义到。

回看到webpack.base.conf.js文件中，咱们能够直接跳过config目录下的index.js文件，以前已经分析过了。直接来看一下vue-loader.conf.js下的内容。

vue-loader.conf.js

这个文件中的代码很是的少，咱们能够直接贴上代码，而后来分析，其中的做用。代码以下：

'use strict'
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 = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

其中，主要就是根据NODE_ENV这个变量，而后分析是不是生产环境，而后将根据不一样的环境来加载，不一样的环境，来判断是否开启了sourceMap的功能。方便以后在cssLoaders中加上sourceMap功能。而后判断是否设置了cacheBusting属性，它指的是缓存破坏，特别是进行sourceMap debug时，设置成false是很是有帮助的。最后就是一个转化请求的内容，video、source、img、image等的属性进行配置。

具体的仍是须要去了解vue-loader这个webpack的loader加载器。

分析了这么多，最终回到webpack.base.conf.js文件中

webpack.base.conf.js

其实的两个方法，其中一个是来合并path路径的，另外一个是加载Eslint的rules的。

咱们直接看后面那个函数，createLintingRule方法：

其中，加载了一个formatter，这个能够在终端中显示eslint的规则错误，方便开发者直接找到相应的位置，而后修改代码。

以后的一个对象，就是webpack的基础配置信息。咱们能够逐一字段进行分析：

• context => 运行环境的上下文，就是实际的目录
• entry => 入口文件：src下的main.js文件
• output => 输出内容，这内部的配置会根据不一样的运行环境来进行变化
• resolve => 其中的extensions字段，指定检测的文件后缀，同时alias是用于指定别名的。在引用文件路径中，若是有别名的符号，会被替换成指定的路径。
• module => 配置了一些eslint、vue、js、图片资源、字体图标、文件等加载的loader。详细的能够去看webpack的官方网站。
• node => 此处部分有注释，主要是阻止一些webpack的默认注入行为，由于在vue中，已经具有了这些功能。

看完这些，你或许对webapck.base.conf.js中的内容有了一些初步的了解。其实，看懂它还须要你了解webpack这个很是有用的打包工具。

以后，咱们在来回看webpack.dev.conf.js这个文件

webpack.dev.conf.js

这个文件中，引用了webapck-merge这npm包，它能够将两个配置对象，进行合并。代码以下：

const merge = require('webpack-merge');
const devWebpackConfig = merge(baseWebpackConfig, {
    ...
}

这样就合并了base中的webpack配置项。以后，咱们能够来看一下dev环境中的新增了那些配置项，它们分别起到了什么做用？

1. 首先，在module的rules中增长了cssSourceMap的功能
2. 而后就是devtools，经过注释的英文翻译，能够知道cheap-module-eval-source-map使得开发更快。
3. 以后，就是devSever的一些配置项了。其中包块客户端报错级别、端口、host等等

4. 还有新增的plugins，咱们能够来看一下实际新增的plugins(具体能够看webpack文档)：

   • 定义process.env
   • HotModuleReplacementPlugin: 模块热替换插件
   • NameModulesPlugin: 显示模块加载相对路径插件
   • NoEmitOnErrorsPlugin: 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样能够确保输出资源不会包含错误
   • HtmlWebpackPlugin: 使用插件生成一个指定的模版。

以后，还有一个函数，确保启动程序时，若是端口被占用时，会经过portfinder来发布新的端口，而后输出运行的host字符串。

webpack.prod.conf.js

这是打包到生产环境中，会被用到的文件。咱们能够看到，它相对于以前的webapck.dev.conf.js文件少了一些插件，多了更多的插件。咱们也能够和以前同样，经过它新增的一些东西，来知道它到底干了什么！(此处的新增是相对于webpack.dev.conf.js没有的内容)

1. 新增了output的配置，咱们能够看到它在output中新增了一些属性，将js打包成不一样的块chunk，而后使用hash尾缀进行命名

2. 添加了一些插件：

   • UglifJsPlugin: 这个是用来丑化js代码的
   • ExtractTextplugin: 这里新增了一些属性，在打包的css文件也增长了块和hash尾缀
   • OptimizeCssplugin: 这里是来优化css文件的，主要就是压缩css代码
   • HashedModuleIdsPlugin: 保证module的id值稳定
   • optimize: 这里是webpack一系列优化的措施，具体能够逐一查看官方文档
   • CopyWebPlugins: 自定义assets文件目录
3. 若是没有进行gzip压缩，调用CompressionWebpackPlugin插件进行压缩

这样，咱们的webpack配置文件内容基本上就所有看完了。或许，会有点蒙，仍是看官方文档来的实在。

最后，还须要分析一个build.js文件。

build.js

这个文件是在打包的时候，会被用到的。

首先，文件的开头请求了check-version.js中的函数，而后肯定了一下node和npm的版本。相对于较低版本的node和npm，在打包过程当中，会产生警告。以后，设置环境参数，设置成生产环境，以后就是一系列打包的流程。

总结

本篇文章，主要总结了一下vue-cli生成的文件中，其中的一些配置参数和文件大体的做用。有不到位的地方，但愿你们能够指正。同时但愿咱们共同进步，共勉。

若是你对我写的有疑问，能够评论，如我写的有错误，欢迎指正。你喜欢个人博客，请给我关注Star~呦 github博客