如何在使用babel和webpack时生成源图?
本文翻译自:How do I generate sourcemaps when using babel and webpack?
I'm new to webpack, and I need a hand in setting up to generate sourcemaps. 我是webpack的新手,我需要设置一下来生成源图。 I'm running webpack serve
from the command line, which compiles successfully. 我正在webpack serve
运行webpack serve
,它可以成功编译。 But I really need sourcemaps. 但我真的需要源图。 This is my webpack.config.js
. 这是我的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的新手,看起来虽然文档并没有真正起作用,因为我不确定这个问题的具体内容。
#1楼
参考:https://stackoom.com/question/25Wuc/如何在使用babel和webpack时生成源图
#2楼
In order to use source map, you should change devtool
option value from true
to the value which 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。
#3楼
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: 3826msAsset Size Chunks Chunk Namesbundle.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$
#4楼
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',
}
From the docs: 来自文档:
- devtool: "eval-cheap-module-source-map" offers SourceMaps that only maps lines (no column mappings) and are much faster devtool: “eval-cheap-module-source-map”提供SourceMaps,它只映射行(没有列映射)并且速度更快
- devtool: "source-map" cannot cache SourceMaps for modules and need to regenerate complete SourceMap for the chunk. devtool: “source-map”无法为模块缓存SourceMaps,需要为块重新生成完整的SourceMap。 It's something for production. 这是生产的东西。
I am using webpack 2.1.0-beta.19 我使用的是webpack 2.1.0-beta.19
#5楼
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' }
]
#6楼
Maybe someone else has this problem at one point. 也许其他人一直有这个问题。 If you use the UglifyJsPlugin
in webpack 2
you need to explicitly specify the sourceMap
flag. 如果在webpack 2
使用UglifyJsPlugin
, webpack 2
需要显式指定sourceMap
标志。 For example: 例如:
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })
如何在使用babel和webpack时生成源图?相关推荐
- 【webpack】使用webpack打包图片文件、打包时生成单独的css文件
使用webpack打包图片文件 在scr目录下创建image文件夹,并且添加几张图片 在main.js使用import方式引入所有图片,并且append到app节点下 // 引入图片资源 import ...
- webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
- webpack打包生成的map文件_Webpack的devtool和source maps
source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL),而devtool就是用来指定 ...
- 关于使用Webpack时报出:ERROR IN MULTI ./src/main.js .dist/bundle.js 错误的分享
关于Vue使用webpack时出现的"ERROR IN MULTI ./src/main.js .dist/bundle.js Module nor found:Error:Can't re ...
- c# .netframwork 4.0 调用 2.0时报错 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集。...
"System.IO.FileLoadException"类型的未经处理的异常在 XXX.dll 中发生 其他信息: 混合模式程序集是针对"v2.0.50727" ...
- php读取cookie文件,PHP读取CURL模拟登录时生成Cookie文件的方法,_PHP教程
PHP读取CURL模拟登录时生成Cookie文件的方法, 本文实例讲述了PHP读取CURL模拟登录时生成Cookie文件的方法.分享给大家供大家参考.具体实现方法如下: 在使用PHP中的CURL模拟登 ...
- JVM 在遇到OOM(OutOfMemoryError)时生成Dump文件的三种方式
JVM 在遇到OOM(OutOfMemoryError)时生成Dump文件的三种方式,以及如何使用Eclips Memory Analyzer(MAT)插件进行堆内存分析. 方法一: jmap -du ...
- java oom dump_JVM 在遇到OOM(OutOfMemoryError)时生成Dump文件的三种方式
JVM 在遇到OOM(OutOfMemoryError)时生成Dump文件的三种方式,以及如何使用Eclips Memory Analyzer(MAT)插件进行堆内存分析. 方法一: jmap -du ...
- C#异常--System.IO.FileLoadException:“混合模式程序集是针对“v2.0.50727”版的运行时生成的错误...
异常信息: System.IO.FileLoadException:"混合模式程序集是针对"v2.0.50727"版的运行时生成的,在没有配置其他信息的情况下,无法在 4 ...
最新文章
- 基于Adaboost算法的人脸检测分类器!
- 运行在浏览器中的深度学习框架,开源了
- 通过组策略禁用U盘执行病毒文件
- 前端实现数字快速递增_艾默生新型超声波发生器的数字控制功能可实现快速设置和准确操作...
- 通过WebBrowser使用Echats
- elasticsearch date_MySQL数据实时增量同步到Elasticsearch
- 运用vs code常见错误_CBA:浙江广厦控股 VS 广东东莞大益 热门篮球竞猜分析
- 【中台实践】华为大数据中台架构分享.pdf
- mysql分页是物理分页_学习MySQL:什么是分页
- NVIDIA硬编码方式:omxh264enc和nvv4l2h264enc
- MinGW-w64的安装及配置教程
- 【C++】虚表指针和虚函数表
- R语言中常用的抽样函数
- Vue Router 路由(路由守卫)---route
- java mysql 端口_如何在JAVA中建立MySQL连接?在locahost上设置的端口号是多少?
- 腾讯云OCR文字识别的使用
- Android主线程耗时方法监控
- 智能温室的优缺点,你都知道哪些?
- 如何使用overleafLaTeX
- a标签 :focus的使用(:focus)
热门文章
- 滴滴哆啦A梦源码解析
- 算法--------------有效的数独
- 必考题:子类继承父类,初始化以及方法调用顺序
- python 提取网关信息_python:使用netifaces模块获取本机IP网关等信息
- 线程间通信的两种方式
- truffle (ETH以太坊智能合约集成开发工具) 入门教程
- python复制文件夹不阻塞_Python学习第54天(阻塞(blocking) IO和非阻塞(non-blocking)IO)...
- Swift之Delegate/闭包
- 如何解决普通用户使用sudo找不到命令
- 2018冬令营模拟测试赛(十八)