当使用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真的很陌生，虽然看了文档并没有真正帮助，因为我不确定这个问题是具体的。

244607 次浏览
小开
最佳答案

为了使用源映射，你应该将devtool选项价值从true更改为this list中可用的价值，例如source-map

devtool: 'source-map'

devtool: 'source-map' -发出一个SourceMap。

小开

最小化webpack配置的jsx与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']
}
}
]
  },
};

运行:

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$
小开

如果针对开发+生产进行优化，你可以在你的配置中尝试这样的东西:

const dev = process.env.NODE_ENV !== 'production'


// in webpack.shared.config


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

从文档中:

  • devtool: “eval-cheap-module-source-map"提供了只映射行(不映射列)的SourceMaps，而且速度更快
  • devtool: “source-map"不能为模块缓存SourceMap，需要为块重新生成完整的SourceMap。这是为了生产。

另一种选择是为生产版本返回false，并假设您不需要生产版本的源代码映射。

我使用webpack 2.1.0-beta.19

小开

甚至同样的问题，我面临，在浏览器中显示编译代码。我在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' }
]
小开

也许其他人在某个时候也有这个问题。如果在webpack 2中使用UglifyJsPlugin，则需要显式指定sourceMap标志。例如:

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

在Webpack 2上，我尝试了所有12个devtool选项。以下选项链接到控制台中原始文件并保留行号。请参阅下面的说明:仅限行。

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

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

行只

源映射被简化为每行一个映射。 这通常意味着每个语句都有一个映射(假设您是这样编写的)。 这将阻止您在语句级别上调试执行，以及在一行的列上设置断点。 与最小化相结合是不可能的，因为最小化通常只发出单行

回顾这

在一个大型项目中，我发现……重建Eval-source-map的时间大约是3.5s…内联源映射重建时间约为7秒


提交答案