Babel ve webpack'i kullanırken kaynak haritalarını nasıl oluştururum?

Web paketinde yeniyim ve kaynak haritaları oluşturmak için bir ele ihtiyacım var. Ben webpack servebaşarıyla derleyen komut satırından çalışıyorum . Ama gerçekten kaynak haritalara ihtiyacım var. Bu benim 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()
  ]

};

Web paketinde gerçekten yeniyim ve bu sorunun ne olduğuna emin olmadığım için dokümanlar gerçekten yardımcı olmadı.

Kullanım kaynak haritası için, değiştirmek gerekir devtoolseçenek değerini elde trueetmek değerinin mevcut yılında this listörneğinsource-map

devtool: 'source-map'

devtool: 'source-map'- Bir SourceMap yayınlanır.

Belki bir noktada başka birinin bu problemi vardır. Eğer UglifyJsPluginin kullanırsanız webpack 2, sourceMapbayrağı açıkça belirtmeniz gerekir . Örneğin:

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

Sourcemaps ile jsx için minimum webpack yapılandırması:

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']
        }
      }
    ]
  },
};

Koşu:

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 + prodüksiyon için optimizasyon yapıyorsanız, yapılandırmanızda şöyle bir şey deneyebilirsiniz:

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

Dokümanlardan:

• devtool: "eval-cheap-module-source-map" yalnızca satırları eşleyen (sütun eşleşmesi olmayan) ve çok daha hızlı olan SourceMaps sunar
• devtool: "source-map" modüller için SourceMaps'i önbelleğe alamaz ve yığın için tam SourceMap'i yeniden oluşturmanız gerekir. Üretim için bir şey.

Webpack 2.1.0-beta.19 kullanıyorum

Webpack 2'de 12 devtool seçeneğini denedim. Aşağıdaki seçenekler konsoldaki orijinal dosyaya bağlanır ve satır numaralarını korur. Sadece aşağıdaki satırlara bakınız:

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

devtool en iyi dev seçenekleri

                                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

sadece çizgiler

Kaynak Haritalar, her satıra tek bir eşleme ile basitleştirilmiştir. Bu genellikle ifade başına tek bir eşleme anlamına gelir (yazarın bu şekilde olduğunu varsayarsak). Bu, deyim düzeyinde yürütmede hata ayıklamanızı ve bir satırın sütunlarındaki ayar kesme noktalarını engellemenizi önler. Küçültme ile birleştirmek mümkün değildir, çünkü küçültücüler genellikle yalnızca tek bir çizgi yayar.

BUNU İNCELEME

Büyük bir projede ... eval-kaynak-harita yeniden oluşturma süresi ~ 3.5s ... satır içi-kaynak-harita yeniden oluşturma süresi ~ 7s

Karşılaştığım aynı sorun olsa bile, tarayıcıda derlenmiş kod gösteriliyordu. Webpack yapılandırma dosyasında aşağıdaki değişiklikleri yaptım ve şimdi iyi çalışıyor.

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

ve yükleyicilerde ilk seçenek olarak babel yükleyiciyi tuttum

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