webpack 多頁配置 webpack可以配置單頁應用, 也可以配置多頁應用。 區別在於, 單頁應用entry入口只有一個, 而多頁應用入口有多個 webpack配置: 以上代碼, HtmlWebpackPlugin 實例話了兩次, 每次都會生成一個html,所謂的多頁。並且選項中的, chunk ...
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，可以使用此選項。
