CodingWife 寇丁人妻日安

【Webpack】source-map

2018-03-23

新手從無到有,初探 webpack 的心得。

有時候看到別人的webpack.config.js會看到一段devtool: 'source-map'
不太了解這是什麼,也不太了解那有什麼用處,現在就來看看。

版本:webpack 4.1.1

因為有時候要檢查出錯的程式碼,但是從 webpack 產出的檔案都是已經被編譯過的,
就算找到 bug 位置,可是不知道具體 source code 位置,還是沒辦法做即時修正。

一、在 js 中使用

module.exports = {
entry: {
...
},
devtool: 'source-map'
}

修改webpack.config.js,開發者工具會連結到src/app.js 有 bug 的位置。

二、在 css 中使用

{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
//resolve-url-loader may be chained before sass-loader if necessary
use: ['css-loader?sourceMap', 'sass-loader?sourceMap']
})
}

一樣修改webpack.config.js,就會在開發者工具 css 的部份看到 app.scss

Tags: Webpack