介绍vue-cli脚⼿架config⽬录下index.js配置⽂件index.js⽂件
// see vuejs-templates.github.io/webpack for documentation.
// path是node.js的路径模块，⽤来处理路径统⼀的问题
var path = require('path')
// 下⾯是build也就是⽣产编译环境下的⼀些配置
build: {
// 导⼊v.js配置⽂件，只要⽤来指定当前环境，详细见(1)
env: require('./v'),
// 下⾯是相对路径的拼接，假如当前跟⽬录是config，那么下⾯配置的index属性的属性值就是dist/index.html
index: solve(__dirname, '../dist/index.html'),
// 下⾯定义的是静态资源的根⽬录也就是dist⽬录
assetsRoot: solve(__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来开启或关闭
// 下⾯的v.npm_config_report表⽰定义的⼀个npm_config_report环境变量，可以⾃⾏设置
bundleAnalyzerReport: v.npm_config_report
},
dev: {
// 引⼊当前⽬录下的v.js，⽤来指明开发环境，详见(2)
env: require('./v'),
// 下⾯是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
// (github/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
js合并两个数组// 是否⽣成css，map⽂件，上⾯这段英⽂就是说使⽤这个cssmap可能存在问题，但是按照经验，问题不⼤，可以使⽤        // 给⼈觉得没必要⽤这个，css出了问题，直接控制台不就完事了
cssSourceMap: false
}
}
1. 注释
(1)下⾯是v.js的配置内容
// 作⽤很明显，就是导出⼀个对象，NODE_ENV是⼀个环境变量，指定production环境
NODE_ENV: '"production"'
}
(2)下⾯是v.js的配置内容
// ⾸先引⼊的是webpack的merge插件，该插件是⽤来合并对象，也就是配置⽂件⽤的，相同的选项会被覆盖，⾄于这⾥为什么多次⼀举，可能另有他图吧    var merge = require('webpack-merge')
// 导⼊v.js配置⽂件
var prodEnv = require('./v')
// 将两个配置对象合并，最终结果是 NODE_ENV: '"development"'
NODE_ENV: '"development"'
})
(3)下⾯是proxyTable的⼀般⽤法
vue-cli使⽤这个功能是借助http-proxy-middleware插件，⼀般解决跨域请求api
proxyTable: {
'/list': {
target: 'xx', -> ⽬标url地址
changeOrigin: true, -> 指⽰是否跨域
pathRewrite: {
'^/list': '/list' -> 可以使⽤ /list 等价于 xx/list
}
}
}
build.js
// github/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('./f')  // 加载 f
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 ')  // 使⽤ 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.String({
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"
},
f.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('./f')
var baseWebpackConfig = require('./f')
// ⽤于从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 = v
// 合并基础的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⽂  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: [
// vuejs.github.io/vue-loader/en/workflow/production.html
// 位于开发环境下
new webpack.DefinePlugin({
'v': 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 github/ampedandwired/html-webpack-plugin
// filename ⽣成⽹页的HTML名字，可以使⽤/来控制⽂件⽂件的⽬录结构，最
// 终⽣成的路径是基于webpac配置的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:
// github/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加载了才算是公共代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。