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

Я новичок в 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 и смотрю, что документы не помогли, так как я не уверен, для чего эта проблема специфична.

Ответы

Ответ 1

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

devtool: 'source-map'

devtool: 'source-map' - Исправлена Исходная Карта.

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

{
  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

Ответ 5

Даже в той же проблеме, с которой я столкнулся, в браузере показывался скомпилированный код. Я сделал ниже изменения в файле конфигурации webpack, и теперь он работает нормально.

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

и в загрузчиках я сохранил загрузчик Babel в качестве первого варианта

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

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

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

devtool best dev options

                                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

только строки

Карты источников упрощаются до одного сопоставления на строку. Обычно это означает одно отображение для каждого оператора (при условии, что вы это автор). Это не позволяет вам отлаживать выполнение на уровне оператора и настройках точек останова на столбцах строки. Комбинация с минимизацией невозможна, поскольку минимизаторы обычно излучают только одну линию.

Ответ 7

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

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

Вы можете выполнить сборку