1.Webpack.base.con.js解析

這部分各位可以參考各自的檔案

首先，先看一下引入了哪些檔案

const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

1.path就是在處理整個路徑的，基本上在每個檔案中都可以看到他，不可或缺

2.utils是Vue-loader對於像是Sass、less等css語法的解析工具

3.config是開發環境和生產環境不同參數的配置以及路徑等配置

4.vueLoaderConfig是基礎生產環境和開發環境對vue-loader的配置

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

這個部分是在獲取絕對路徑，方便之後對import時引入位置的填寫

  entry: {
    app: './src/main.js'
  },

main.js是一個入口文件

output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

output是我們輸出文件的路徑

path代表輸出時的路徑，可以在config/index.js中

build:{
assetsRoot:path.resolve(__dirname, '../dist'),
}

找到這行，也就是將輸出的文件路徑，放在根目錄下的dist目錄下

filename也就是入口文件的名稱(app.js)

publishPath是webpack編譯輸出的發佈路徑，必須根據我們在靜態文件的loader進行配置

一樣區分為生產環境以及開發環境，簡單來說publishPath是上線時的路徑

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('./src/components')
    }
  },

extensions也就是別名，為了方便引用模塊而設定，例如有了別名之後

import Vue from 'vue/dist/vue.common.js'

可以寫成

import Vue from 'vue'

簡單的說，可以讓我們省略副檔名不填

alias是配置別名，有的時候再引用文件時路徑過多過長容易出錯

使用別名 設定一個入口位置可以減輕開發負擔

以上面的例子來看

'components': resolve('./src/components')

這一行 把相對路徑.src/components 改成components 以後再呼叫任何有.src/components項下的文件時，僅需要輸入components/xxx即可

module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        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]')
        }
      }
    ]
  }

這一大段長長的，就是在設定不同類型文件的處理規則

以下Loader引用自這裡

Loader 是 Webpack 中最振奮人心的東西了！

將一切瀏覽器不支持的語言，處理成 瀏覽器可以支持。
針對各個文檔類型，都有各種的 Loader 等你去挖掘。

Loader 的工作方式 是從右向左執行，鏈式地按照順序進行編譯。
loader 鏈中的第一個返回值給下一個 loader，在最後一個 loader，返回所預期的結果。

Loaders需要單獨安裝並且需要在modules關鍵字下進行配置，Loaders的配置包括以下幾方面：

• test ：一個用以匹配loaders所處理文檔的拓展名的正則表達式（必須）
• loader ：loader的名稱（必須）

2.webpack.dev.conf.js解析