webpack配置source-map

最新推荐文章于 2025-04-06 10:15:41 发布

rookieLink

最新推荐文章于 2025-04-06 10:15:41 发布

阅读量1k

点赞数

分类专栏： webpack系列文章标签： webpack source-map 源码映射

本文链接：https://blog.youkuaiyun.com/zf2014122891/article/details/104563001

版权

webpack系列专栏收录该内容

37 篇文章

订阅专栏

本文详细介绍了如何配置webpack以生成source-map，帮助开发者在调试过程中查看原始源代码，提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置source-map:

查看原映射文件

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 多入口
    mode: 'development',
    entry: {
        home: './src/index.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    // 1) 源码映射 会单独生成一个sourcemap文件  出错了会标志当前报错的列和行
    // 大而全
    // devtool: "source-map", // 增加映射文件，帮助我们调试代码
    // 2) 可以定位到列和行，但不会产生独立的文件
    // devtool: 'eval-source-map'
    // 3） 不会产生列，但是会生成一个单独的映射文件
    // devtool: 'cheap-module-source-map',
    // 4) 不会产生文件，集成在打包后的文件中，不会产生列
    // devtool: 'inline-cheap-module-source-map',
    devtool: 'cheap-module-eval-source-map',
    output: {
        // 这里的 name代表 home， other
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "index.html",
            chunks: [
                "home",
            ],
        })
    ]
};