Загрузчик скриптов Webpack не может отладить исходный код в Chrome - PullRequest
Новая
       52

Загрузчик скриптов Webpack не может отладить исходный код в Chrome

0 голосов
/ 13 февраля 2019

Как и многим людям, мне нужно иметь дело с унаследованным кодом, а не строить с помощью веб-пакета.Что-то странное.

Я использую скрипт-загрузчик для устаревшего кода.(* .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);
};

1 Ответ

0 голосов
/ 13 февраля 2019

Ну, наконец-то я нашел маленький пропущенный параметр:

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

Использование Ctrl+P имя исходного файла выглядит как script:///C:/[full path to file].js

...