Любой способ НЕ упаковать с Webpack / React?

Question

Я хочу иметь возможность отлаживать JS, настраивать CSS и т. Д. Я думал, что «режим разработки» будет держать мои источники отдельно. Но веб-пакет упаковывает все.

Как мне настроить его, чтобы НЕ упаковывать?

Мой webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = {
    entry: ['babel-polyfill', './src/client/client.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        proxy: {
            '/api': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            favicon: './public/favicon.ico'
        })
    ]
};

И мой npm run dev скрипт:

"client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
"server": "nodemon src/server/server.js",
"dev": "concurrently \"npm run server\" \"npm run client\"",

Answer 1

Я думал, что "режим разработки" будет держать мои источники отдельно

Нет, это просто не минимизирует сгенерированный код. Webpack должен объединить код в один файл, так как import / export еще не поддерживается (и если поддержка будет добавлена, вам придется вручную добавить все файлы в ваш HTML, и они будут загружены файл за файлом . Другими словами: вам нужен Webpack).

Если вы, однако, генерируете исходные карты, отладчик браузеров может показать вам код, каким он был до переноса. Например, если в объединенном файле происходит ошибка, он может отобразить положение, в котором он находился, на линию в исходных файлах.

Answer 2

попробуйте это:

 "client": "webpack-dev-server --mode development --devtool 'eval-source-map' --hot",

но я рекомендую разбивать файл конфигурации webpack на отдельные файлы (webpack.dev.js и webpack.prod.js), потому что этот узел оценивается со временем, так как ваши потребности будут расти и его будет сложно поддерживать