Webpack-dev-server无法生成源码映射。

Question

我使用 babel-loader，但是找不到如何为转译后的文件生成或查找源映射。我尝试了 eval-source-map、inline-source-map 和 source-map。

webpack.config.js

const BowerWebpackPlugin = require("bower-webpack-plugin");

module.exports = {
    entry: './src/script/index.jsx',
    output: {
        filename: 'bundle.js',
        sourceMapFilename: "bundle.js.map",
        publicPath: 'http://localhost:8090/assets'
    },
    debug: true,
    devtool: 'inline-source-map',
    module: {
        loaders: [
            {   
                test: /\.js[x]?$/, 
                loaders: ['react-hot', 'jsx', 'babel'],
                exclude: /node_modules/ 
              },
              {
                test: /\.scss$/,
                loaders: [ 'style', 'css?sourceMap', 'sass?sourceMap' ]
              },
              {
                test: /\.less$/,
                loaders: [ 'style', 'css?sourceMap', 'less?sourceMap' ]
              },
              {
                test: /\.css$/,
                loaders: [ 'style', 'css']
              },
              { test: /\.woff$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff" },
              { test: /\.woff2$/,   loader: "url-loader?limit=10000&mimetype=application/font-woff2" },
              { test: /\.(eot|ttf|svg|gif|png)$/,    loader: "file-loader" }
        ]
    },
    plugins: [
        new BowerWebpackPlugin()
    ],
    externals: {
        //don't bundle the 'react' npm package with our bundle.js
        //but get it from a global 'React' variable
        'react': 'React'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
}

package.json

    {
    "name": "Won",
    "version": "0.0.1",
    "description": "Internal evidence application",
    "main": "index.jsx",
    "scripts": {
        "start": "npm run serve | npm run dev",
        "serve": "./node_modules/.bin/http-server -p 8080",
        "dev": "webpack-dev-server -d --progress --colors --port 8090"
    },
    "author": "And",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^5.8.23",
        "babel-loader": "^5.3.2",
        "bootstrap": "^3.3.5",
        "bootstrap-select": "^1.7.3",
        "bootstrap-table": "^1.8.1",
        "bower-webpack-plugin": "^0.1.8",
        "colresizable": "^1.5.2",
        "css-loader": "^0.16.0",
        "events": "^1.0.2",
        "extract-text-webpack-plugin": "^0.8.2",
        "file-loader": "^0.8.4",
        "flux": "^2.1.1",
        "http-server": "^0.8.0",
        "jquery": "^2.1.4",
        "jquery-ui": "^1.10.5",
        "json-markup": "^0.1.6",
        "jsx-loader": "^0.13.2",
        "less": "^2.5.1",
        "less-loader": "^2.2.0",
        "lodash": "^3.10.1",
        "node-sass": "^3.2.0",
        "object-assign": "^4.0.1",
        "path": "^0.11.14",
        "react": "^0.13.3",
        "react-hot-loader": "^1.2.9",
        "sass-loader": "^2.0.1",
        "style-loader": "^0.12.3",
        "svg-sprite-loader": "0.0.2",
        "url-loader": "^0.5.6",
        "webpack": "^1.12.0",
        "webpack-dev-server": "^1.10.1"
    }
}

编辑：//

毕竟这个webpack.config.js和这个package.json对我有用。

编辑2：//

现在我使用这个webpack配置

- Matt

---

请注意，如果您正在使用Babel，则可以跳过jsx-loader。因此，只需使用['hot-loader', 'babel']即可。Babel默认支持JSX。 - Juho Vepsäläinen

有进展吗？我也遇到了同样的问题。谢谢。 - Pathsofdesign

@Pathsofdesign 对我来说现在可以工作了，但我不知道我改了什么。如果你想的话，我可以把我的webpack.config和package.json发送给你。 - Matt

@Matt 我肯定会点赞一个包含你更新后的webpack.config和package.json的答案。 :-) - Gabriel Kunkel

@GabrielKunkel，请查看我的编辑后的问题。这里有我的webpack.config和package.json，它们对我很有效。 - Matt

哦，抱歉。谢谢。傻瓜。 :-) - Gabriel Kunkel

Answer 1

使用webpack-dev-server -d

• -d是--debug --devtool source-map --output-pathinfo的简写。

• output-pathinfo会向生成的bundle中添加注释，解释哪些模块/文件在哪些位置被包含。因此，在生成的代码中，注释会添加到这行代码：require(/* ./test */23)中，它说明23指向test模块。当你查看Webpack生成的代码时，这对于理解代码非常有帮助，但在调试器中逐步执行代码时没有太多用处。我从相关文档的这一部分获得了这个例子。

• 这一切都是因为webpack-dev-server接受与webpack相同的标志。

• 请参阅文档中的此部分了解详细信息。

提示和注意事项

• --content-base - 默认情况下，开发服务器将提供在运行命令的目录中的文件。如果您的构建文件位于build/中，则需要指定--content-base build/，以便开发服务器提供build目录中的文件。
• --inline - 每当您保存带有某些更改的文件时自动重新加载！

- Titus

---

"output-pathinfo" 实际上是做什么用的？ - angry kiwi

@angrykiwi 更新了我的答案，谢谢！顺便说一句，你的名字很棒 ;) - Titus

Answer 2

使用 webpack -d

d标志代表开发快捷方式，它可以启用所有开发者工具，如源代码映射。

- Matias Faure

---

Webpack 为 scss 文件生成源映射，但不为 jsx 文件生成。请查看我的编辑过的帖子，我附上了我的 package.json。 - Matt

@CpILL 它对我有用，我运行了 node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build。 - ryeguy

@ryeguy on webpack 2? - CpILL

@CpILL 不，我正在运行webpack 1.13.3和webpack-dev-server 1.16.2。 - ryeguy

Answer 3

将{devtool:"source-map"}添加到您的webpack.config.js中。

更多信息请参见此处。

- 柴必青

---

谢谢提供的链接，我发现在我的webpack配置中是cheap-module-eval-source-map，但它没有起作用。我尝试了这个链接中的其他选项，现在使用eval-source-map非常好用。 - Lukas Liesis

我在使用 cheap-module-eval-source-map 时也遇到了问题。其他类型对我来说都很好用。 - ptim

Answer 4

请在你的webpack.config.js文件中添加以下内容：

devtool: "#inline-source-map",

你可以从webpack网站上找到关于它的清晰信息 https://webpack.github.io/docs/configuration.html 此外，请查看来自webpack网站的源映射部分的截图。

- Kostya Harutyunyan

Answer 5

我所做的只是改变了：

// package.json
{
    ...
    **from** "dev:serve": "webpack-dev-server",
    **to** "dev:serve": "webpack-dev-server -d",
    ...
}

相当于：$ webpack-dev-server -d

现在我可以在 Chrome 中使用 Ctrl + p 并查看我的 ES6 语法以设置断点。

信息

$ webpack-dev-server --version
webpack-dev-server 2.9.7
webpack 3.10.0

- Cody