使用 babel 和 webpack 时如何生成 sourcemap？

IT技术 javascript webpack build-process babeljs source-maps
2021-01-20 05:10:36

我是 webpack 的新手，我需要帮助设置生成源映射。我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()
  ]

};

我对 webpack 真的很陌生，虽然文档并没有真正帮助我，因为我不确定这个问题具体是什么。

6个回答

为了使用源映射，您应该将devtool选项值从更改true为中可用的值this list，例如source-map

devtool: 'source-map'

devtool: 'source-map'- 发出一个 SourceMap。

只想补充一点，如果您使用 React，您应该找到它的特定配置 (create-react-app)。
2021-03-14 05:10:36
我可以确认（webpack 3.5）：devtool就足够了。不需要任何调试值。
2021-03-20 05:10:36
该denug属性已在 webpack 2 中删除。
2021-03-25 05:10:36
@jnns 是什么取代了它？
2021-03-31 05:10:36
@MelbourneDeveloper，通常，该文件名为*.map，因此如果您的文件为main.js，则源映射名为main.js.map。然而，在使用 webpack-dev-server 进行开发时，并没有在文件系统上创建 sourcemap 文件，而是在内存中神奇地创建并使用 Hot Module 重载技术发送到浏览器。 我希望这有帮助。:-)
2021-04-06 05:10:36

也许其他人曾经有过这个问题。如果使用UglifyJsPluginin webpack 2，则需要明确指定sourceMap标志。例如：

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
我还必须包括devtool: 'source-map'它才能工作
2021-03-15 05:10:36
也解决了 webpack 5 中的问题，花了一整天的时间来解决这个问题 - npmjs.com/package/uglifyjs-webpack-plugin#sourcemap
2021-03-24 05:10:36
我必须将它包含在 css 和 sass 加载器选项中。
2021-04-04 05:10:36

带有源映射的 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$

如果针对 dev + production 进行优化，你可以在你的配置中尝试这样的事情：

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

// in config

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

从文档：

  • devtool：“eval-cheap-module-source-map”提供只映射行（无列映射）并且速度更快的 SourceMaps
  • devtool: "source-map"无法缓存module的 SourceMap，需要为块重新生成完整的 SourceMap。这是生产的东西。

我正在使用 webpack 2.1.0-beta.19

最近，非常精确的构建+重建性能列表在官方文档中
2021-03-22 05:10:36
在典型情况下，您可能会看到.env定义的文件或更改为process.env. 这只是一个示例，但它可能如下所示：const dev = process.env.development === true
2021-03-30 05:10:36
dev变量在哪里/如何设置？
2021-04-08 05:10:36

在 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

仅行

Source Maps 被简化为每行一个映射。这通常意味着每个语句有一个映射（假设您的作者是这种方式）。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出一条线。

重温这个

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

其它你可能感兴趣的问题
上一篇是否有一种机制可以在没有可变变量的情况下在 ES6（ECMAScript 6）中循环 x 次？ 下一篇使用制表符在 textarea 中缩进