vue学习教程之带你一步步详细解析vue-cli

npm install vue-cli -g

vue init webapck webpack-template

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

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

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"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,
 }
 }

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
 }

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
 "color: #ff0000">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环境中的新增了那些配置项，它们分别起到了什么作用？

  
首先，在module的rules中增加了cssSourceMap的功能
  
然后就是devtools，通过注释的英文翻译，可以知道cheap-module-eval-source-map使得开发更快。
  
之后，就是devSever的一些配置项了。其中包块客户端报错级别、端口、host等等
  
还有新增的plugins，我们可以来看一下实际新增的plugins(具体可以看webpack文档)：

  定义process.env

  HotModuleReplacementPlugin: 模块热替换插件

  NameModulesPlugin: 显示模块加载相对路径插件

  NoEmitOnErrorsPlugin: 在编译出现错误时，使用 NoEmitOnErrorsPlugin 来跳过输出阶段。这样可以确保输出资源不会包含错误

  HtmlWebpackPlugin: 使用插件生成一个指定的模版。

  

后，还有一个函数，确保启动程序时，如果端口被占用时，会通过portfinder来发布新的端口，然后输出运行的host字符串。
webpack.prod.conf.js


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

  
新增了output的配置，我们可以看到它在output中新增了一些属性，将js打包成不同的块chunk，然后使用hash尾缀进行命名
  
添加了一些插件：

  UglifJsPlugin: 这个是用来丑化js代码的

  ExtractTextplugin: 这里新增了一些属性，在打包的css文件也增加了块和hash尾缀

  OptimizeCssplugin: 这里是来优化css文件的，主要就是压缩css代码

  HashedModuleIdsPlugin: 保证module的id值稳定

  optimize: 这里是webpack一系列优化的措施，具体可以逐一查看官方文档

  CopyWebPlugins: 自定义assets文件目录
  
如果没有进行gzip压缩，调用CompressionWebpackPlugin插件进行压缩

这样，我们的webpack配置文件内容基本上就全部看完了。或许，会有点蒙，还是看官方文档来的实在。
最后，还需要分析一个build.js文件。
build.js


这个文件是在打包的时候，会被用到的。
首先，文件的开头请求了check-version.js中的函数，然后确定了一下node和npm的版本。相对于较低版本的node和npm，在打包过程中，会产生警告。之后，设置环境参数，设置成生产环境，之后就是一系列打包的流程。
总结


本篇文章，主要总结了一下vue-cli生成的文件中，其中的一些配置参数和文件大致的作用。有不到位的地方，希望大家可以指正。同时希望我们共同进步，共勉。