玖叶教程网

source-map是一种提供源代码到构建后代码映射的技术。有利于开发时调试代码。

source-map（外部）-源代码错误代码准确信息和错误位置。

inline-source-map（内部）-源代码错误代码准确信息和错误位置。

hidden-source-map（外部）-没有源代码错误代码准确信息和没有错误位置。

eval-source-map（内部）-源代码错误代码准确信息和源代码错误位置。

nosources-source-map（外部）-源代码错误代码准确信息和没有源代码错误位置。

cheap-source-map（外部）-源代码错误代码准确信息和源代码错误位置。

cheap-module-source-map（外部）-源代码错误代码准确信息和源代码错误位置。

webpack.dev.js的配置如下：

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');//打包html
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.base.js');
let devConfig = {
    entry: ['./src/main.js', './src/assets/index.html'],
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'postcss-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true//自动修复
                }
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/assets/index.html',
            hash: true,
            filename: 'index.html',
            favicon: './src/assets/favicon.ico',
        }),
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'dist'),//打包后的文件路径
        open: true,//自动打开浏览器
        compress: true,//启动gzip压缩
        port: 3000,//端口号
        hot: true,//HMR
    },
    target: 'web',
    devtool: 'eval-source-map'
}
module.exports = merge(commonConfig, devConfig);

git仓库：

https://gitee.com/seimin/xiaoming2qianduan-webpack5/tree/v5.13/