• webpack原理
  • 一：webpack介紹
  • 二：webpack打包前後路徑
  • 三：webpack配置
  • 四：通過npm+webpack配置Vue專案（不通過腳手架）

webpack原理

一：webpack介紹

Webpack 是一個前端資源載入/打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規

則生成對應的靜態資源。

webpack可以讓我們在模組化環境下進行模組化開發，開發完成後再將所有模組統一打包成一個檔案用以上線。

什麼是webpack打包？

模組化 => 把原本寫在一個檔案中的程式碼分成很多檔案來寫.(分)

打包 => 把寫在多個檔案中的程式碼最後合到一起.(合) (為了上線)

為什麼要打包?

為了上線。

專案最終需要執行在瀏覽器環境下，而模組化下的檔案有些是無法通過瀏覽器執行的，例如.less.vue檔案。

因此需要把這些不被瀏覽器識別的檔案轉換成瀏覽器可以識別的檔案。

例如，專案中有多個less檔案，最終會合併成一個css檔案，多個vue元件，也會合併到一個js檔案中。

自然，多個js檔案模組，最終也會合併到一個js檔案中。

打包命令：

npm run build

執行打包命令後，所有src中的模組都會被統一打包到一個dist資料夾中。如下圖：

所有的css檔案，less檔案sass檔案都會打包到css資料夾中，所有的js檔案和.vue檔案都會打包到js資料夾中。

最後這些靜態打包的資源，都會通過index.html載入到瀏覽器上。

dependencies 內的原始檔一定會被打包。

devDependencies 內的檔案是開發中才有用的工具，一定不會被打包。

通過main.js直接或間接找到的模組,都會被打包,找 不到的不打包。

public資料夾內的所有東西都會被打包，就算在專案中沒有用到。

二：webpack打包前後路徑

vue-cli是基於webpack開發的腳手架，可以直接在vue-cli中進行打包操作。

專案開發時，經常要寫路徑，這裡的路徑需要分清是打包前路徑還是打包後的路徑。

注意：

打包前路徑：我們開發專案期間是沒有打包的，所有的模組檔案相對於src資料夾寫路徑，這是打包前路徑。

打包後路徑：專案打包後，html引用資源，是相對於dist資料夾寫路徑的，這是打包後路徑。

腳手架自動將大多數打包前路徑會轉換成打包後路徑，但是有些路徑不會轉換，

1:請求ajax時的本地路徑不能寫打包前的路徑。解決辦法是把data.json放入到public檔案內。然後寫‘./data.json’

2:還例如通過js動態載入本地圖片路徑，不能寫打包前路徑。需要通過require引入圖片。require（打包前路徑）

另外，專案打包後，腳手架預設把所有的打包前路徑轉換成在伺服器根目錄下的路徑。這會導致預設執行dist內html找不到當前資料夾下的css檔案和js檔案。如果專案部署上線後是相對於當前資料夾載入資源，需要配置打包後的publicPath為 ./

在vue.config.js中進行配置

module.exports = {
  // 打包後所有模組都在dist目錄內查詢路徑
  publicPath: './',
  // 打包後不產生map檔案。
  productionSourceMap: false,
}

三：webpack配置

vue-cli實際上是一種webpack的模板，它進行了常見的vue專案的模組化配置。

例如設定main.js為入口檔案，app.js為出口檔案，預設下載vue-loader等等...

其實每一個專案都可以設定一些獨立的webpack配置。

不用vue-cli也可以自定義vue專案的webpack配置。

如果每次新建vue專案都要書寫重複的webpack配置，就會變得很麻煩。

因此Vue團隊才開發了一個vue-cli腳手架進行一些常規配置。

如果後續想要定製特殊的webpack配置，都統一可以在vue.config.js中進行配置。

webpack基礎配置有4項：

1：配置入口檔案 （必須）

2：配置出口檔案 （必須）

3：配置loader （可選）

4：配置plugin外掛 （可選）

什麼是入口檔案？模組化專案首先編譯的專案檔案。

通過這個檔案，webpack可以通過“順藤摸瓜”的方式獲取到專案所有的依賴檔案。

通過入口檔案，webpack才知道專案需要執行什麼模組。

通過入口檔案，webpack才知道專案打包時需要打包什麼模組。

什麼是出口檔案？專案需要打包，則需要指定打包後的檔名字以及存放位置。

什麼是loader （檔案提取器）？

打包的過程中,webpack需要編譯各個模組,但是webpack預設只能識別 js 的語法，對於其他格式的程式碼一律無法編

譯，例如css語法，vue語法，less語法等，為了讓打包編譯時能識別對應的各種檔案，並且把瀏覽器不能識別的文

件轉換成瀏覽器能識別的檔案，需要使用各種loader進行檔案轉換。

例如less檔案需要轉換成css檔案，.vue檔案需要轉換成js檔案。ES6語法還需要轉換成相容性更好的ES5語法。

loader就是對應檔案的轉換工具。

識別css檔案語法需要css-loader。

轉換less檔案需要less-loader。

轉換vue檔案需要vue-loader。

轉換ES6語法成ES5語法需要babel-loader。

轉換圖片為base64格式需要url-loader。

什麼是plugin外掛？專案打包過程中可能需要實現某些定製功能。

例如打包html檔案，這需要配置一個html-webpack-plugin外掛。

