源地图无法与Webpack一起使用 [英] Source Maps not working with Webpack

问题描述

我对webpack还是很陌生，在配置它以生成必要的源映射时遇到了一些麻烦.在devtools中说

I'm pretty new to webpack and having some trouble configuring it to produce the necessary source maps. In the devtools it says

检测到源地图

Source Map detected

但显示捆绑商品，而不显示原始代码:

but it shows the bundle and not the original code:

这是我的webpack.config.js:

Here is my webpack.config.js:

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080/',
    'webpack/hot/dev-server',
    "./src/index.js"
  ],
  output: {
    filename: 'bundle.js',
    path: '/',
  },
  debug: true,
  devtool: 'source-map',
  resolve: {
    extensions: ['', '.jsx', '.scss', '.js', '.json']
  },
  module: {
    loaders: [
      {
        test: /(\.js|\.jsx)$/,
        exclude: /node_modules/,
        loaders: ['react-hot','babel']
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style", "css?sourceMap", "sass?sourceMap"]
      }
    ]
  },
  devServer: { hot: true },
  plugins: [ new webpack.HotModuleReplacementPlugin() ],
  inline: true,
  progress: true,
  colors: true
};

这是我的package.json:

And here is my package.json:

{
  "name": "react-template",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev:test": "./node_modules/.bin/webpack --config webpack.test.config.js",
    "test:bundle": "./node_modules/.bin/tape test/bundle.js",
    "dev:serve": "./node_modules/.bin/webpack-dev-server --config webpack.development.config.js"
  },
  "devDependencies": {
    "babel-loader": "^6.2.1",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "css-loader": "^0.23.1",
    "node-sass": "^3.8.0",
    "on-build-webpack": "^0.1.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.2.1",
    "style-loader": "^0.13.0",
    "tape": "^4.4.0",
    "webpack": "^1.12.12",
    "webpack-dev-server": "^1.14.1"
  }
}

我尝试了devtool选项的多种变体，并阅读了此 ，此和

I've tried multiple variations of the devtool option and read this, this and this but no luck.

任何帮助都会很棒！

推荐答案

在bundle.js中，您将看到原始的已编译Webpack软件包-这是正常现象.

In bundle.js you will see original transpiled webpack bundle - this is normal behaviour.

打开webpack://，您将看到您的项目文件.

Open webpack:// and you will see your project files.

这篇关于源地图无法与Webpack一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！