vue-cli 目录结构详细讲解总结(4)

const ExtractTextPlugin = require("extract-text-webpack-plugin");
 module.exports = {
  module: {
   rules: [
    {
     test: /\.css$/, //主要用来处理css文件
     use: ExtractTextPlugin.extract({
      fallback: "style-loader", // fallback表示如果css文件没有成功导入就使用style-loader导入
      use: "css-loader" // 表示使用css-loader从js读取css文件
     })
    }
   ],
   plugins: [
    new ExtractTextPlugin("styles.css") //表示生成styles.css文件
   ]
  }
 }

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'

module.exports = {
 // 处理.vue文件中的样式
 loaders: utils.cssLoaders({
  // 是否打开source-map
  sourceMap: isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap,
  // 是否提取样式到单独的文件
  extract: isProduction
 }),
 transformToRequire: {
  video: 'src',
  source: 'src',
  img: 'src',
  image: 'xlink:href'
 }
}

/* eslint-disable */
// 实现浏览器端的EventSource，用于跟服务器双向通信
// webpack热重载客户端跟dev-server上的热重载插件之间需要进行双向通信
// 服务端webpack重新编译后，会向客户端推送信息，告诉客户端进行更新
require('eventsource-polyfill')
// webpack热重载客户端
var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')

// 客户端收到更新动作，执行页面刷新
hotClient.subscribe(function (event) {
 if (event.action === 'reload') {
  window.location.reload()
 }
})

// 检查NodeJS和npm的版本
require('./check-versions')()

process.env.NODE_ENV = 'production'

// ora，一个可以在终端显示spinner的插件
var ora = require('ora')
// rm，用于删除文件或文件夹的插件
var rm = require('rimraf')
var path = require('path')
// chalk，用于在控制台输出带颜色字体的插件
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')

var spinner = ora('building for production...')
spinner.start() // 开启loading动画

// 首先将整个dist文件夹以及里面的内容删除，以免遗留旧的没用的文件
// 删除完成后才开始webpack构建打包
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
 if (err) throw err
 // 执行webpack构建打包，完成之后在终端输出构建完成的相关信息或者输出报错信息并退出程序
 webpack(webpackConfig, function (err, stats) {
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
   colors: true,
   modules: false,
   children: false,
   chunks: false,
   chunkModules: false
  }) + '\n\n')

  if (stats.hasErrors()) {
   console.log(chalk.red(' Build failed with errors.\n'))
   process.exit(1)
  }

  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'
  ))
 })
})