Javascript 使用 babel 和 webpack 时如何生成 sourcemap？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30870830/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I generate sourcemaps when using babel and webpack?
提问by Rollo
I'm new to webpack, and I need a hand in setting up to generate sourcemaps. I'm running webpack servefrom the command line, which compiles successfully. But I really need sourcemaps. This is my webpack.config.js.
我是 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()
]
};
I'm really new to webpack, and looking though the docs hasn't really helped as I'm not sure what this problem is specific to.
我对 webpack 真的很陌生，虽然文档并没有真正帮助我，因为我不确定这个问题具体是什么。
回答by Alexander T.
In order to use source map, you should change devtooloption valuefrom trueto the valuewhich available in this list, for instance source-map
为了使用源映射，您应该将devtool选项值从更改true为中可用的值this list，例如source-map
devtool: 'source-map'
devtool:'source-map'- A SourceMap is emitted.
devtool:'source-map'- 发出一个 SourceMap。
回答by Alex Moldovan
Maybe someone else has this problem at one point. If you use the UglifyJsPluginin webpack 2you need to explicitly specify the sourceMapflag. For example:
也许其他人曾经有过这个问题。如果使用UglifyJsPluginin webpack 2，则需要明确指定sourceMap标志。例如：
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
回答by jhegedus
Minimal webpack config for jsx with sourcemaps:
带有源映射的 jsx 的最小 webpack 配置：
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']
}
}
]
? },
};
Running it:
运行它：
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$
回答by lfender6445
If optimizing for dev + production, you could try something like this in your config:
如果针对 dev + production 进行优化，你可以在你的配置中尝试这样的事情：
{
devtool: dev ? 'eval-cheap-module-source-map' : 'source-map',
}
- devtool: "eval-cheap-module-source-map"offers SourceMaps that only maps lines (no column mappings) and are much faster
- devtool: "source-map"cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. It's something for production.
- devtool: "eval-cheap-module-source-map"提供只映射行（无列映射）并且速度更快的 SourceMaps
- devtool: "source-map"无法缓存模块的 SourceMap，需要为块重新生成完整的 SourceMap。这是生产的东西。
I am using webpack 2.1.0-beta.19
我正在使用 webpack 2.1.0-beta.19
回答by danday74
On Webpack 2 I tried all 12 devtool options. The following options link to the original file in the console and preserve line numbers. See the note below re: lines only.
在 Webpack 2 上，我尝试了所有 12 个 devtool 选项。以下选项链接到控制台中的原始文件并保留行号。请参阅下面的注释：仅限行。
https://webpack.js.org/configuration/devtool
https://webpack.js.org/configuration/devtool
devtool best dev options
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
lines only
仅行
Source Maps are simplified to a single mapping per line. This usually means a single mapping per statement (assuming you author is this way). This prevents you from debugging execution on statement level and from settings breakpoints on columns of a line. Combining with minimizing is not possible as minimizers usually only emit a single line.
Source Maps 被简化为每行一个映射。这通常意味着每个语句有一个映射（假设您的作者是这种方式）。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出一条线。
REVISITING THIS
重温这个
On a large project I find ... eval-source-map rebuild time is ~3.5s ... inline-source-map rebuild time is ~7s
在一个大型项目中，我发现... eval-source-map 重建时间是 ~3.5s ... inline-source-map 重建时间是 ~7s
回答by Dijo
Even same issue I faced, in browser it was showing compiled code. I have made below changes in webpack config file and it is working fine now.
即使我遇到了同样的问题，在浏览器中它也显示了编译后的代码。我在 webpack 配置文件中进行了以下更改，现在工作正常。
devtool: '#inline-source-map',
debug: true,
and in loaders I kept babel-loader as first option
在装载机中，我将 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' }
]
