webpack4系列笔记之（5）sourcemap的配置

星雨668

已于 2022-06-05 22:39:57 修改

阅读量1.2k

点赞数 1

分类专栏： webpack 文章标签： webpack 前端 javascript

于 2022-06-05 22:34:27 首次发布

本文链接：https://blog.csdn.net/qq_42744920/article/details/125137771

版权

webpack 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一、什么是sourcemap？

sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术。尤其是如今前端开发中大部分的代码都经过编译，打包等工程化转换。将工程代码和开发代码建立起一种映射关系，方便查找及定位bug调试。

备注：本文node版本10.13.0 ，webpack版本4.26.0 webpack-cli版本3.1.2

二、sourcemap简单配置

根据上篇文章增加 sourcemap配置如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	mode: 'development',
	devtool: 'cheap-module-eval-source-map',
	// 一般开发环境配置
	// development devtool: 'cheap-module-eval-source-map',
	// 一般情况生产环境配置
	// production devtool: 'cheap-module-source-map',
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		}, 
		{
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2
					}
				},
				'sass-loader',
				'postcss-loader'
			]
		}]
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	}), new CleanWebpackPlugin(['dist'])],
	output: {
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	}
}