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

Question

Tôi mới sử dụng webpack, và tôi cần một bàn tay trong việc thiết lập để tạo ra các sourcemaps. Tôi đang chạy webpack serve từ dòng lệnh, biên dịch thành công. Nhưng tôi thực sự cần sourcemaps. Đây là số webpack.config.js của tôi.

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 với webpack và tìm kiếm các tài liệu chưa thực sự hữu ích vì tôi không chắc vấn đề này cụ thể là gì.

Answer 1

Để sử dụng bản đồ nguồn, bạn nên thay đổi devtool tù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 là phát ra.

Answer 2

tối thiểu cấu hình webpack 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$ 

Answer 3

Nếu tối ưu hóa cho dev + sản ​​xuất, 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', 
} 

From the docs:

• devtool: "eval-rẻ-mô-đun-source-đồ" cung cấp SourceMaps rằng chỉ có bản đồ dòng (không ánh xạ cột) và là nhanh hơn nhiều
• devtool: "nguồn bản đồ" không thể lưu trữ SourceMaps cho mô-đun và cần phải tạo lại SourceMap hoàn chỉnh cho đoạn. Đó là thứ để sản xuất.

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

Answer 4

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

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

và trong bộ tải Tôi giữ babel-loader như 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' } 
] 

Answer 5

Có lẽ ai đó có vấn đề này tại một thời điểm. Nếu bạn sử dụng UglifyJsPlugin trong webpack 2, bạn cần chỉ định rõ ràng cờ sourceMap.Ví dụ:

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

Answer 6

Bạn có thể thử Dawn, nó đơn giản

https://github.com/alibaba/dawn

dụ:

Install

npm i dawn -g 

Thêm một tập tin .dawn.yml để dự án của bạn

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

Thực hiện lệnh sau

dn build 

Bạn có thể hoàn thành việc xây dựng

Answer 7

On 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ữ lại số dòng. Xem ghi chú bên dưới chỉ: lại dòng.

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

tùy chọn dev devtool tốt nhất

       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 

dòng chỉ

Nguồn Maps được đơn giản hóa đến một ánh xạ duy nhất cho mỗi dòng. Điều này thường có nghĩa là một ánh xạ đơn 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 cản bạn gỡ lỗi thực hiện trên cấp độ tuyên bố và từ các thiết lập điểm ngắt trên các cột của một dòng. Kết hợp với việc giảm thiểu không thể thực hiện được vì các bộ giảm thiểu thường chỉ phát ra một dòng.

XÉT LẠI

NÀY Trên một dự án lớn tôi thấy ... eval-source-bản đồ xây dựng lại thời gian là ~ 3.5s ... inline-nguồn-bản đồ xây dựng lại thời gian là ~ 7s