Question

TL; DR devtool: 'source-map'生成一个.map文件，并在生成的文件中添加sourceMappingURL注释，但Chrome或IE11都没有选择它。

我正在尝试对Webpack的React项目实施一些非常基本的源映射，以期找到IE11中错误的根源。由于该项目很简单，所以我只使用了devtool: 'source-map'，据我所知，它应该是开箱即用的。

正在生成.map文件，并且也生成了sourceMappingURL注释，但是Chrome (MacOS)或IE11 (Win81)似乎都没有。在Chrome中打开本地文件和使用live-server服务项目时，都是这种情况。

我无法撼动自己缺少明显的东西的感觉...

Webpack配置

'use strict';

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

const config = {

  mode: process.env.NODE_ENV=='production' ? 'production' : 'development',

  entry: {
    application: ['@babel/polyfill/noConflict', './src/index.jsx']
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },

  resolve: {
    extensions: ['.js', '.jsx', '.css', '.scss'],
    modules: ['node_modules', 'src']
  },

  devtool: 'source-map',

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.s(a|c)ss$/,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(svg|png|je?pg|gif|eot|woff2?|ttf)$/i,
        exclude: /node_modules/,
        use: 'file-loader'
      },
      {
        test: /\.ya?ml$/,
        exclude: /node_modules/,
        use: 'raw-loader'
      }
    ]
  }

};

module.exports = config;

Webpack源映射正在发出但未加载

0 个答案: