2016-06-20 24 views
17

我对webpack很陌生,在配置它以生成必要的源地图时遇到了一些麻烦。在devtools它说源地图不能与Webpack一起使用

来源MAP检测

但它显示的包,而不是原来的代码:

screen shot 2016-06-20 at 18 04 05

这里是我的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 
}; 

这里是我的包age.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选项的多种变化和读取thisthisthis但没有运气。

任何帮助将是伟大的!

+1

我不能让它甚至可以说源地图检测 – Henry

回答

14

bundle.js中,您将看到原始转发的webpack包 - 这是正常行为。

打开webpack://,你会看到你的项目文件。

enter image description here

+0

感谢一大堆! – Jbarget

+3

没错,但为什么Chrome会不断地纠缠你,发现一个源地图,如果它已经显示它? –

+0

目前Chrome浏览器存在问题,如果此答案无法解决问题,请在此处查看:https://github.com/webpack/webpack/issues/3165 – lanoxx

2

请加入您webpack.config.js文件中following`

devtool: “#直列源图”,

你可以找到明确的信息关于它来自webpack的网站`https://webpack.github.io/docs/configuration.html

另请参阅附件的源代码部分截图,从网页包装网站。

enter image description here

相关问题