带你了解最全的webpackbaseconfigjs文件中文注释

'use strict'
const path = require('path') // 引入 Node.js 的 Path 模块
const utils = require('./utils') // 引入 utils 文件, 此处主要用到了 assetsPath() 方法, 用来根据开发模式或生产模式来使用 config 文件下的相应配置
const config = require('../config') // 引入 config 文件夹下 index.js, 使用打包或开发配置
const vueLoaderConfig = require('./vue-loader.conf') // 引入 vue 文件加载规则

function resolve (dir) { // 用于生成 dir 变量的绝对路径
  return path.join(__dirname, '..', dir) // Path 模块 join 方法, 用于连接路径, 正确使用当前系统路径分隔符,Unix 系统是 "/",Window 系统是 "\"
}



module.exports = {context: path.resolve(__dirname, '../'), // 返回到项目为止的基础目录, 绝对路径
  entry: {// 入口文件, 可以为多个, 单页面应用 (SPA): 一个入口起点, 多页面应用 (MPA): 多个入口起点
    app: './src/main.js'// 可以全局引入样式框架 iview 或 elementUI, 工具库, 插件等
  },
  // 配置打包输出路径和命名规则
  output: {// 此处最终指向了 path.resolve(__dirname, '../dist'),
    // 也就是打包之后, 会生成一个 dist 夹, 所有的资源文件都在 dist 里面
    path: config.build.assetsRoot,
    // 打包后出的文件名，name 就是入口文件前面的 key 值，// 此处是 index 和 admin. 为什么用 name，因为会打包出来三个文件，// 第一个是源代码文件，第二个是 runtime 文件，第三个是 ventor 文件，// 所以每个文件打包出来的名字就跟定义的 chunkname 一致。filename: '[name].js',
    // 上线地址, 也就是真正的文件引用路径
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    // 省略的文件后缀名,require 模块可以省略不写后缀名
    extensions: ['.js', '.vue', '.json'],
    alias: { // 模块别名配置, 用符号或变量名, 替换较长的路径
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'), // @符号代表 src 开始的绝对路径
      'static': resolve('static') // static 代表 static 开始的绝对路径
    }
  },
  // 关于模块配置
  module: {
    //  模块规则（配置 loader、解析器等选项）rules: [
      { // 对 vue 文件使用 vue-loader 解析器
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig // 配置选项在同级目录 vue-loader.conf.js 文件里
      },
      { // 对 js 文件使用 babel-loader 编译转码, 解析 es6 代码
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]// 限定解析范围
      },
      { // 对图片文件使用 url-loader,10000 字节之内的图片, 会进行 base64 转换
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]') // 资源发布路径
        }
      },
      { // 对多媒体文件使用 url-loader,10000 字节之内时, 进行 base64 转换
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]') // 资源发布路径
        }
      },
      { // 对字体图标文件使用 url-loader, 小于 10000 字节时, 进行 base64 转换
        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'
  }
}