帶你溫習一下webpack配置

IT皮皮蟹發表於2021-04-30
Web

前言

你知道node、webpack和npm之間的關係嗎？

首先來介紹一下node、webpack和npm的有什麼樣的關係。
我們知道webpack是對我們所開發的html、css、js等模組化開發的檔案進行一個整體的打包，然後更好地讓我們釋出。但是要想使用webpack進行打包，那麼就得依賴於node的環境。
同樣node環境為了能夠執行許多的程式碼，就需要安裝對應依賴的包，這就需要利用npm工具進行安裝。
npm的全稱即是Node Packages Manager。

webpack執行的出入口檔案

問題一：那麼我們為什麼需要webpack的出入口檔案呢？出入口檔案有什麼用呢？

入口檔案就是讓開發人員提供要打包的的一個主檔案。
模組化依賴中，這個主檔案會依賴另外的檔案，webpack可以根據你的主檔案找到其中依賴的其他的檔案，於是webpack便將這些所有的檔案打包到一個js檔案中(這個檔案大部分命名為bundle.js)。
出口檔案便是我們所說的打包成功後生成檔案(bundle.js)。

問題二：那麼如何使用去使用webpack去打包檔案？又如何去配置出入口檔案呢？

利用webpack打包檔案最直接的方式便是通過執行命令列直接打包檔案，如圖：

顯然通過這種方式最直接，直接就可以將開發程式碼打包好，但是不好的地方便是我們輸入的命令列太長，如果每次打包都需要輸入那麼長的命令列顯然是不太合理，也不是我們應該乾的。

那麼就需要第二種方式，需要一個配置檔案對該出入口檔案提供說明，那麼該配置檔案就是webpack.config.js，那麼如何配置呢？
首先可以利用npm run init 命令匯入建立一個package.json的檔案。
接下來就可以在對應專案的webpack.config.js的檔案中配置對應的出入口檔案

// 要使用node的內容需要使用 npm init進行匯入建立package.json
const path = require("path");

module.exports = {
  // 要打包的檔案入口
  entry: './src/main.js',

  // 要生成的檔案，最好是個物件，有多個內容
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: "bundle.js"
  }
}

說明：該配置檔案中用到了CommonJS的語法規範，利用require進行匯入path，module.exports匯出相關內容。entry中對應的便是入口檔案，而output中path便是要要匯出的檔案的絕對路徑，其中“__dirname”是當前資料夾所在的絕對路徑，然後在此路徑上拼接dist目錄，filename便是生成的檔名。

webpack的核心loader

webpack的loader是webpack中的核心，如果只有使用對應的loader才能匯入對應的靜態資源，比如css-loader、style-loader、less-loader、vue-loader、file-loader、url-loader等

css-loader、style-loader、less-loader
在JS的檔案中如果引用了CSS的檔案，那麼就需要將css-loader和style-loader進行配置，css-loader可以幫助我們處理 import / require（）但是不能將檔案中的存在的樣式顯示出來，這時需要style-loader才能將解析樣式，將要載入的樣式在頁面呈現出來。
CSS樣式檔案：

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      }
    ]
}

如果要引用less的樣式檔案，則需要在css-loader和style-loader樣式的基礎上加上less-loader，使用less-loader會將less的檔案編譯成css檔案，這樣就可以處理less的樣式檔案。

less樣式檔案：

module: {
    rules: [
      {
        test: /\.less$/,
        use: [{
          loader: "style-loader"
        }, {
          loader: "css-loader"
        }, {
          loader: "less-loader"
        }]
      }
    ]
}

url-loader、file-loader
url-loader和file-loader的是當檔案資源中有引用圖片等資源時，會使用這兩個loader。

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 當載入的圖片，小於limit時，會將圖片編譯成base64字串的格式
              // 當載入的圖片，大於limit時，會需要file-loader模組進行載入
              limit: 8192, // 8kb

              // 對圖片進行自定義的修改
              name: "img/[name].[hash:8].[ext]"
            }
          }
        ]
      }
    ]
}

