介绍vue-cli脚手架config目录下index.js配置文件

// see http://vuejs-templates.github.io/webpack for documentation.
// path是node.js的路径模块，用来处理路径统一的问题
var path = require('path')

module.exports = {
// 下面是build也就是生产编译环境下的一些配置
build: {
// 导入prod.env.js配置文件，只要用来指定当前环境，详细见(1)
env: require('./prod.env'),
// 下面是相对路径的拼接，假如当前跟目录是config，那么下面配置的index属性的属性值就是dist/index.html
index: path.resolve(__dirname, '../dist/index.html'),
// 下面定义的是静态资源的根目录 也就是dist目录
assetsRoot: path.resolve(__dirname, '../dist'),
// 下面定义的是静态资源根目录的子目录static，也就是dist目录下面的static
assetsSubDirectory: 'static',
// 下面定义的是静态资源的公开路径，也就是真正的引用路径
assetsPublicPath: '/',
// 下面定义是否生成生产环境的sourcmap，sourcmap是用来debug编译后文件的，通过映射到编译前文件来实现
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
// 下面是是否在生产环境中压缩代码，如果要压缩必须安装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
// 下面是用来开启编译完成后的报告，可以通过设置值为true和false来开启或关闭
// 下面的process.env.npm_config_report表示定义的一个npm_config_report环境变量，可以自行设置
bundleAnalyzerReport: process.env.npm_config_report
},
dev: {
// 引入当前目录下的dev.env.js，用来指明开发环境，详见(2)
env: require('./dev.env'),
// 下面是dev-server的端口号，可以自行更改
port: 8080,
// 下面表示是否自定代开浏览器
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
// 下面是代理表，作用是用来，建一个虚拟api服务器用来代理本机的请求，只能用于开发模式
// 详见(3)
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.
// 是否生成css，map文件，上面这段英文就是说使用这个cssmap可能存在问题，但是按照经验，问题不大，可以使用
// 给人觉得没必要用这个，css出了问题，直接控制台不就完事了
cssSourceMap: false
}
}

(1)下面是prod.env.js的配置内容
module.exports = {
// 作用很明显，就是导出一个对象，NODE_ENV是一个环境变量，指定production环境
NODE_ENV: '"production"'
}
(2)下面是dev.env.js的配置内容
// 首先引入的是webpack的merge插件，该插件是用来合并对象，也就是配置文件用的，相同的选项会被覆盖，至于这里为什么多次一举，可能另有他图吧
var merge = require('webpack-merge')
// 导入prod.env.js配置文件
var prodEnv = require('./prod.env')
// 将两个配置对象合并，最终结果是 NODE_ENV: '"development"'
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
(3)下面是proxyTable的一般用法
vue-cli使用这个功能是借助http-proxy-middleware插件，一般解决跨域请求api
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com', -> 目标url地址
changeOrigin: true, -> 指示是否跨域
pathRewrite: {
'^/list': '/list' -> 可以使用 /list 等价于 api.xxxxxxxx.com/list
}
}
}

// https://github.com/shelljs/shelljs require('./check-versions')() // 检查 Node 和 npm 版本
require('shelljs/global')  // 使用了 shelljs 插件，可以让我们在 node 环境的 js 中使用 shell
env.NODE_ENV = 'production'

var path = require('path')
var config = require('../config') // 加载 config.js
var ora = require('ora') // 一个很好看的 loading 插件
var webpack = require('webpack')  // 加载 webpack
var webpackConfig = require('./webpack.prod.conf')  // 加载 webpack.prod.conf

console.log( //  输出提示信息 ～ 提示用户请在 http 服务下查看本页面，否则为空白页
'  Tip:\n' +
'  Built files are meant to be served over an HTTP server.\n' +
'  Opening index.html over file:// won\'t work.\n'
)

var spinner = ora('building for production...')  // 使用 ora 打印出 loading + log
spinner.start()  // 开始 loading 动画

/* 拼接编译输出文件路径 */
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
rm('-rf', assetsPath) /* 删除这个文件夹 （递归删除） */
mkdir('-p', assetsPath) /* 创建此文件夹 */
cp('-R', 'static/*', assetsPath) /* 复制 static 文件夹到我们的编译输出目录 */

webpack(webpackConfig, function (err, stats) {  //  开始 webpack 的编译
// 编译成功的回调函数
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n')
})

项目入口：由package.json文件可看出

"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"watch": "node build/build-watch.js"
},

var path = require('path')
var config = require('../config')
var utils = require('./utils')
var webpack = require('webpack')
var merge = require('webpack-merge')// 一个可以合并数组和对象的插件
var baseWebpackConfig = require('./webpack.base.conf')
// 用于从webpack生成的bundle中提取文本到特定文件中的插件
// 可以抽取出css，js文件将其与webpack输出的bundle分离
var ExtractTextPlugin = require('extract-text-webpack-plugin')  //如果我们想用webpack打包成一个文件，css js分离开，需要这个插件
var HtmlWebpackPlugin = require('html-webpack-plugin')// 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件
var env = config.build.env
// 合并基础的webpack配置
var webpackConfig = merge(baseWebpackConfig, {
// 配置样式文件的处理规则，使用styleLoaders
module: {
loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true })
},
devtool: config.build.productionSourceMap ? '#source-map' : false, // 开启source-map，生产环境下推荐使用cheap-source-map或source-map，后者得到的.map文件体积比较大，但是能够完全还原以前的js代码
output: {
path: config.build.assetsRoot,// 编译输出目录
filename: utils.assetsPath('js/[name].[chunkhash].js'),  // 编译输出文件名格式
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')  // 没有指定输出名的文件输出的文件名格式
},
vue: { // vue里的css也要单独提取出来
loaders: utils.cssLoaders({ // css加载器，调用了utils文件中的cssLoaders方法,用来返回针对各类型的样式文件的处理方式,
sourceMap: config.build.productionSourceMap,
extract: true
})
},
// 重新配置插件项
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html // 位于开发环境下
new webpack.DefinePlugin({
'process.env': env
}),
new webpack.optimize.UglifyJsPlugin({// 丑化压缩代码
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin(),
// extract css into its own file
new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')),  // 抽离css文件
// 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 // filename 生成网页的HTML名字，可以使用/来控制文件文件的目录结构，最
// 终生成的路径是基于webpa
99c5
c配置的output.path的
new HtmlWebpackPlugin({
// 生成html文件的名字，路径和生产环境下的不同，要与修改后的publickPath相结合，否则开启服务器后页面空白
filename: config.build.index,
// 源文件，路径相对于本文件所在的位置
template: 'index.html',
inject: true,// 要把<script>标签插入到页面哪个标签里(body|true|head|false)
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'
}),
// 如果文件是多入口的文件，可能存在，重复代码，把公共代码提取出来，又不会重复下载公共代码了
// （多个页面间会共享此文件的缓存）
// CommonsChunkPlugin的初始化常用参数有解析？
// name: 这个给公共代码的chunk唯一的标识
// filename，如何命名打包后生产的js文件，也是可以用上[name]、[hash]、[chunkhash]
// minChunks，公共代码的判断标准：某个js模块被多少个chunk加载了才算是公共代码
// split vendor js into its own file
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({ // 为组件分配ID，通过这个插件webpack可以分析和优先考虑使用最多的模块，并为它们分配最小的ID
name: 'manifest',
chunks: ['vendor']
})
]
})
// gzip模式下需要引入compression插件进行压缩
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
})
)
}

module.exports = webpackConfig