浏览器调试器不适用于 Webpack 2 和 webpack-dev-server

Question

我花了几个小时来建立一个利用Webpack 2和Babel 6的新项目。

我遇到的问题是调试器(任何浏览器(无法正常工作。断点被简单地忽略。使用debugger;工作正常，但浏览器不会在该行中完全中断执行。

webpack.config.js:

const path = require("path");
module.exports = {
    entry: path.resolve(__dirname, "src", "index.js"),
    output: {
        filename: "app.js",
        path: path.resolve(__dirname, "dist")
    },
    module: {
        rules: [{
            test: /.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        }]
    },
    devServer: {
        contentBase: path.resolve(__dirname, "dist")
    }
};

.babel.rc:

{
  "presets": [
    "latest"
  ]
}

我正在用webpack-dev-server -d运行整个事情

Answer 1

devtool："source-map"，webpack config 中的选项应该可以解决你的问题。

entry: ['babel-polyfill', './src/index.jsx'],
output: {
    filename: 'js/bundle.[hash].js',
    path: path.resolve(__dirname, 'build'),
    publicPath: '/'
},
resolve: {
    extensions: ['.js', '.jsx'],
    alias: {
        config: path.join(__dirname, `config/${env}.configuration.js`)
    }
},
**devtool: "source-map",**
module: {
    rules: [
        {
            test: require.resolve('jquery'),
            use: [
                {
                    loader: 'expose-loader',
                    options: 'jQuery'
                }
            ]
        },