Any way to NOT pack with Webpack/React?

Question

I want to be able to debug JS, tweak CSS, etc. I thought 'development mode' would keep my sources separate. But webpack packs everything.

How do I configure it to NOT pack?

My 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'
        })
    ]
};

And my npm run dev script:

"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

try this:

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

but i recommend splitting webpack config file to separate files (webpack.dev.js and webpack.prod.js) because this node commends will grow over time as your needs will grow and will be hard to maintain

Answer 2

I thought 'development mode' would keep my sources separate

No, it just does not minify the generated code. Webpack has to bundle the code into one file, as import / export is not yet really supported (and if the support gets added, you have to manually add all files to your HTML, and they would be loaded file by file . In other words: You need Webpack).

If you however generate sourcemaps, the browsers debugger is able to show you the code how it was before transpilation. If for example an error occurs in the bundled file, it can map the position were it occured to the line in the original files.