如何在使用babel和webpack时生成源映射？
我是新来的webpack，我需要一手设置生成源代码。 我webpack serve运行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，看虽然文件没有真正的帮助，因为我不知道这个问题是什么具体到。
为了使用源映射，您应该将devtool选项值从true更改this list中可用的值 ，例如source-map
devtool: 'source-map'
devtool：'source-map'– 一个SourceMap被发射。
也许别人有这个问题。 如果您在webpack 2使用UglifyJsPlugin ， webpack 2需要明确指定sourceMap标志。 例如：
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
用源码地图为jsx最小的webpackconfiguration：
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$
如果优化开发+生产 ，你可以在你的configuration中尝试这样的事情：
{ devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', }
从文档：
- devtool： “eval-cheap-module-source-map”提供只映射行（无列映射）并且速度更快的SourceMaps
- devtool： “source-map”无法caching模块的SourceMaps，需要重新生成块的完整SourceMap。 这是生产的东西。
我使用的是webpack 2.1.0-beta.19
即使是同样的问题，我在浏览器中显示编译代码。 我已经做了下面的webpackconfiguration文件的变化，现在工作正常。
devtool: '#inline-source-map', debug: true,
在装载机上，我保留了babel-loader作为第一select
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上，我尝试了所有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
只有线
源地图被简化为每行一个映射。 这通常意味着每个语句的单个映射（假设您的作者是这种方式）。 这会阻止您在语句级别和行的列上的设置断点上debugging执行。 结合最小化是不可能的，因为最小化器通常只发射一条线。
你可以尝试黎明，这很简单
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
您可以完成构build
