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

Я новичок в webpack, и мне нужна помощь в настройке для создания sourcemaps. Я бегу 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, и глядя, хотя документы действительно не помогли, поскольку я не уверен, что эта проблема специфична.

841   7  

7 ответов:

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

devtool: 'source-map'

devtool:'source-map' - создается исходная карта.

336  
2018-01-19 18:14:22

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

new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
88  
2017-05-04 22:50:29

минимальная конфигурация 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$
27  
2016-11-15 11:27:02

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

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

документы:

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

Я использую webpack 2.1.0-beta.19

12  
2018-02-15 17:14:52

на Webpack 2 я попробовал все 12 вариантов devtool. Следующие параметры ссылаются на исходный файл в консоли и сохраняют номера строк. См. Примечание ниже re: только строки.

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

devtool лучшие варианты dev

                                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 составляет ~7s

4  
2018-01-30 14:26:01

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

вы можете попробовать рассвет, это проще

https://github.com/alibaba/dawn

пример:

установить

npm i dawn -g

добавить .dawn.yml файл для вашего проекта

build:
  - name: webpack
    output: ./dist
    entry: ./src/*.js
    template: ./assets/*.html
    sourceMap: true

выполните следующую команду

dn build

вы можете завершить сборку

-6  
2017-09-07 05:31:28

Comments

    Ничего не найдено.
Click here to cancel reply.