說明：limit：是對對應的圖片資源進行限制，如果大於limit中的值，則會需要file-loader來處理這些圖片，會將這些圖片重新命名加進開發的資源中，也就是說webpack會將大於limit的圖片也打包，如果小於limit的值，則會將圖片編譯成base64的字串格式載入。
name: name 的屬性就是可以讓開發對大於limit的圖片打包命名，在上述程式碼中會將大於limit的圖片會在打包的總的目錄下(/dist)生成一個img的目錄，而生成的圖片的名字是自己原來的名字[name]+隨機生成的8位的雜湊值[hash:8]+不同圖片的副檔名[ext]。
file-loader需要使用以下程式碼自己安裝（以上的的loader也可以通過此方法安裝），上述在在使用file-loader時不需要配置，只需要將需要的file-loader安裝好即可，因為配置了url-loader之後，file-loader可以主動處理對應圖片資源：

npm install file-loader --save-dev   // 無版本，安裝最新版本
npm install file-loader@3.0.1 --save-dev   // 安裝需要的對應版本

vue-loader
vue-loader的作用就是對以副檔名為.vue的檔案進行載入編譯。

module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          "vue-loader",
        ]
      }
    ]
}

在使用vue模組化開發的的過程中，難免會需要使用.vue的檔案，這樣就需要配置一個vue-loader。

webpack的外掛

外掛一：HtmlWebpackPlugin
這個外掛的作用就是幫助你打包html檔案，我們都知道建立Vue專案的建立時需要有個index.html頁面作為頁面顯示的一個入口，當然我們打包的時候也需要將此檔案打包到要釋出的dist資料夾下。
首先可以使用npm install html-webpack-plugin --save-dev安裝需要的外掛。
接著使用下面的方法進行配置：

// 匯出需要用的html-webpack-plugin外掛
const HtmlWebpackPlugin = require("html-webpack-plugin")

plugins: [
    // 把index.html放入到要釋出的包中
    new HtmlWebpackPlugin({
    	template: 'index.html'
    })
]

外掛二：UglifyjsWebpackPlugin
UglifyjsWebpackPlugin外掛可以幫助我們將生成的bundle.js程式碼進行醜化，也就是把我們的生成的JS程式碼簡化，當然開發過程中我們不會進行該操作，畢竟有時候需要看看生成的程式碼，但是在最後的打包釋出會將最後生成一份簡化的程式碼，畢竟這樣佔用的空間比較小。
在未進行簡化之前的生成的bundle.js中的程式碼是這樣的：

那麼使用該外掛之後進行簡化之後的bundle.js程式碼就會變成這樣：

使用該外掛的方法如下：
首先安裝使用npm install uglifyjs-webpack-plugin --save-dev安裝該外掛。
接著在webpack.config.js的配置檔案中新增如下配置：

  plugins: [
      // 醜化JS，佔用更小的空間
      new UglifyJSWebpackPlugin()
  ]

webpack的搭建本地伺服器

在我們開發程式碼的過程中我們會不斷的修改完善我們的程式碼，但是隻有打包後才可以顯示我們修改後的內容，這樣就會導致我們會頻繁的進行打包執行，為了解決這個問題，webpack為開發人員提供了一個本地開發的伺服器，可以幫助我們自動實時重新整理顯示我們修改後的程式碼的結果。讓我們可以在本地的伺服器上進行執行，不需要頻繁的打包便可以直接執行，只需要到釋出時打包一次即可。
使用方法如下：
首先使用npm install webpack-dev-server --save-dev安裝搭建使用本地伺服器的環境。
然後就接著在webpack.config.js中進行對這個伺服器的配置：

  devServer:{
    contentBase:'./dist',
    inline:true // 頁面實時重新整理
  }

說明：contentBase: 該屬性的作用就是說明為哪個檔案資料夾提供本地服務。inline: 值為true時，頁面實時重新整理，否則不會重新整理。

相關文章