使用babel和webpack时如何生成源地图？

我是webpack的新手，我需要进行设置以生成Sourcemap。我正在从命令行运行webpack serve，该命令已成功编译。但是我真的需要sourcemaps。这是我的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的新手，虽然我不确定文档是什么问题，但是文档并没有真正的帮助特定于。

仅供参考，我没有为版本2添加调试，我在Webpack 2中删除了'debug'属性。

相关文章-使用eval和eval-source-map有什么区别？

#1 楼

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

devtool: 'source-map'

devtool：'source-map' -发出SourceMap。

在Webpack 2中已删除denug属性。

– jnns
17年2月6日在19:24

@jnns用什么取代了它？

–布拉德
17年5月12日在4:53

我可以确认（webpack 3.5）：devtool就足够了。不需要任何调试值。

–弗兰克·诺克（Frank Nocke）
17年9月19日在14:16

只是想补充一点，如果您使用的是React，则应该为其找到特定的配置（create-react-app）。

–黎明
19年11月7日在22:56

@MelbourneDeveloper，通常，该文件名为* .map，因此，如果您的文件是main.js，则源映射称为main.js.map。但是，在使用webpack-dev-server进行开发的过程中，没有在文件系统上创建任何源映射文件，而是在内存中神奇地创建了该源映射文件，并使用热模块重载技术将其发送到浏览器。希望对您有所帮助。 :-)

– Pats
20-3-11在23:20

#2 楼

也许其他人在某一时刻有这个问题。如果在UglifyJsPlugin中使用webpack 2，则需要显式指定sourceMap标志。例如：

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

我还必须包括devtool：“ source-map”才能正常工作

–维克
17年6月14日在17:25

我必须将此包含在css和sass加载程序选项中。

– d_rail
17年8月3日在18:05

#3 楼

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

#4 楼

如果要针对开发+生产进行优化，则可以在配置中尝试以下操作：

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”无法为模块缓存SourceMaps，而需要为块重新生成完整的SourceMap。这是用于生产的东西。

我正在使用webpack 2.1.0-beta.19

官方文档中提供了有关构建和重建性能的最新，相当精确的清单

–弗兰克·诺克（Frank Nocke）
17年9月19日在14:18

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

–克里斯
20年6月9日在21:08

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

–lfender6445
20 Jun 10'21:26

#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 ...内联-source-map的重建时间约为7s

#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' }
]

调试属性已在webpack 2中删除。

– jnns
17年2月6日在19:23

+1。添加include选项对我来说是固定的。在webpack 2中，它看起来像这样：规则：[{loader：'babel-loader'，包括：[path.resolve（__ dirname，“ src”）]

–马特·布朗（Matt Browne）
17年5月9日在18:55

编程黑洞网