Vue配置文件-build/weback.base.conf.js

'use strict'    //使用严格模式

const path = require('path')   // 引入nodejs路径模块
const utils = require('./utils')   // 引入utils工具模块,处理css-loader和vue-style-loader
const config = require('../config')   // 引入config目录下的index.js配置文件，主要用来定义一些开发和生产环境的属性
const vueLoaderConfig = require('./vue-loader.conf')   //引入vue-loader.conf配置文件，解决各种css文件

function resolve (dir) {    //返回平行目录路径
  return path.join(__dirname, '..', dir)    //拼接路径
}

module.exports = {   
  entry: {     //入口文件配置
    app: './src/main.js'   //入口文件路径
  },
  output: {    //文件输出路径
    path: config.build.assetsRoot,   // 文件放在config下的index.js中的build配置中的assetsRoot，也就是dist目录
    filename: '[name].js',   //文件名称，默认name为main，
    publicPath: process.env.NODE_ENV === 'production'  //静态文件引用地址，判断是开发环境还是生产环境
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {   //匹配依赖文件，设置如何解析文件
    extensions: ['.js', '.vue', '.json'],    //省略后缀名，从前到后依次匹配
    alias: {   //配置文件别名
      'vue$': 'vue/dist/vue.esm.js',   //精准匹配，只能使用 import vuejs from "vue" 导入vue.esm.js文件
      '@': resolve('src'),   //目录中使用@替换src
    }
  },
  module: {   //解析不同的模块
    rules: [
      {
        test: /\.vue$/,   // 对vue文件使用vue-loader，该loader是vue单文件组件的实现核心，专门用来解析.vue文件的
        loader: 'vue-loader', 
        options: vueLoaderConfig  // 将vueLoaderConfig当做参数传递给vue-loader,就可以解析文件中的css相关文件
      },
      {
        test: /\.js$/,     // 对js文件使用babel-loader转码,该插件是用来解析es6等代码
        loader: 'babel-loader',   
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]   //配置针对那些目录/文件
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,       //对图片相关的文件使用 url-loader 插件，生成一个64位的DataURL，使用src加载，也就是把图片当成一串代码，避免请求
        loader: 'url-loader',        //用哪种npm形式的lodeer去解析，用！分隔
        options: {                 
          limit: 10000,               // 文件的大小小于10000字节(10kb)的时候会返回一个dataUrl
          name: utils.assetsPath('img/[name].[hash:7].[ext]')   //文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,   //针对*后缀文件
        loader: 'url-loader',     //使用的loader插件，！分隔
        options: {     
          limit: 10000,        //限制小于10000字节时处理
          name: utils.assetsPath('media/[name].[hash:7].[ext]')    //文件名为name.7位hash的值.扩展名
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,      //针对*后缀文件
        loader: 'url-loader',       //使用的loader插件，！分隔
        options: {   
          limit: 10000,     //限制小于10000字节时处理
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')    //文件名为name.7位hash的值.扩展名
        }
      }
    ]
  },
  node: {
    // 这个配置是一个对象，其中的每个属性都是nodejs全局变量或模块的名称
    setImmediate: false, // false表示什么都不提供。如果获取此对象的代码，可能会因为获取不到此对象而触发ReferenceError错误
    dgram: 'empty',   // 设置成empty则表示提供一个空对象
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}