Source-Maps无法使用react-hot-loader

时间:2017-07-12 10:26:31

标签: reactjs webpack react-hot-loader

我在反应应用中使用react-hot-loader。我正在使用devtool: 'source-maps',但源映射似乎不起作用。我能够在chrome的dev-tools中查看原始源代码,但是当我收到错误时,我只看到以下内容:

Screenshot showing backtrace

我也尝试了devtool的几乎所有其他设置,但我总是得到这种行为。我该怎么做才能让源图正常工作?

这是我的webpack.config.js

'use strict';

const webpack = require('webpack');
const path = require('path');

const cssModulesLoader =
  'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]__[hash:base64:5]';

const cssLoaders = [
  // loaders for loading external css
  {
    test: /\.s[ac]ss$/,
    include: path.resolve(__dirname, 'node_modules'),
    exclude: path.resolve(__dirname, 'ui'),
    loaders: ['style-loader', 'css-loader', 'sass-loader']
  },
  {
    test: /\.css$/,
    include: path.resolve(__dirname, 'node_modules'),
    exclude: path.resolve(__dirname, 'ui'),
    loaders: ['style-loader', 'css-loader']
  },

  // loaders for custom css
  {
    test: /\.css$/,
    exclude: path.resolve(__dirname, 'node_modules'),
    loaders: ['style-loader', cssModulesLoader]
  },
  {
    test: /\.s[ac]ss$/,
    exclude: [
      path.resolve(__dirname, 'node_modules'),
      path.resolve(__dirname, 'ui/src/global.scss')
    ],
    loaders: ['style-loader', cssModulesLoader, 'sass-loader']
  },
  {
    test: /global\.scss$/,
    include: path.resolve(__dirname, 'ui/src/global.scss'),
    loaders: ['style-loader', 'css-loader', 'sass-loader']
  }
];

module.exports = {
  devtool: 'source-maps',
  entry: {
    app: ['babel-polyfill', 'react-hot-loader/patch', './ui/src/index']
  },
  output: {
    path: path.resolve(__dirname, './ui/assets'),
    filename: 'bundle.js',
    publicPath: 'assets/'
  },
  module: {
    rules: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader' },
      { test: /\.json/, loader: 'json-loader' },
      ...cssLoaders,
      {
        test: /\.(ttf|eot|woff|svg)/,
        include: [path.resolve(__dirname, 'node_modules')],
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ],
  devServer: {
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:48763/',
        secure: false
      },
      '/wsapi': {
        target: 'ws://localhost:48763',
        ws: true
      }
    }
  }
};

0 个答案:

没有答案