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

Question

我是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的新手,看起来虽然文档并没有真正起作用,因为我不确定这个问题的具体内容.

Answer 1

为了使用源地图,你应该改变devtool选项值从true该值中可用this list,例如source-map

devtool: 'source-map'

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

Answer 2

也许其他人一直有这个问题.如果使用UglifyJsPluginin webpack 2,则需要明确指定sourceMap标志.例如:

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

Answer 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$

Answer 4

如果优化dev + production,你可以在你的配置中尝试这样的东西:

{
  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

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 ...内联源映射重建时间为~7s