webpack相關的重要配置檔案將在這一節給出。webpack水很深，在此先弄清楚原配檔案內容的含義，後續可以自己根據實際情況配置。

webpack.base.conf.js:配置vue開發環境的webpack配置，處理各種檔案（js、css、vue、圖片、視訊…）

// An highlighted block
'use strict'//js嚴格模式執行
const path = require('path')//引入node.js路徑模組
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工具模組

function resolve (dir) {//返回當前目錄的平行目錄的路徑
  return path.join(__dirname, '..', dir)
}

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {//輸入
    app: './src/main.js'
 
//入口檔案為main.js
  },
  output: {//輸出
    path: config.build.assetsRoot,//打包後文件輸出路徑，看看自己的index.js中build配置中的assetsRoot是啥目錄
    filename: '[name].js',//輸出檔名稱預設使用原名
    publicPath: process.env.NODE_ENV === 'production'//真正的檔案引用路徑，請看自己的index.js中build配置中寫的啥
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  }
 
,
  resolve: {//決定要做的事情
    extensions: ['.js', '.vue', '.json'],//省略副檔名，也就是說當使用.js .vue .json檔案匯入可以省略字尾名
    alias: {
      'vue$': 'vue/dist/vue.esm.js',//$符號指精確匹配，路徑和檔名要詳細
      '@': resolve('src'),//resolve('src‘)//resolve('src')指的是專案根目錄中的src資料夾目錄，匯入檔案的時候路徑可以這樣簡寫 import somejs from "@/some.js"就可以匯入指定檔案
    }
  },
//用來解析不同模組
  module: {
    rules: [
      {
        test: /\.vue$/,//正則表示式，表示當前loader能檢測.vue型別的檔案（分析這個正則：/標記正則表示式的開始和結束，指的是在開始和結尾處，否則要使用/就得轉義\/;\.表示., 此處的\將.標記為原意字元；$是正則表示式的結束
        loader: 'vue-loader',//對vue檔案使用vue-loader，該loader是vue單檔案元件的實現核心，解析.vue檔案
        options: vueLoaderConfig//將vueLoaderConfig當做引數傳遞給vue-loader,解析css相關檔案
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',//對js檔案使用babel-loader轉碼，該外掛用來解析es6等程式碼
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]//指明src資料夾 test資料夾 client資料夾下的js檔案要使用該loader
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,//這些格式結尾的圖片檔案
        loader: 'url-loader',//圖片檔案使用url-loader外掛，將圖片轉為base64格式字串
        options: {
          limit: 10000,//10000個位元組以下的檔案才用來轉為dataUrl
          name: utils.assetsPath('img/[name].[hash:7].[ext]')//超過10000位元組的圖片，就按照制定規則設定生成的圖片名稱，可以看到用了7位hash碼來標記，.ext檔案是一種索引式檔案系統
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,//音訊 視訊類檔案
        loader: 'url-loader',//也是用url-loader
        options: {
          limit: 10000,//10000個位元組以下的檔案才進行轉換
          name: utils.assetsPath('media/[name].[hash:7].[ext]')//這個name到底是給誰起的啊喂，給超過limit位元組限制的檔案起的
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,//處理字型相關
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      },
      /*新增sass開始*/
      {
        test:/\.(woff2?|eot|ttf|otf)(\?.*)?$/,//這個可以在vue元件中用sass scss等...
        loaders:['style','css','sass'],
      }
      /*新增sass結束*/
    ]
  },
  node: {//一個物件，每個屬性都是node.js全域性變數或模組的名稱，value為empty表示提供空物件
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,//false表示什麼都不提供，話說引數setImmediate表示非同步遞迴？？？需要查閱node文件了
    // 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'
  }
}

參考https://www.cnblogs.com/hongdiandian/p/8318552.html