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'
    }
}