webpack不生成源Map

ktca8awb 于 2023-06-30 发布在 Webpack

关注(0)|答案(5)|浏览(386)

webpack.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: './src/index.js',
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        hot: true,
        contentBase: path.join(__dirname, 'dist'),
    },
    devtool: "source-map"
}

package.json

"scripts": {
    "build": "webpack --progress --colors",
    "dev": "webpack-dev-server -d --watch --progress --colors"
  },

index.js

let h = "hello world"
console.log(h)

我运行了npm build和npm run dev，但似乎都没有生成源Map。我检查它们是否显示的方法是我是否可以在Chrome开发工具或Safari开发工具中看到原始源代码。
感谢您的任何帮助！

更新0

运行npm run build（npm build不做任何事情）确实生成了bundle.js.map，我可以在Google Chrome中成功地使用源Map（耶！）
运行npm run dev似乎编译得很好，并成功地为我的网页服务，但dist目录不包含bundle.js或bundle.js.map-但当我转到localhost:8080时，它仍然可以工作（没有源Map）。

webpack

来源：https://stackoverflow.com/questions/44637693/webpack-not-generating-source-maps

5条答案

按热度按时间

z2acfund1#

我最近在使用webpack 3.6.0时遇到了这个问题。即使我在webpack.config.js中有devtool: 'source-map'，也没有生成源Map文件。
在我的例子中，问题是我在命令行上将-d传递给webpack，这是所有这些的快捷方式（注意第二个选项及其参数）：

--debug --devtool cheap-module-eval-source-map --output-pathinfo

我现在传递的不是-d，而是--debug --output-pathinfo，源Map文件按预期生成。

赞(0）回复(0）举报 2023-06-30

vptzau2j2#

你能在你的dist文件夹中看到实际的.map文件吗？尝试将SourceMapDevToolPlugin添加到webpack.config.js文件中。

new webpack.SourceMapDevToolPlugin({
  filename: "[file].map"
}),

然后重新启动构建过程，并在dist文件夹中检查.map文件。

赞(0）回复(0）举报 2023-06-30

9w11ddsr3#

在webpack聊天中看到了您的问题。：）
将devtool更改为source-map，然后您将获得源Map。在Chrome中，你可以看到这样的原始源代码（在那里调试也可以）

编辑：同样在package.json的脚本中，你不需要引用node_modules文件夹。npm会自动出现在node_modules/.bin文件夹中。

赞(0）回复(0）举报 2023-06-30

c9qzyr3d4#

我无法生成源Map，因为我的输出.filename没有以“. js”结尾。
所以我需要使用'test'来设置SourceMapDevToolPlugin

new webpack.SourceMapDevToolPlugin({
      test: new RegExp('\.[js|css|mjs].*'),
    }),

赞(0）回复(0）举报 2023-06-30

qco9c6ql5#

我发现有两种方法：
1/在devtool路径中，使用“inline-source-map”代替“source-map”：

devtool:'inline-source-map',

2/如果你仍然想使用'source-map'，在插件路径中，你可以添加一个新的webpack。SourceMapDevToolPlugin：

plugins: [
...
new webpack.SourceMapDevToolPlugin({
  test: new RegExp('\.[js|css|mjs].*')
})

]

赞(0）回复(0）举报 2023-06-30

我来回答

webpack不生成源Map

5条答案

相关问题

热门标签

最新问答