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

时间:2017-02-04 17:10:31

标签: debugging webpack webpack-dev-server webpack-2

我花了几个小时利用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

运行整个事情

1 个答案:

答案 0 :(得分:0)

devtool:" webpack配置中的source-map",选项可以解决您的问题。

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'
                }
            ]
        },