四：通過npm+webpack配置Vue專案（不通過腳手架）

步驟1：

進入DOS建立，新建一個資料夾作為專案資料夾。

mkdir webpacktest

步驟2：

進入webpacktest，初始化專案

npm init -y

初始化完成後，專案資料夾中會多出一個package.json檔案。

此時你可以通過npm install xxx檔案命令安裝依賴。

步驟3：

安裝webpack和webpack-cli，用於實現打包。

npm i webpack -g
npm i webpack-cli -g

安裝完成後，就可以通過webpack命令打包

webpack

webpack不做任何設定，預設的入口檔案就是src資料夾中的index.js

webpack預設的出口檔案在dist資料夾中的main.js

步驟4：

如果需要修改webpack預設的出口和入口檔案，需要新建一個webpack.config.js檔案。

在webpack.config.js檔案中就可以進行webpack的4項配置，即入口，出口，loader以及plugin

如果專案目錄下有webpack.config.js檔案，則webpack會優先讀取這個檔案。

// webpack.config.js

// 引入路徑模組
const path = require('path');

module.exports = {
  // 入口檔案
  entry: './src/main.js',
  // 出口檔案
  output: {
    // 出口檔案打包地址
    path: path.resolve(__dirname, './dist'),
    // 出口檔名
    filename: 'app.js'
  }
}

步驟5:

配置好入口檔案出口檔案後，我們的專案必須打包後才可以檢視效果和除錯，非常不方便。

因此需要為專案配置一個本地伺服器webpack-dev-server用於熱更新除錯專案，從而避免需要打包才能除錯。

注意：安裝webpack-dev-server 需要先 webpack-cli，但是這兩個工具的最新版有衝突，只能安裝指定的

webpack-cli版本才可以，親測3.3.12版本的webpack-cli不和webpack-dev-server衝突。

npm i [email protected] -g
npm i webpack-dev-server -g

然後通過webpack-dev-serve命令可以執行本地伺服器。

此時可以通過修改package.json中的scripts選項來新增一個命令來執行webpack-dev-server。

 "scripts": {
    "server": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

此時，專案執行在了指定的伺服器中，但是，對專案的修改不能實時的在瀏覽器中檢視到變化。

啟動伺服器的熱更新之後，每次專案修改，都會在記憶體中臨時打包，通過html渲染到頁面上。

需要在webpack.config.js中進行devServer的配置。

  devServer: {
  	// 在記憶體中實時打包,用以檢查新的變化.
    publicPath: '/dist'
  }

步驟6：

此時我們可以在模組中書寫Vue的語法。

但是需要安裝對應的vue-loader，以及編譯Vue元件模板的編譯器vue-template-compiler

另外，在使用vue-loader前，需要顯式的引入一個vue-loader中的外掛。

loader和外掛需要在webpack-config.js中進行配置。

安裝對應的loader和工具.

npm i vue-loader -D
npm i vue-template-compiler -D

配置webpack.config.js

// 顯式引入一個VueLoader外掛。注意,下載loader時已經包含這個外掛了,不需要額外安裝.
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
	...
    // 在module中配置loader
	 module: {
        rules: [{
          test: /\.vue$/,
          use: [
            'vue-loader'
          ]
        }]
  	},
    // 在plugins中配置外掛.
  	plugins:[
  		new VueLoaderPlugin(),
  	]
}

步驟7:

此時我們已經可以執行對應的vue專案.但是css的檔案的引入還是會編譯報錯.

以及引入的圖片無法顯示還有打包時不包含html檔案等問題。

因此需要引入對應的loader以及其他外掛來完成對應的問題。

安裝對應的loader

npm i css-loader -D
npm i style-loader -D
npm i url-loader -D
npm i file-loader -D
npm i uglistjs-webpack-plugin -D
npm i html-webpack-plugin -D

其中,css-loader是為了編譯css檔案

style-loader是為了把編譯好的css檔案通過link標籤插入到head中使樣式生效.

注意：use陣列中，style-loader必須寫在css-loader的前面。

url-loader為了處理圖片的路徑以及轉換為base64等問題。url-loader依賴file-loader。

uglistjs-webpack-plugin外掛可以讓我們打包後的檔案沒有註釋和換行，以減少打包體積。

html-webpack-plugin可以讓我們打包html檔案。

配置webpack.config.js

module.exports = {
	...
    // 在module中配置loader
	 module: {
        rules: [{
           test: /\.css$/,
           use: [
           	'style-loader',
           	'css-loader',
           ]
        },{
          test: /\.(png|jpg|jpeg|gif||svg)$/,
          use: [{
            loader: 'url-loader',
            options: {
              // 限制開始轉譯的大小，小的圖片則不用轉譯，減少HTTP請求.單位是位元組
              limit: 20000,
              // 匯入的圖片後不需要加default。
              esModule: false,
              // 自定義轉譯的檔名稱
              // ext表示檔案的副檔名
              // 取hash值前7位。
              name: '[name]-[hash:7].[ext]'
            }
      	  }],
    	}]
  	},
    // 在plugins中配置外掛.
  	plugins:[
        new HtmlWebpackPlugin({
      		template: './index.html'
    	}),
    	new UgLifyJSPlugin(),
  		new VueLoaderPlugin(),
  	]
}