深入淺出webpack學習(11)--多種類型配置

idisfkj 發布于2019-08-22 15:08 / 2369人閱讀

摘要：如果采用導出一個來描述所需配置的方法需要寫兩個文件。再在啟動時通過指定使用哪個配置文件。例如啟動命令是時，則的值是。采用描述的一份配置采用函數描述的一份配置采用異步函數描述的一份配置以上配置會導致針對這三份配置執行三次不同的構建。

除了通過導出一個Object來描述webpack所需要的配置，還有其他更靈活的方式，以簡化不同場景的配置。下面來一一介紹它們。

1. 導出一個Function

在大多數時候可能需要從同一份源代碼中構建出多份代碼，例如一份用于開發時，一份用于發布到線上。

如果采用導出一個Object來描述webpack所需配置的方法需要寫兩個文件。一個用于開發環境，一個用于線上環境。再在啟動時通過webpack --config webpack.config.js指定使用哪個配置文件。

采用導出一個Function的方式，能通過JavaScript靈活的控制配置，做到只用寫一個配置文件就能完成以上要求。

const path = require("path")
const UglifyJsPlugin = require("webpack/lib/optimize/UglifyJsPlugin")

module.exports = function(env={}, argv) {
    const plugins = []
    const isProducton = env["production"]
    
    // 在生成環境才壓縮
     if (isProduction) {
        plugins.push(
         // 壓縮輸出的 JS 代碼
         new UglifyJsPlugin()
     )
     
     return {
        plugins: plugins,
        // 在生成環境不輸出 Source Map
        devtool: isProduction ? undefined : "source-map",
      };
  
}

在運行webpack時，會給這個函數傳入2個參數，分別是：

1. env: 當前運行時的webpack專屬環境變量， env是一個object。讀取時直接訪問Object屬性，設置它需要在啟動webpack時帶上參數。例如啟動命令是 webpack --env.production --env.bao=foo時，則 env 的值是 {"production":"true","bao":"foo"}。

2.argv：代表在啟動webpack時所有通過命令行傳入的參數，例如：--config、 --env、 --devtool，可以通過webpack -h列出所有webpack支持的命令行參數。

就以上配置文件而言，在開發時執行命令webpack構建出方便調試的代碼，在需要構建發布到線上的代碼時執行webpack --env.production構建出壓縮代碼。

2. 導出一個返回promise的函數

有些情況下你不能以同步的方式返回一個描述配置的object，webpack還支持導出一個返回promise的函數，使用如下：

module.exports = function(env = {}, argv) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        // ...
      })
    }, 5000)
  })
}

3. 導出多份配置

除了只導出一份配置外，webpack還支持導出一個數組，數組中可以包含每份配置，并且每份配置都會執行一遍構建。

module.exports = [
  // 采用 Object 描述的一份配置
  {
    // ...
  },
  // 采用函數描述的一份配置
  function() {
    return {
      // ...
    }
  },
  // 采用異步函數描述的一份配置
  function() {
    return Promise();
  }
]

以上配置會導致 Webpack 針對這三份配置執行三次不同的構建。

這特別適合于用 Webpack 構建一個要上傳到 Npm 倉庫的庫，因為庫中可能需要包含多種模塊化格式的代碼，例如 CommonJS、UMD。

GPU云服務器云服務器深入淺出webpack webpack cdn配置 webpack配置cdn webpack常用配置項

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93205.html

Loader 入門【Webpack Book 翻譯】

摘要：把他設置為以在其他之前或之后進行處理。基于布爾值的字段可用于進一步進行約束不匹配給定條件參見表示接受的值。同時匹配一系列條件。將此添加到你的配置即可檢查其中的數據流，而不必在中插入。原文鏈接：https://survivejs.com/webpack...翻譯計劃：https://segmentfault.com/a/11...附言：因為發現書中一些內容單獨放出來會比較尷尬，所以會跳...

yeyan1996 2019-08-26 12:17 評論0 收藏0
什么是 Webpack？【Webpack Book 翻譯】

摘要：資源哈希編碼使用可以為每個包的名稱注入一個哈希值例如，，以便在版本更新后使客戶端上舊版本的包無效重新下載。如此受人喜愛的原因之一是熱模塊更換。可以為文件名生成哈希值，在內容更改時，可以作廢瀏覽器緩存中上個版本的包。原文鏈接：https://survivejs.com/webpack...翻譯計劃：https://segmentfault.com/a/11... 涉及到的未翻譯單詞 ...

tainzhi 2019-08-23 10:59 評論0 收藏0
webpack4.x深入與實踐

摘要：它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。可以將多種靜態資源轉換成一個靜態文件，減少了頁面的請求。因此我們不再按文件文件的方式運行指令，而是直接運行這樣便能實現打包。一、什么是webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。它做的事情是，分析你的項目結構，找到J...

Lsnsh 2019-08-23 10:39 評論0 收藏0
一名【合格】前端工程師的自檢清單

摘要：在他的重學前端課程中提到到現在為止，前端工程師已經成為研發體系中的重要崗位之一。大部分前端工程師的知識，其實都是來自于實踐和工作中零散的學習。一基礎前端工程師吃飯的家伙，深度廣度一樣都不能差。開篇前端開發是一個非常特殊的行業，它的歷史實際上不是很長，但是知識之繁雜，技術迭代速度之快是其他技術所不能比擬的。 winter在他的《重學前端》課程中提到：到現在為止，前端工程師已經成為研...

羅志環 2019-08-23 17:08 評論0 收藏0