Як створити вихідні карти при використанні babel та 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()
  ]

};

Я дуже новачок у вебпаку, і шукаю, хоча документи не дуже допомогли, оскільки я не впевнений, у чому полягає ця проблема.

Для того , щоб карта джерела використання, ви повинні змінити devtoolпараметр значення від trueдо значення , яке є в this list, наприклад ,source-map

devtool: 'source-map'

devtool: 'source-map'- Виводиться SourceMap.

Можливо, у когось іншого є проблема в один момент. Якщо ви використовуєте UglifyJsPluginв, webpack 2вам потрібно чітко вказати sourceMapпрапор. Наприклад:

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

Мінімальний конфігурація веб-пакету для jsx з вихідними картами:

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$

Якщо оптимізувати для розробки + виробництво , ви можете спробувати щось подібне у своєму конфігурації:

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

З документів:

• devtool: "eval-cheap-module-source-map" пропонує SourceMaps, які відображають лише рядки (без відображення стовпців) та значно швидші
• devtool: "вихідна карта" не може кешувати SourceMaps для модулів і потрібно відновити повний SourceMap для фрагменту. Це щось для виробництва.

Я використовую webpack 2.1.0-beta.19

На 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 ...

Навіть той самий випуск, з яким я стикався, в браузері показував складений код. Нижче я внесла зміни в конфігураційний файл webpack, і він працює нормально.

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

і в навантажувачах я зберігав навантажувач як перший варіант

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