webpack配置source-map

配置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",
            ],
        })
    ]
};