Webpack4 學習筆記六 多頁面配置和devtool

apy發表於2019-01-21
Web筆記dev

webpack 多頁配置

webpack可以配置單頁應用, 也可以配置多頁應用。

區別在於, 單頁應用entry入口只有一個, 而多頁應用入口有多個

webpack配置:

const path = require(`path`)
const HtmlWebpackPlugin = require(`html-webpack-plugin`)

module.exports = {
  mode: "development",
  entry: {
    home: `./src/home.index`,
    about: `./src/about.js`
  },
  output: {
    // 多個入口的檔案不能打包的一個檔案中, 應該用name區別。這樣就會輸出 home.js和about.js
    filename: `[name].js`,
    path: path.resolve(__dirname, `dist`)
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: `page home`,
      template: `./index.html`, // 模版檔案
      filename: `index.html`,
      chunks: [`home`]
    }),
    new HtmlWebpackPlugin({
      title: `page about`,
      template: `./index.html`, // 模版檔案
      filename: `index.html`,
      chunks: [`about`]
    })
  ]
}

以上程式碼, HtmlWebpackPlugin 例項話了兩次, 每次都會生成一個html,所謂的多頁。並且選項中的, chunks的設定主要讓每個index.html分別引用它自己的js檔案。

webpack devtool

此選項控制是否生成，以及如何生成 source map。

source-map

原始碼對映, 會單獨生成一個sourcemap檔案, 出錯了,會標識當前報錯的列和行, 大而全,並且是相互獨立的。
source-map 是所有選項中最慢和最高質量的選擇，但這對於生產建設來說是很好的

eval-source-map

不會產生單獨的檔案, 但是可以顯示列和行。和source-map的主要區別是不會產生檔案

cheap-module-source-map

簡化後的 source-map, 不會產生列, 但是是一個單獨的map檔案,產生後你可以保留起來,用於除錯

cheap-module-eval-source-map

不會生成map檔案,不會顯示列,可以定位到錯誤的行

webpack配置

module.exports = {
  devtool: "source-map"
}

總結:

開發環境推薦使用：

  • eval ：每個模組使用eval()和//@ sourceURL執行。這是非常快。主要缺點是，它沒有正確顯示行號，因為它被對映到轉換程式碼而不是原始程式碼(沒有來自載入器的源對映)。

  • eval-source-map：每個模組使用eval()執行，而SourceMap作為DataUrl新增到eval()中。最初它是緩慢的，但是它提供快速的重建速度和產生真實的檔案。行號被正確對映，因為它被對映到原始程式碼。它產生了最優質的開發資源。

  • cheap-eval-source-map：與eval-source-map類似，每個模組都使用eval()執行。它沒有列對映，它只對映行號。它忽略了來自載入器的原始碼，並且只顯示與eval devtool相似的經過轉換的程式碼。

  • cheap-module-eval-source-map：類似於cheap-eval-source-map，在本例中，來自載入器的源對映被處理以獲得更好的結果。然而，載入器源對映被簡化為每一行的單個對映。

生產環境推薦使用

  • (none) ：(省略devtool選項)-不觸發SourceMap。這是一個很好的選擇。

  • source-map：一個完整的SourceMap是作為一個單獨的檔案。它為bundle 新增了引用註釋，因此開發工具知道在哪裡找到它。

  • hidden-source-map：與source-map相同，但不向bundle 新增引用註釋。如果您只希望SourceMaps從錯誤報告中對映錯誤堆疊跟蹤，但不想為瀏覽器開發工具暴露您的SourceMap，可以使用此選項。

參考文章: webpack之devtool

筆記地址

相關文章