從零開始webpack4.x（八）配置source-map

source-map

新建一個配置

在mode: 'production'下 報錯提示

home.js

console.log('index');

class Log {
    constructor() {
        console.lo(123);  // 錯誤位置
 } } let log = new Log();

 webpack.config.js

沒有使用devtool時，瀏覽器錯誤提示截圖 打包壓縮后的文件 不利於查找錯誤

  

 1.使用source-map提示截圖
生產單獨映射文件 報錯提示 報錯代碼查看

2. 使用eval-source-map提示截圖
不會產生單獨文件

 

3.使用cheap-module-source-map截圖

產生單獨文件 不顯示列

 

 

4.使用cheap-module-eval-source-map

不產生單獨文件和列  集成打包后文件 警告 home.js超過244KiB 可能會影響web性能。

 

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'production',
    entry: {
        home: './src/home.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    // 1) 源碼映射 會生成一個單獨的sourcemap文件 出錯了 會標識 當前報錯的列 行 1.生產文件大 全面
    // devtool: 'source-map',
    // 2）不會產生單獨文件 但可以顯示列 行
    // devtool: 'eval-source-map',
    // 3）不會產生列 有單獨映射文件
    // devtool: 'cheap-module-source-map',
    // 4）不會產生文件和列 集成打包后的文件中 
    // devtool: 'cheap-module-eval-source-map',
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            { 
                test: /\.js$/, 
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                }
            }
        ]
    }

}