Webpack脚本加载器无法在Chrome中调试源

Question

与很多人一样，我需要处理遗留代码，而不是想要使用Webpack进行构建。有点奇怪。

我将脚本加载器用于旧版代码。 （* .exec.js） 它可以执行，但在chrome中，无法使用Ctrl+P到源文件放置断点。

TypeScript源可用，并且调试器在其中运行。 （就像commons.ts一样）

这是正常现象还是我在某个地方错过了配置/选项？

谢谢。

这是项目：https://github.com/Rouche/webpack-test 最初的项目还有很多选择，我试图将其最小化。

为方便起见：

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "Webpack Tests",
  "main": "webpack.config.js",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^8.6.5",
    "clean-webpack-plugin": "^0.1.19",
    "compression-webpack-plugin": "^1.1.12",
    "css-loader": "^1.0.1",
    "cssnano": "^4.1.9",
    "mini-css-extract-plugin": "^0.4.5",
    "moment": "^2.24.0",
    "node-sass": "^4.11.0",
    "postcss-loader": "^2.1.5",
    "sass-loader": "^7.1.0",
    "script-loader": "^0.7.2",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.5.0",
    "typescript": "^3.3.3",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14",
    "webpack-md5-hash": "0.0.6"
  },
  "scripts": {
    "prod": "webpack --env.cdn=http://localhost:8090/ --config webpack.config.js --mode production",
    "start": "webpack-dev-server --env.cdn=http://localhost:8090/ --env.WEBPACK_DEV_SERVER=true --mode development"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "author": "Jean-Francois Larouche",
  "license": ""
}

webpack.config.js

// webpack v4
const path = require('path');
const webpack = require('webpack'); //to access built-in plugins
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin")

const modeDev = 'development';

var configFn = (env, argv) => {


    const mode = argv ? argv.mode : modeDev;
    const development = mode ===  modeDev;

    console.log('Build mode: [' + mode + ']');

    var config = {
        mode: mode,
        devServer: {
            contentBase: [path.join(__dirname, 'resources'), path.join(__dirname, 'dist')],
            compress: false,
            port: 8090
        },
        devtool: development ? 'eval-source-map' : undefined,
        entry: {
            // To output only TypeScript as module see https://github.com/webpack/webpack/issues/4002
            lib: './src/scripts/lib.js',
            app: './src/scripts/app.js',
            typescript: './src/typescript/typescript.ts'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            publicPath: env.cdn,
            filename: '[name].js',
            chunkFilename: '[name]-[chunkhash].js',
            library: ["TypeScript", "[name]"],
            libraryTarget: "umd",
//            devtoolModuleFilenameTemplate: '../[resource-path]',
        },
        module: {
            rules: [
                {
                    test: [/\.exec\.js$/],
                    exclude: /node_modules/,
                    use: ['script-loader']
                },
                {
                    test: /\.(sc|c)ss$/,
                    exclude: /node_modules/,
                    use: [ // loader: 'style-loader', // Adds CSS to the DOM by injecting a <style> tag
                        {
                            loader: MiniCssExtractPlugin.loader // Extract css
                        },
                        {
                            loader: 'css-loader', // Convert CSS to CommonJS
                            options: {importLoaders: 2}
                        },
                        {
                            loader: 'postcss-loader' // see postcss.config.js
                        },
                        {
                            loader: 'sass-loader'  // Compile to sass
                        }]
                },
                {
                    test: /\.ts$/,
                    exclude: /node_modules/,
                    use: ['ts-loader']
                }]
        },
        resolve: {
            extensions: ['.js', '.json', '.ts']
        },
        externals: {
            moment: 'moment',
            jquery: 'jQuery',
            $: '$'
        },
        plugins: [
            new webpack.LoaderOptionsPlugin({
                //test: /postcss-loader$/, // only for this module
                options: {
                    mode: mode
                }
            }),
            new WebpackMd5Hash(),
            new MiniCssExtractPlugin({
                filename: '[name]-[chunkhash].css',
            })
        ]
    };

    if (!development) {
        config.plugins.push(
            new CompressionPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.css$|\.html$/,
                threshold: 100,
                minRatio: 0.9
            })
        );
    }
    // Ignore all locale files of moment.js
    config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));

    // Don't destroy dist folder with webpack-dev-server
    if (!env || !env.WEBPACK_DEV_SERVER) {
        config.plugins.unshift(new CleanWebpackPlugin('dist', {}));
    }

    console.log('Config: [' + JSON.stringify(config) + ']');

    return config;
};

module.exports = (env, argv) => {
    return configFn(env, argv);
};

Answer 1

好吧，我终于找到了缺失的小选择：

https://github.com/webpack-contrib/script-loader/issues/30

使用Ctrl+P的源文件名看起来像script:///C:/[full path to file].js