当使用babel和webpack时，我该如何生成sourcemaps？

Question

我希望设置配置以生成源映射。 我正在从命令行运行webpack serve，它已经成功编译。 但我确实需要源映射。 这是我的webpack.config.js。

var webpack = require('webpack');

module.exports = {

  output: {
    filename: 'main.js',
    publicPath: '/assets/'
  },

  cache: true,
  debug: true,
  devtool: true,
  entry: [
      'webpack/hot/only-dev-server',
      './src/components/main.js'
  ],

  stats: {
    colors: true,
    reasons: true
  },

  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'styles': __dirname + '/src/styles',
      'mixins': __dirname + '/src/mixins',
      'components': __dirname + '/src/components/',
      'stores': __dirname + '/src/stores/',
      'actions': __dirname + '/src/actions/'
    }
  },
  module: {
    preLoaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'jsxhint'
    }],
    loaders: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'react-hot!babel-loader'
    }, {
      test: /\.sass/,
      loader: 'style-loader!css-loader!sass-loader?outputStyle=expanded&indentedSyntax'
    }, {
      test: /\.scss/,
      loader: 'style-loader!css!sass'
    }, {
      test: /\.(png|jpg|woff|woff2)$/,
      loader: 'url-loader?limit=8192'
    }]
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]
};

阅读文档并没有帮助，因为我不确定这个问题具体是什么。

- user916367

---

请注意，不要为版本2添加调试功能，因为我收到了“在webpack 2中已删除'debug'属性”的消息。 - shareef

相关帖子 - 使用eval和eval-source-map有什么区别？ - RBT

这里使用的是Babel吗？这不应该只是关于"webpack"的问题吗？ - undefined

Answer 1

为了使用源代码映射(Source Map)，您需要将devtool选项的值从true更改为此列表中可用的值，例如source-map。

devtool: 'source-map'

devtool: 'source-map' - 会生成一个 SourceMap。

- Oleksandr T.

---

我可以确认（webpack 3.5）：devtool就足够了，不需要任何debug值。 - Frank N

只是想补充一下，如果你正在使用React，你应该找到它的特定配置（create-react-app）。 - dawn

它实际上将文件输出到哪里？ - Christian Findlay

通常，源映射文件被命名为 *.map，因此如果您的文件是 main.js，则源映射文件名应该是 main.js.map。然而，在使用 webpack-dev-server 进行开发时，不会在文件系统上创建任何源映射文件，相反，它会通过热模块重载技术在内存中神奇地创建并发送到浏览器。希望这可以帮到你。 :-) - PatS

Answer 2

或许有人曾经遇到过这个问题。如果你在webpack 2中使用UglifyJsPlugin，那么你需要明确指定sourceMap标志。例如：

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

- Alex Moldovan

---

为使其正常工作，我还需要包括 devtool: 'source-map'。 - Vic

我必须在 CSS 和 Sass 加载器选项中包含这个。 - d_rail

还解决了Webpack 5的问题，整整花了一天时间进行故障排除 - https://www.npmjs.com/package/uglifyjs-webpack-plugin#sourcemap - user1063287

Answer 3

使用sourcemaps的jsx的最小webpack配置：

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

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

运行它：

Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

- jhegedus

Answer 4

如果要针对开发和生产环境进行优化，您可以在配置文件中尝试像这样的内容：

const dev = process.env.NODE_ENV !== 'production'

// in webpack.shared.config

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', 
}

官方文档中提到：

• devtool: "eval-cheap-module-source-map" 可以提供仅映射行号（没有列映射）且速度更快的 SourceMaps。
• devtool: "source-map" 无法为模块缓存 SourceMaps，需要重新生成整个 SourceMap。这适用于生产环境。

另一种选项是在生产环境中返回 false，并假设你不需要 Sourcemaps 来进行生产构建。

我正在使用 webpack 2.1.0-beta.19 版本。

- lfender6445

---

最近，建立和重新构建性能方面的相当精确的列表在官方文档中。 - Frank N

dev 变量在哪里 / 如何设置？ - Chris

在典型情况下，您可能会看到定义了 .env 文件或对 process.env 进行更改。这只是一个例子，但它可能看起来像这样：const dev = process.env.development === true。 - lfender6445

Answer 5

在 Webpack 2 中，我尝试了全部的12个devtool选项。以下选项会在控制台中链接到原文件并保留行号。参见下面关于仅限行的注释。

https://webpack.js.org/configuration/devtool

devtool最佳开发选项

                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

只有行

源代码映射被简化为每行只有一个映射。 通常这意味着每个语句只有一个映射(假设您的作者是这样的)。 这会防止您在语句级别调试执行并在一行的列上设置断点。 与最小化组合不可能，因为最小化程序通常只发出一行。

重新审视这个问题

在一个大型项目中，我发现... eval-source-map 重建时间为 ~3.5s ... inline-source-map 重建时间为 ~7s

- danday74

Answer 6

我曾经遇到过同样的问题，在浏览器中显示的是编译代码。我在webpack配置文件中进行了以下更改，现在它可以正常工作了。

 devtool: '#inline-source-map',
 debug: true,

在加载器中，我将babel-loader设置为首选项。

loaders: [
  {
    loader: "babel-loader",
    include: [path.resolve(__dirname, "src")]
  },
  { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'ng-annotate!babel' },
  { test: /\.html$/, loader: 'raw' },
  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    loaders: [
      'file?hash=sha512&digest=hex&name=[hash].[ext]',
      'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
    ]
  },
  {test: /\.less$/, loader: "style!css!less"},
  { test: /\.styl$/, loader: 'style!css!stylus' },
  { test: /\.css$/, loader: 'style!css' }
]

- Dijo

---

在Webpack 2中，debug属性已被移除。 - jnns

+1. 添加 include 选项是解决我的问题。在 webpack 2 中，它看起来像这样：rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")] - Matt Browne