webpack学习笔记二
sourceMap
源代码与打包后的代码的映射关系。例如,在某个源文件中test.js里面有个错误,如果开启状态,那么打包后运行的报错信息就会说明是错误的具体位置,如果是关闭状态,报错后,提示的报错位置,会是打包的出口文件。
在开发模式中,默认开启,关闭的话,可以在配置文件里添加:
devtool的常见配置:
- eval:速度最快,使用eval包裹模块代码
- source-map:产生.map文件
- cheap:较快,不用管列的信息,也不包含loader的sourcemap
- Module:第三方模块,包含loader的sourcemap
- inline:将.map作为DataURI嵌入,不单独生成.map文件
推荐配置:
webpackDevServer
webpackDevServer是一个提升开发效率的利器。之前每次改完代码后,都需要重新打包一次,刷新一次,安装使用了webpackDevServer以后,就可以改善这一块的操作和体验了。
首先需要进行安装:npm install webpack-dev-server -D
然后修改package.json
并且在配置文件webpack.config.js中进行相关配置:
然后执行命令npm run server进行打包。
解决跨域
webpackDevServer的另一重要功能就是解决跨域:
当我们在某一个页面中使用下面这种方式进行请求时,就会报跨域错误:
此时,就可以通过配置webpackDevServer来解决跨域了:
然后修改上面的请求就可以了:
Hot Module Replacement(HMR:热模块替换)
然后在plugins里面进行配置:
最后开启就可以了:
处理js模块HRM
上面的处理,对样式的更新十分有效,但是如果要处理js的话,则还需要在此基础上添加module.hot.accept来观察模块更新。
babel处理ES6
babel-loader是webpack与babel的通信桥梁,@babel/preset-env里包含了ES6转ES5的转换规则。
使用前首先需要安装:npm i babel-loader @babel/core @babel/preset-env -D
然后在配置文件webpack.config.js中进行配置
@babel/polyfill
此时,只是将一些简单的ES6进行了转换了,如果要想完全能正常使用,还需要借助@babel/polyfill,把es6的新特性都装进来,弥补低版本浏览器中性能的缺失。
首先进行安装:npm install @babel/polyfill -D
然后在使用到promise等ES6语法的文件顶部进行引入:
index.js
在配置文件webpack.config.js中进行按需加载的配置。(polyfill默认会把所有特性都注入进来,如果不添加下面的配置,则会让打包体积变的非常大)
然后进行打包就可以了。
还有另外一种做法,在项目根目录下新建.babelrc的文件,然后将上面配置里面的options部分移入到这个文件中,再进行打包,也是可行的。
webpack.config.js
@babel/plugin-transform-runtime
当我们开发的是组件库、工具库的时候,polyfill就不合适了,因为polyfill是注入到全局变量window下的,会污染全局环境。这种情况下,用@babel/plugin-transform-runtime更合适。
首先进行安装:
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
然后使用前,还需要注释掉前面index.js里面polyfill的引入
再到.babelrc里面添加配置
配置完成以后,就可以打包使用了。
webpack学习笔记二的更多相关文章
- webpack学习笔记 (二) html-webpack-plugin使用
这个插件的两个作用: 为html文件中引入的外部资源如script.link动态添加每次compile后的hash,防止引用缓存的外部文件问题 可以生成创建html入口文件,比如单页面可以生成一个ht ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
随机推荐
- Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.3 Propositional Equivalences
DEFINITION 1 A compound proposition that is always true,no matter what the truth values of the propo ...
- HTML5实现绘制几何图形
HTML5新增了一个<canvas.../>属性.该元素自身并不绘制图形,只是相当于一张空画布.如果开发者需要向<canvas.../>上绘制图形则必须使用JavaScript ...
- laravel框架源码分析(一)自动加载
一.前言 使用php已有好几年,laravel的使用也是有好长时间,但是一直对于框架源码的理解不深,原因很多,归根到底还是php基础不扎实,所以源码看起来也比较吃力.最近有时间,所以开启第5.6遍的框 ...
- MySQL插入emoji表情报错 SQLException: Incorrect string value 的两种解决方案
摘抄自:https://blog.csdn.net/dmw412724/article/details/81119325 原因:mysql的UTF-8只支持三个字节的存储,而一般字符是三个字节,但是e ...
- 小z的洞穴之旅 QDUOJ 并查集+连通块
小z的洞穴之旅 QDUOJ 并查集+连通块 原题链接 题意 小 z 同学在某个闲暇的周末决定去野外探险一波,结果在丛林深处中误打误撞进入了一个神秘的洞穴,虽然洞穴中光线昏暗,但小 z 凭借其敏锐的眼力 ...
- 常用php算法
一.冒泡排序function bubble($array){ $cnt = count($array); if($cnt <= 0) return $array; for($i =1;$i ...
- vue项目如何监听窗口变化,达到页面自适应?
[自适应]向来是前端工程师需要解决的一大问题--即便作为当今非常火热的vue框架,也无法摆脱--虽然elementui.iview等开源UI组件库层出不穷,但官方库毕竟不可能满足全部需求,因此我们可以 ...
- P3190 [HNOI2007]神奇游乐园
传送门 第一道插头 $dp$ 由于讲不清楚所以假装各位早就会插头 $dp$ 了 首先要的是一个闭合回路,所以可以用括号表示法表示状态,然后大力分类讨论 $1.$ 没有右插头和下插头 那么我们可以啥也不 ...
- nginx启动报错
nginx启动的时候报错 nginx: [emerg] invalid number of arguments in "root" directive in /etc/nginx/ ...
- 在Myeclipse下查看Java字节码指令信息
在实际项目开发中,有时为了了解Java编译器内部的一些工作,需要查看Java文件对应的具体的字节码指令集,这里提供两种方式供参考. 一.使用javap命令 javap是JDK提供的 ...