webpack配置:增加babel支持、打包后调试
一、babel支持
Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析ES6的babel-preset-es2015包和解析JSX的babel-preset-react包)。
1、我们先一次性安装这些包,如果安装出错,小伙伴们可以一个一个安装。
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
2、在webpack.config.js中配置:
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}
3、可以修改一下index.js的代码
let hzhSrting = 'Hello Webpack!'
document.getElementById('pic').innerHTML = hzhSrting;
然后webpack打包,npm run server 查看效果如下:
let 转变成了 var,并且文字效果也出来了。
二、打包后调试
在配置devtool时,webpack给我们提供了四种选项。
(1)source-map:在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度。
(2)cheap-module-source-map:在一个单独的文件中产生一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便。
(3)eval-source-map:使用eval打包源文件模块,在同一个文件中生产干净的完整版的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项,在生产阶段则一定要不开启这个选项。
(4)cheap-module-eval-source-map:这是在打包文件时最快的生产source map的方法,生产的 Source map 会和打包后的JavaScript文件同行显示,没有映射列,和eval-source-map选项具有相似的缺点。
四种打包模式,由上到下打包速度越来越快,不过同时也具有越来越多的负面作用,较快的打包速度的后果就是对执行和调试有一定的影响。个人意见是,如果大型项目可以使用source-map,如果是中小型项目使用eval-source-map就完全可以应对,需要强调说明的是,source map只适用于开发阶段,上线前记得修改这些调试设置。
简单的配置下:
devtool:'eval-source-map'
webpack配置:增加babel支持、打包后调试的更多相关文章
- webpack快速入门——给webpack增加babel支持
1.Babel的安装与配置 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个 你需要的功能或拓展,你都需要安 ...
- 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...
- (15/24) 为webpack增加babel支持
Babel是什么? Babel是一个编译JavaScript的平台,它的强大之处表现在可以通过编译达到以下目的: 使用下一代的javaScript代码(ES6,ES7-.),即使这些标准目前并未被当前 ...
- 配置vue项目将打包后图片文件的引用路径改为cdn路径?
vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...
- webpack配置:css文件打包、JS压缩打包和HTML文件发布
一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...
- webpack: webpack简单打包后的代码(1)
源码 本文研究的源码地址为:https://github.com/collect-webpack/practice/tree/master/webpack-01 在本研究的前提是 entry 的配置为 ...
- webpack快速入门——打包后如何调试
在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...
- webpack快速入门——配置JS压缩,打包
1 .首先在webpack.config.js中引入 const uglify = require('uglifyjs-webpack-plugin'); 2.然后在plugins配置里 plugin ...
- webpack减少打包后文件体积的几种方法
webpack 把我们所有的文件都打包成一个 JS 文件,这样即使你是小项目,打包后的文件也会非常大.下面就来讲下如何从多个方面进行优化. 去除不必要的插件 刚开始用 webpack 的时候,开发环境 ...
随机推荐
- Oracle基础 02 临时表空间 temp
--查看临时文件的使用/剩余空间 SQL> select * from v$temp_space_header; --查看SCOTT用户所属的临时表空间 SQL> select usern ...
- ie_placeholder最佳兼容方案
https://gitee.com/hustcc/placeholder.js巧妙的使用了canvas.toDataURL(),动态生成了一个背景图,可以作为兼容IE9-的placeholder方案. ...
- Delphi指针详解
Delphi指针详解2007-12-04 06:08:57| 分类: DLL学习 阅读91 评论0 字号:大中小 订阅 大家都认为,C语言之所以强大,以及其自由性,很大部分体现在其灵活的指针运用 ...
- Java 的初始化顺序
初始化顺序: 1.将对象内存空间初始化为二进制0(所有的数据成员被设为默认值) 2.如果该类有基类则初始化其基类(调用默认基类构造器,也可在子类构造器中指定调用基类的某个构造器) 3. 静态成员和静态 ...
- python Tk()生成的桌面的具体设置方法
rom tkinter import * root = Tk() root['height'] = 300 #设置高 root['width'] = 500 #设置宽 root.title('魔方小站 ...
- docker从零开始 存储(六)存储驱动如何选择
Docker存储驱动程序 理想情况下,将非常少的数据写入容器的可写层,并使用Docker卷来写入数据.但是,某些工作负载要求您能够写入容器的可写层.这是存储驱动程序的用武之地. Docker使用可插拔 ...
- mysql的mysqladmin的用法
mysqladmin 适合于linux和windows系统 linux下:mysqladmin -u[username] -p[password] status windows下:先在安装目录找到my ...
- poj 1556(迪杰斯特拉+计算几何)
The Doors Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 7641 Accepted: 2987 Descrip ...
- django + dropzone.js 上传文件
1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...
- [linux]压缩、解压命令
.tar.gz 和 .tgz 解压:tar zxvf FileName.tar.gz 压缩:tar zcvf FileName.tar.gz DirName tar 解包:tar xvf FileNa ...