Webpack-dev-server 不生成源映射

Posted

技术标签:

【中文标题】Webpack-dev-server 不生成源映射【英文标题】:Webpack-dev-server doesn't generate source maps 【发布时间】:2015-11-24 15:29:00 【问题描述】:

我使用babel-loader,但不知道如何生成或在哪里找到转译文件的源映射。我试过eval-source-mapinline-source-mapsource-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 对我有用。

edit2://

现在我用this webpack config

【问题讨论】:

请注意,如果您使用的是 Babel,则跳过 jsx-loader。所以只需['hot-loader', 'babel'] 就足够了。 Babel 默认支持 JSX。 这方面有什么进展吗?我遇到了同样的问题。谢谢。 @Pathsofdesign 对我来说现在可以工作,但我不知道我改变了什么。如果你愿意,我可以把我的 webpack.config 和 package.json 发给你。 @Matt 我当然会赞成一个包含您更新的 webpack.config 和 package.json 的答案。 :-) @GabrielKunkel 请查看我编辑的问题。有我的 webpack.config 和 package.json 对我有用 【参考方案1】:

使用webpack-dev-server -d

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

output-pathinfo 将 cmets 添加到生成的包中,解释哪些模块/文件包含在哪些位置。所以在生成的代码中,注释被添加到这行代码中:require(/* ./test */23) 表示23 指向test 模块。当您查看 Webpack 生成的代码时,这非常有用,而在单步调试器中则没有太大帮助。我得到了这个例子from this relevant bit of documentation。

这一切都有效,因为webpack-dev-server 接受与webpack 相同的所有标志。

See this section in the docs 了解详情。

提示和注意事项

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

【讨论】:

output-pathinfo 的实际作用是什么? @angrykiwi 更新了我的答案,谢谢!另外,顺便说一句,好名字;)【参考方案2】:

使用webpack -d

d 标志代表开发快捷方式,它启用您的所有开发人员工具,例如源映射。

【讨论】:

Webpack 为 scss 文件生成源映射,但不为 jsx 文件生成源映射。请看我编辑的帖子,我附上了我的 package.json @CpILL 它对我有用,我跑了node_modules/.bin/webpack-dev-server -d --port 10141 --content-base build @ryeguy 在 webpack 2 上? @CpILL 不,我正在运行 webpack 1.13.3 和 webpack-dev-server 1.16.2【参考方案3】:

devtool:"source-map" 添加到您的webpack.config.js

查看更多here

【讨论】:

感谢您的链接,我发现在我的 webpack 配置中它是 cheap-module-eval-source-map,但它不起作用,我尝试了此链接中的其他几个选项,现在与 eval-source-map 一起使用效果很好 我也遇到了cheap-module-eval-source-map 的问题。其他类型对我来说很好。【参考方案4】:

请在 webpack.config.js 文件中添加以下内容`

devtool: "#inline-source-map",

你可以在webpack的网站上找到明确的信息`https://webpack.github.io/docs/configuration.html

另外,请从 webpack 站点找到 sourcemap 部分的附加屏幕截图。

【讨论】:

【参考方案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

【讨论】:

以上是关于Webpack-dev-server 不生成源映射的主要内容,如果未能解决你的问题,请参考以下文章

Firefox 开发者工具不适用于 Webpack CSS 源映射

源地图不适用于 Webpack

Chrome 不读取由 elixir browserify 生成的源映射

webpack 4 sass-loader 不生成 scss 源映射

使用 gulp 生成源映射

在 Angular 中使用源映射生成生产版本 - CLI