vue-cli—03-webpack基本配置说明

下来我们一个一个介绍build文件夹下面的一些配置

check-versions.js

'use strict'
const chalk = require('chalk') //输入终端的一些样式，红色或者绿色，可以通过这个模块来定义
const semver = require('semver') // 处理版本号
const packageConfig = require('../package.json')
const shell = require('shelljs') //可以执行终端的命令

function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

// 此处定义node版本的一些要求
const versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version), //当前node的版本
    versionRequirement: packageConfig.engines.node //规定版本的要求
  }
]

// 假如命令中有npm，那么把npm的版本要求也加入到里面
if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),  //执行exec拿到当前npm的版本
    versionRequirement: packageConfig.engines.npm //拿到npm的版本要求
  })
}

module.exports = function () {
  const warnings = []

  // 遍历versionRequirements这个数据
  for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

    // 查看当前的版本是否在要求的版本之内
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      // 如果不在的话就push一些警告信息
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  // 假如有错误信息，则在终端打印一些信息
  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()

    for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }

    console.log()
    // 最终退出程序
    process.exit(1)
  }
}

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
  },
  // 引进来一些模块的时候的配置
  resolve: {
    // 文件的后缀名
    extensions: ['.js', '.vue', '.json'],
    // 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        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,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  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'
  }
}