Webpack源映射无法正常工作

Question

我在webpack 4项目中设置源地图时遇到问题。当我启动webpack-dev-server时，我的样式源映射工作正常，但是，我的js源映射未生成。对于js和scss文件，我都将setup options.sourceMap设置为true。但是，babel loader无法正常工作。任何指针将不胜感激。谢谢。

这是我的package.json

   {
  "name": "test",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap": "^4.3.1",
    "bootstrap-material-design-icons": "^2.2.0",
    "jquery": "^3.4.1",
    "knockout": "^3.5.0",
    "popper.js": "^1.15.0",
    "source-sans-pro": "2.20.2"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.5",
    "clean-webpack-plugin": "^2.0.2",
    "css-loader": "^2.1.1",
    "eslint": "^5.16.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }
}

这是我的webpack.config.js配置：

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        contentBase: './dist',
        open: true
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js'
    },
    module: {
        rules: [{
            // scss configuration
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true 
                    }
                }
            ]
        }, {
            // js configuration
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    sourceMap: true
                }
            }
        }]
    },
    plugins: [
        // all plugins used for compiling by webpack
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Style Guide',
            template: path.resolve(__dirname, 'src', 'index.html')
        }),
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css'
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            ko: 'knockout'
        })
    ]
};