vue --- 脚手架初始化项目中配置文件webpack.base.conf.js代码含义

'use strict'
//引入node path 中间件 可以获取到 path 路径的一些信息
const path = require('path')
//引入utils工具模块 utils主要用来处理css-loader和vue-style-loader的
const utils = require('./utils')
//引入config下面的index文件 主要是配置一些开发环境和生产环境的配置
const config = require('../config')
//用来解决各种css 文件 sass less stulys 等
const vueLoaderConfig = require('./vue-loader.conf')
// 定义了一个路径函数 返回当前的目录的平行目录下的dir因为有'..'也就是获取绝对路径，方便对import时引入地址的方便填写
function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
//eslint 的检测规则
const createLintingRule = () => ({
    //对js和vue 文件进行eslint 检查
    test: /\.(js|vue)$/,
    //使用eslint-loader
    loader: 'eslint-loader',
    //enforce执行的意思 有两个值 pre post
    //pre是在其他规则执行之前执行 post是在其他规则执行之后执行
    enforce: 'pre',
    //进行检测的文件目录包括哪些 调用了路径函数，
    include: [resolve('src'), resolve('test')],
    options: {
      //使用第三方的插件进行eslint 检测
        formatter: require('eslint-friendly-formatter'),
        //是否输出eslint报错信息
        emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})
//webpack的配置，可以理解成是开发环境和正式环境的一些公共配置
module.exports = {
    //webpack 解析时根目录地址如果此文件在跟目录这句话就不用写
    context: path.resolve(__dirname, '../'),
    //项目的入口文件
    entry: {
        app: './src/main.js'
    },
    //项目出口文件配置
    output: {
        //项目buid的出口文件的目录地址,这里指的是(../dist文件目录) 引入的是config.build 下面的配置
        path: config.build.assetsRoot,
        //文件的名字
        filename: '[name].js',
        //输出解析文件的目录，url 相对于 HTML 页面(生成的html文件中，css和js等静态文件的url前缀)
        publicPath: process.env.NODE_ENV === 'production' ?
            config.build.assetsPublicPath : config.dev.assetsPublicPath
    },
    resolve: {
        //指定哪些文件在引用时可以省略后缀名
        extensions: ['.js', '.vue', '.json'],
        //别名，在引用文件时 使用别名代理真实目录 后面再在目录时以别名代替
        alias: {
            '@': resolve('src'),
            'common': resolve('src/common'),
            'components': resolve('src/components')
        }
    },
    module: {
        //转换解析规则
        //1.test是用来解析所有此后缀名的文件，
        //2.loader我们用什么npm什么形式的loader去解析
        //3.include是代表我们解析的文件只包含那些东西
        //4.options解析文件参数设置 具体看下面的解释
        rules: [
            ...(config.dev.useEslint ? [createLintingRule()] : []),
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                //对vue的css进行解析
                options: vueLoaderConfig
            },
            {
                //对js文件使用babel-loader进行解析 主要是解析es6
                test: /\.js$/,
                loader: 'babel-loader',
                include: [resolve('src'), resolve('test')]
            },
            {
                //对图片使用url-loader解析 这个插件的作用是将一个足够小的文件生成一个64位的DataURL
                //当limit小于10000进行将图片生成base64
                //name 指的是引入的utils里面的一个方法 将name ,7位哈希 .ext 代表后缀名
                //传入方法 返回结果是 /static/img/[name].[hash:7].[ext]
                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: {
        // 是否 polyfill 或 mock
        // prevent webpack from injecting useless setImmediate polyfill because Vue
        // 源包含它（虽然仅在本地使用)
        setImmediate: false,
        // 预防webpack从注入模拟节点到node原生模块
        // that does not make sense for the client 这对客户端没有影响
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
    }
}