Vue 实战------build目录下的webpack 配置做详细分析

webpack.base.conf.js

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

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'   // 主入口文件
  },
  output: {
    path: config.build.assetsRoot,  // 导出项目的绝对路径
    filename: '[name].js',          // 导出文件的文件名
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath     //生产模式或开发模式下的 html、js 等文件内部引用的公共路径
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],   //自动解析确定的扩展名，使导入模块时不带扩展名
    alias: {                                // 创建 import 或 require 的别名
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,    // Vue 文件后缀
        loader: 'vue-loader',    // 使用 Vue-loader 进行处理
        options: vueLoaderConfig   //对 Vue-loader做额外的选项配置
      },
      {
        test: /\.js$/,     //js 文件后缀
        loader: 'babel-loader',   //使用 babel-loader 进行处理
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]                  //必须处理 包含 src、test 的文件夹
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,  // 图片后缀
        loader: 'url-loader',  //使用 url-loader 进行处理
        options: {    // 额外的配置
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,   // 对于 小于 10kb 的处理方式
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')  // 文件名 为 name.7位hash值.后缀名
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

webpack.dev.conf.js 

module: {
    // 通过传入一些配置来获取 rules 配置，此处传入了 sourceMap:false,表示不生成sourceMap
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },

util.js

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []      //定义返回数组，数组中保存的是针对各类型的样式文件的处理方式
  const loaders = exports.cssLoaders(options)  //调用 cssLoaders方法返回各类型的样式对象

  for (const extension in loaders) {          //遍历 loaders 
    const loader = loaders[extension]  //根据遍历获得的key(extension)来得到value(loader)
    output.push({
      test: new RegExp('\\.' + extension + '$'),   // 处理文件的类型
      use: loader  //用loader 来处理,loader 来自loaders[extension]
    })
  }

  return output
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap    //options 是 css-loader的选项配置
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {    // 生成loader
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]    //默认的loader 是 cssloader

    if (loader) {    //如果参数 loader 还存在
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {    // 返回 css类型对应的loader组成的对象
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

webpack.dev.conf.js

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')  //配置环境为生产环境
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({         // 生成html 插件，引入 css 文件和 js 文件
      filename: 'index.html',    //生成的html 文件名
      template: 'index.html',   //依据的模板
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]

build.js

'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'        //设置当前环境为 production

const ora = require('ora')                 //终端显示的转轮为loading
const rm = require('rimraf')              //Node 环境下 rm -rf 的命令库
const path = require('path')                //文件路径处理
const chalk = require('chalk')             //终端显示带颜色的文字
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')     //生产环境下的 webpack 配置

const spinner = ora('building for production...')     //在终端显示 ora 库的loading 效果
spinner.start()


// 删除已编译文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  //在删除完成的回调函数中开始编译
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    // 在编译完成的回调函数，在终端输入编译的文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      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'
    ))
  })
})