Làm cách nào để tạo sourcemaps khi sử dụng babel và webpack?

Tôi mới sử dụng webpack và tôi cần một tay trong việc thiết lập để tạo ra các tài liệu. Tôi đang chạy webpack servetừ dòng lệnh, nó biên dịch thành công. Nhưng tôi thực sự cần đồ chua. Đây là của tôi 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()
  ]

};

Tôi thực sự mới đối với webpack và tìm kiếm mặc dù các tài liệu không thực sự hữu ích vì tôi không chắc vấn đề này cụ thể là gì.

Để bản đồ nguồn sử dụng, bạn nên thay đổi devtooltùy chọn giá trị từ trueđến giá trị mà có sẵn trong this list, ví dụsource-map

devtool: 'source-map'

devtool: 'source-map'- Một SourceMap được phát ra.

Có thể một người khác có vấn đề này tại một thời điểm. Nếu bạn sử dụng UglifyJsPlugintrong webpack 2bạn cần xác định rõ ràng sourceMapcờ. Ví dụ:

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

Cấu hình webpack tối thiểu cho jsx với sourcemaps:

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

Chạy nó:

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$

Nếu tối ưu hóa cho sản xuất dev + , bạn có thể thử một cái gì đó như thế này trong cấu hình của bạn:

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

Từ các tài liệu:

• devtool: "eval-cheap-module-source-map" cung cấp SourceMaps chỉ ánh xạ các dòng (không có ánh xạ cột) và nhanh hơn nhiều
• devtool: "source-map" không thể lưu trữ SourceMaps cho các mô-đun và cần tạo lại SourceMap hoàn chỉnh cho đoạn dữ liệu. Đó là một cái gì đó cho sản xuất.

Tôi đang sử dụng webpack 2.1.0-beta.19

Trên Webpack 2 tôi đã thử tất cả 12 tùy chọn devtool. Các tùy chọn sau liên kết đến tệp gốc trong bảng điều khiển và giữ nguyên số dòng. Xem ghi chú bên dưới re: chỉ dòng.

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

tùy chọn dev tốt nhất 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

chỉ dòng

Bản đồ nguồn được đơn giản hóa thành một ánh xạ duy nhất trên mỗi dòng. Điều này thường có nghĩa là một ánh xạ duy nhất cho mỗi câu lệnh (giả sử bạn là tác giả theo cách này). Điều này ngăn bạn gỡ lỗi thực thi ở mức câu lệnh và từ các điểm dừng cài đặt trên các cột của một dòng. Kết hợp với giảm thiểu là không thể vì tối thiểu hóa thường chỉ phát ra một dòng duy nhất.

SỬA ĐỔI NÀY

Trong một dự án lớn, tôi thấy ... thời gian xây dựng lại bản đồ nguồn là ~ 3,5 giây ... thời gian xây dựng lại bản đồ nguồn-nguồn là ~ 7 giây

Ngay cả vấn đề tương tự tôi gặp phải, trong trình duyệt nó đang hiển thị mã được biên dịch. Tôi đã thực hiện các thay đổi bên dưới trong tệp cấu hình webpack và hiện tại nó đang hoạt động tốt.

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

và trong các trình tải, tôi giữ babel-loader là tùy chọn đầu tiên

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