当webpack mode 是 “development”时,默认是sourcemap 已经配置进去了的。
下面是我们的代码,此时,mode 是 “development”,此时sourcemap 默认已经配置进去了。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: {
main: "./src/index.js"
},
module: {
rules: [{
test: /\.(png|jpg|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'imgs/'
}
}
},{
test: /\.scss$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules:true
}
},
'sass-loader',
'postcss-loader']
}]
},
output: {
// publicPath: "http://cdn.com.cn",
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
},
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html'
})]
}
现在,我们将 sourcemap 关闭。
配置devtool 配置项,如下。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
devtool: "none",
entry: {
main: "./src/index.js"
},
...
}
然后,我们使用命令打包。
npm run bundle
如果说,我们的代码有报错的话,浏览器中的提示会向下面这样。
它给我们链接的代码,会跳转到压缩文件main.js 中,然而,对我们debug 代码的话,当然还是想直接跳转到未压缩的问题代码。这就要用到SourceMap 了。
SourceMap 可以将压缩代码,映射到未压缩代码。
下面,我们更改一下devtool 的配置,如下。就可以使用sourcemap 了。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
devtool: "source-map",
entry: {
main: "./src/index.js"
},
...
}
打包后,浏览器报错就可以直接跳转到未压缩的文件了。
我们可以在webpack官网 documentation > configuration > devtool 中查看devtool 的介绍。
我们接了一部分可用配置值。
带有cheap 前缀的是指,报错只对应到行,不对应到列(build 的性能能提升很多)
带有inline 前缀的是指,映射文件,不会单独出来生成一个 .map 文件,而是放在 .js压缩文件中。
带有module 前缀的是指,不仅映射业务模块代码,还要映射 loader 第三方模块 的代码。
带有eval 前缀的是指,通过eval() 的执行方式进行映射的,但是如果代码比较复杂的话,它的提示可能不全面。eval 是打包速度最快的方式。
推荐在开发的时候,使用:
devtool: 'cheap-module-eval-source-map'
或者
devtool: 'cheap-module-source-map'