var utils = require('./utils') var webpack = require('webpack') var config = require('../config') // 一个可以合并数组和对象的插件 var merge = require('webpack-merge') var baseWebpackConfig = require('./webpack.base.conf') // 一个用于生成HTML文件并自动注入依赖文件（link/script）的webpack插件 var HtmlWebpackPlugin = require('html-webpack-plugin') // 用于更友好地输出webpack的警告、错误等信息 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') // add hot-reload related code to entry chunks Object.keys(baseWebpackConfig.entry).forEach(function (name) { baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) }) // 合并基础的webpack配置 module.exports = merge(baseWebpackConfig, { // 配置样式文件的处理规则，使用styleLoaders module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) }, // 配置Source Maps。在开发中使用cheap-module-eval-source-map更快 devtool: '#cheap-module-eval-source-map', // 配置webpack插件 plugins: [ new webpack.DefinePlugin({ 'process.env': config.dev.env }), // https://github.com/glenjamin/webpack-hot-middleware#installation--usage new webpack.HotModuleReplacementPlugin(), // 后页面中的报错不会阻塞，但是会在编译结束后报错 new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), new FriendlyErrorsPlugin() ] })
build/utils.js和build/vue-loader.conf.js
前面的webpack配置文件中使用到了utils.js和vue-loader.conf.js这两个文件，utils主要完成下面3件事：
配置静态资源路径
生成cssLoaders用于加载.vue文件中的样式
生成styleLoaders用于加载不在.vue文件中的单独存在的样式文件
vue-loader.conf则只配置了css加载器以及编译css之后自动添加前缀。详情请看代码注释（下面是vue-loader.conf的代码，utils代码里面原有的注释已经有相应说明这里就不贴出来了）：
var utils = require('./utils') var config = require('../config') var isProduction = process.env.NODE_ENV === 'production' module.exports = { // css加载器 loaders: utils.cssLoaders({ sourceMap: isProduction ? config.build.productionSourceMap : config.dev.cssSourceMap, extract: isProduction }), // 编译css之后自动添加前缀 postcss: [ require('autoprefixer')({ browsers: ['last 2 versions'] }) ] }
build/build.js
讲完了开发环境下的配置，下面开始来看构建环境下的配置。执行”npm run build”的时候首先执行的是build/build.js文件，build.js主要完成下面几件事：
loading动画
删除创建目标文件夹
webpack编译
输出信息
说明： webpack编译之后会输出到配置里面指定的目标文件夹；删除目标文件夹之后再创建是为了去除旧的内容，以免产生不可预测的影响。
详情请看代码注释：
// https://github.com/shelljs/shelljs // 检查NodeJS和npm的版本 require('./check-versions')() process.env.NODE_ENV = 'production' // Elegant terminal spinner var ora = require('ora') var path = require('path') // 用于在控制台输出带颜色字体的插件 var chalk = require('chalk') // 执行Unix命令行的插件 var shell = require('shelljs') var webpack = require('webpack') var config = require('../config') var webpackConfig = require('./webpack.prod.conf') var spinner = ora('building for production...') spinner.start() // 开启loading动画 // 输出文件的目标文件夹 var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) // 递归删除旧的目标文件夹 shell.rm('-rf', assetsPath) // 重新创建文件夹 shell.mkdir('-p', assetsPath) shell.config.silent = true // 将static文件夹复制到输出的目标文件夹 shell.cp('-R', 'static/*', assetsPath) shell.config.silent = false // webpack编译 webpack(webpackConfig, function (err, stats) { spinner.stop() // 停止loading动画 if (err) throw err // 没有出错则输出相关信息 process.stdout.write(stats.toString({ colors: true, modules: false, children: false, chunks: false, chunkModules: false }) + '\n\n') console.log(chalk.cyan(' Build complete.\n')) console.log(chalk.yellow( ' Tip: built files are meant to be served over an HTTP server.\n' + ' Opening index.html over file:// won\'t work.\n' )) })
build/webpack.prod.conf.js
构建的时候用到的webpack配置来自webpack.prod.conf.js，该配置同样是在webpack.base.conf基础上的进一步完善。主要完成下面几件事情：
合并基础的webpack配置
使用styleLoaders
配置webpack的输出
配置webpack插件
gzip模式下的webpack插件配置
webpack-bundle分析
说明： webpack插件里面多了丑化压缩代码以及抽离css文件等插件。
详情请看代码：