關(guān)于Devtool
該選項控制是否以及如何生成源映射。官網(wǎng)上給出的可選值有：
其中一些值適合開發(fā)，一些用于生產(chǎn)诗赌。對于開發(fā)，您通常需要快速的Source Maps秸弛，以bundle的大小為代價境肾，但是對于生產(chǎn)，您需要獨立的Source Maps胆屿，這是精確的奥喻，并且支持最小化。
選擇一種源映射樣式非迹，以增強(qiáng)調(diào)試過程环鲤。這些值可以顯著地影響構(gòu)建和重建速度。而不是使用devtool選項還可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的選擇憎兽。不要同時使用devtool選項和插件冷离。devtool選項在內(nèi)部添加了插件，所以你最終會得到應(yīng)用兩次的插件纯命。
實例詳解
1.新建print.js
export default function printMe() {
? console.log('武昌魚@222');
}
2.新建index.js
import printMe from './print.js';
function component() {
? var element = document.createElement('div');
? var btn = document.createElement('button');
? btn.innerHTML = 'Click 1me and check 1the console!';
? btn.onclick = printMe;
? element.appendChild(btn);
? return element;
}
document.body.appendChild(component());
3.新建webpack.config.js
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
? entry: './src/index.js',
? output: {
? ? filename: '[name].js',
? ? path: path.resolve(__dirname, 'dist')
? },
? plugins: [
? ? new CleanWebpackPlugin(['dist']),
? ? new HtmlWebpackPlugin({
? ? ? title: ' webpack之devtool'
? ? })
? ]
};
4.使用不同的devtool選項
none
打包后點擊打印按鈕西剥，console顯示main.js:96，生成代碼如下所示：
eval
eval 模式會把每個 module 封裝到?eval 里包裹起來執(zhí)行亿汞，并且會在末尾追加注釋瞭空。
Each module is executed withevaland//@ sourceURL.
打包之后點擊打印按鈕，console顯示print.js:3，生成代碼如下所示：
source-map
打包之后你會發(fā)現(xiàn)你的 output 目錄下多了一個?index.js.map?文件咆畏，此文件記錄了sourceMap 行列信息如何映射源代碼的信息南捂。點擊打印按鈕，console顯示print.js:3旧找，生成代碼如下所示：
hidden-source-map
打包后main.js與 source-map 選項相比少了末尾注釋溺健，但 output 目錄下的 index.js.map 沒有少。點擊打印按鈕钮蛛，console顯示main.js:96鞭缭。
inline-source-map
打包后可以看到末尾的注釋 sourceMap 作為?DataURL?的形式被內(nèi)嵌進(jìn)了 bundle中，由于 sourceMap 的所有信息都被加到了bundle中魏颓，整個 bundle 文件變得碩大無比缚去。點擊打印按鈕，console顯示print.js:3琼开，生成代碼如下所示：
eval-source-map
和 eval 類似，但是把注釋里的?sourceMap 都轉(zhuǎn)為了 DataURL枕荞。console顯示print.js?dc38:2柜候，生成代碼如下所示：
cheap-source-map
和 source-map 生成結(jié)果差不多。output 目錄下的index.js內(nèi)容一樣躏精。但是 cheap-source-map 生成的 index.js.map 的內(nèi)容卻比 source-map 生成的 index.js.map 要少很多代碼渣刷，我們對比一下上文 source-map 生成的 index.js.map 的結(jié)果，發(fā)現(xiàn)?source?屬性里面少了列信息矗烛，如下所示：
cheap-module-source-map
在一個單獨的文件中生成一個不帶列映射的map辅柴，不帶列映射提高了打包速度，但是也使得瀏覽器開發(fā)者工具只能對應(yīng)到具體的行瞭吃，不能對應(yīng)到具體的列（符號）碌嘀，會對調(diào)試造成不便；
總結(jié)
開發(fā)環(huán)境推薦使用：
1.eval ：每個模塊使用eval()和//@ sourceURL執(zhí)行歪架。這是非彻扇撸快。主要缺點是和蚪，它沒有正確顯示行號止状，因為它被映射到轉(zhuǎn)換代碼而不是原始代碼(沒有來自加載器的源映射)。
2.eval-source-map：每個模塊使用eval()執(zhí)行攒霹，而SourceMap作為DataUrl添加到eval()中怯疤。最初它是緩慢的，但是它提供快速的重建速度和產(chǎn)生真實的文件催束。行號被正確映射集峦，因為它被映射到原始代碼。它產(chǎn)生了最優(yōu)質(zhì)的開發(fā)資源。
3.cheap-eval-source-map：與eval-source-map類似少梁，每個模塊都使用eval()執(zhí)行洛口。它沒有列映射，它只映射行號凯沪。它忽略了來自加載器的源代碼第焰，并且只顯示與eval devtool相似的經(jīng)過轉(zhuǎn)換的代碼。
4.cheap-module-eval-source-map：類似于cheap-eval-source-map妨马，在本例中挺举，來自加載器的源映射被處理以獲得更好的結(jié)果。然而烘跺，加載器源映射被簡化為每一行的單個映射湘纵。
生產(chǎn)環(huán)境推薦使用：
1.(none) ：(省略devtool選項)-不觸發(fā)SourceMap。這是一個很好的選擇滤淳。
2.source-map：一個完整的SourceMap是作為一個單獨的文件梧喷。它為bundle?添加了引用注釋，因此開發(fā)工具知道在哪里找到它脖咐。
3.hidden-source-map：與source-map相同铺敌，但不向bundle?添加引用注釋。如果您只希望SourceMaps從錯誤報告中映射錯誤堆棧跟蹤屁擅，但不想為瀏覽器開發(fā)工具暴露您的SourceMap偿凭，可以使用此選項。
4.nosources-source-map：一個SourceMap是在沒有源代碼的情況下創(chuàng)建的派歌。它可以用于在客戶機(jī)上映射堆棧跟蹤弯囊，而不暴露所有源代碼。您可以將源映射文件部署到webserver胶果。
