vue-cli的webpack模板项目配置文件的理解

webpack配置目录中的各个文件的每一行代码的意思会持续整理并更新，希望大家共同学习并指出我理解错误的地方。

• webpack.base.conf.js

var path = require('path');
var utils = require('./utils');
var config = require('../config');
var vueLoaderConfig = require('./vue-loader.conf');


//将路径返回到当前进程上一级的dir文件/文件夹
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}


module.exports = {
  entry: {
    app: './src/main.js'  //设置webpack打包的入口文件
  },
  output: {
    //经过webpack打包后的js路径,assetsRoot: path.resolve(__dirname, '../dist'),但是可能会发现打包后并没dist路径
    //这是因为通过node引入的webpack打包编译后的文件存放在内存中,而并没有写入磁盘。
    path: config.build.assetsRoot,
    //经过编译后的输出产物的名称，在这里[name]==app
    filename: '[name].js',
    //通常在生产模式下,一些css,html,image等会部署在服务器上,
    //例如你在本地开发的时候你需要引入一张图片
    //aaa:{background:url(./index.jpg)};但是在生产模式下你的图片可能会放在http://xx.xx.xx/xx/目录下
    //此时你需要将你的publicpath设置为http://xx.xx.xx/xx/
    //这时打包后你的图片路径改为//aaa:{background:url(http://xx.xx.xx/xx/index.jpg)};
    //这里对应的两个变量为'/'，所以我们打开页面时看到引入的js脚本路径为:/app.js
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    //会根据文件名自动为模块添加数组中的后缀
    extensions: ['.js', '.vue', '.json'],
    //类似于定义全局变量在require时 require('vue$')==require(''vue/dist/vue.esm.js'');
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        //当匹配到文件后缀为vue时使用vue-loader
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        //如果使用了es6,typescript等浏览器无法直接识别的js会将其转译为es5
        //仅仅查找include数组里的文件夹
        //对应的exclude是不查找哪些文件夹
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
}