clientConfiguration doesn't respect devtool sourcemap option

[Deleted user]

Hi there @halt-hammerzeit ,

Great work on the plugin!! I'm not quite sure if this is an issue but I am seeing that using the clientConfiguration function to create the client side build doesn't respect the devtool sourcemap option.

However, the server build using the serverConfiguration function does indeed create the sourcemap (not like I need this right now but just pointing it out).

Here's my current setup:

Base webpack config (both client and server builds extend from this);

var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require("extract-text-webpack-plugin");

var rootFolder = path.resolve(__dirname, '..');

var configuration = {
  devtool: 'source-map',

  context: rootFolder,

  entry: {
    main: './src/client/entry.js'
  },

  output: {
    path: path.resolve(rootFolder, 'build/assets'),

    publicPath: '/assets/',

    filename: '[name].[hash].js',

    chunkFilename: '[name].[hash].js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        loader: 'eslint-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.(scss)$/,
        use: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            'css-loader?localIdentName=[name]__[local]___[hash:base64:5]&sourceMap=true',
            'postcss-loader?sourceMap=inline',
            'sass-loader?outputStyle=expanded&sourceMap=true&sourceMapContents=true',
            'sass-resources-loader?resources='+rootFolder+'/src/client/assets/styles/_common.scss'
          ]
        })
      },
    {
      test: /\.(jpg|png)$/,
      use: [
        'url-loader?limit=10000'
      ]
    }]
  },

  plugins: [
    new ExtractTextPlugin({ filename: 'styles.css', allChunks: true })
  ]
};

module.exports = configuration;

Base webpack client configuration

import { clientConfiguration } from 'universal-webpack';

import settings from './universal-webpack-settings';
import configuration from './webpack.config';

export default clientConfiguration(configuration, settings);

Dev webpack client config

import webpack from 'webpack';
import cloneDeep from 'lodash.clonedeep';

import baseConfiguration from './webpack.config.client';
import appConfig from '../config';

const WEBPACK_DEV_SERVER_PORT = appConfig.devServerPort;

const configuration = cloneDeep(baseConfiguration);

configuration.plugins = configuration.plugins.concat(
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify('development')
    }
  }),

  new webpack.HotModuleReplacementPlugin(),

  new webpack.NamedModulesPlugin(),
);

configuration.entry.main = [
  `webpack-hot-middleware/client?path=http://localhost:${WEBPACK_DEV_SERVER_PORT}/__webpack_hmr`,
  configuration.entry.main
];

configuration.output.publicPath = `http://localhost:${WEBPACK_DEV_SERVER_PORT}${configuration.output.publicPath}`;

export default configuration;

Prod client config

import path from 'path';
import cloneDeep from 'lodash.clonedeep';

import webpack from 'webpack';
import baseConfiguration from './webpack.config.client';
import CleanPlugin from 'clean-webpack-plugin';

const configuration = cloneDeep(baseConfiguration);

configuration.plugins = configuration.plugins.concat(
  new CleanPlugin(
    [path.relative(configuration.context, configuration.output.path)],
    { root: configuration.context }
  ),

  new webpack.DefinePlugin({
    'process.env': {
      // Useful to reduce the size of client-side libraries, e.g. react
      NODE_ENV: JSON.stringify('production') // 'development' to see non-minified React errors
    }
  }),

  new webpack.LoaderOptionsPlugin({
    minimize: true,
    debug: false
  }),

  new webpack.optimize.UglifyJsPlugin({
    compress: {
      warnings: false
    }
  })
);

export default configuration;

Both the development and production client builds do not produce the sourcemap even though the base config has the devtool option set to source-map. I've tried setting it to multiple sourcemap options and none of them work.

Could you let me know if this is something you're seeing as well? Thanks so much!!!

[Nikolay]

The server side sets devtool to source-map by default
https://github.com/halt-hammerzeit/universal-webpack/blob/master/source/server%20configuration.js#L55

The client side doesn't seem to alter devtool in any way

So I don't see how this could be an issue with this library.
Unless you find a place in it where it removes/overrides the devtool parameter.