Как генерировать исходные карты при использовании babel и webpack?


328

Я новичок в 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()
  ]

};

Я действительно новичок в вебпаке, и смотрю, хотя документы действительно не помогли, так как я не уверен, к чему относится эта проблема.


К вашему сведению, я не добавляю отладку для версии 2, я получилThe 'debug' property was removed in webpack 2.
shareef

Ответы:


435

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

devtool: 'source-map'

devtool: 'source-map'- SourceMap испускается.


12
denugСвойство было удалено в WebPack 2.
jnns

@jnns Что заменило это?
Брэд

6
Я могу подтвердить (webpack 3.5): devtoolдостаточно. Не нужно никаких отладочных значений.
Фрэнк

Просто хочу добавить, что если вы используете React, вы должны найти конкретный конфиг для него (create-реагировать-приложение).
рассвет

Куда он на самом деле выводит файл?
Разработчик из Мельбурна

107

Может быть, кто-то еще имеет эту проблему в какой-то момент. Если вы используете UglifyJsPluginin, webpack 2вам нужно явно указать sourceMapфлаг. Например:

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

9
Я должен был также включить, devtool: 'source-map'чтобы это работало
Вик

1
Я должен был включить это в опции загрузчика css и sass.
d_rail

33

Минимальная конфигурация webpack для 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$

15

При оптимизации для разработки dev + , вы можете попробовать что-то вроде этого в вашей конфигурации:

{
  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


2
недавний, довольно точный список производительности build + rebuild можно
Фрэнк

Где / как устанавливается devпеременная?
Крис

в типичных случаях вы можете увидеть .envопределенные файлы или мутации в process.env. это только пример, но это может выглядеть так:const dev = process.env.development === true
lfender6445

6

На 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,5 с ... время перестроения inline-source-map составляет ~ 7 с


3

Даже с той же проблемой, с которой я столкнулся, в браузере показывался скомпилированный код. Я сделал ниже изменения в конфигурационном файле 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' }
]

6
debugСвойство было удалено в WebPack 2.
jnns

+1. Добавление includeопции это то, что исправило ее для меня. В webpack 2 это выглядит так:rules: [{loader: 'babel-loader', include: [path.resolve(__dirname, "src")]
Мэтт Браун
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.