webpack SourceMap 配置

当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'