webpack使用指南_ANNENBERG的博客-程序员秘密

技术标签: webpack  工具  

1.设定HtmlWebpackPlugin,自动生成index.html dom操作全在js中(之前报错是dom还没加载完成js就开始执行)

2.source map将编译后的代码映射回原始源代码,方便查看报错位置;本例中我们使用devtool:'inline-source-map'(不要用于生产环境)

3.每次输入 npm run build比较麻烦,选择一个开发工具,本例我们选用webpack-dev-server(开发服务器)实现代码发生变化后自动编译代码

命令行中运行npm start可以看到浏览器在localhost:8080下建立服务,自动加载页面

4.https://www.jianshu.com/p/9d152006d312npm安装webpack-dev-server失败,cnpm也失败的解决方法(失败报错原因是网络太慢npm安装失败):npm config set registry https://registry.npm.taobao.org

5.模块热替换(HMR)允许在运行时更新各种模块,而无需进行完全刷新(不用于生产环境)

6.tree shaking 移除js上下文中的未引用代码(dead-code)

7.生产环境构建:在生产环境中启用 source map,对调试代码和运行基准测试很有帮助;如果是开发环境则用inline-source-map;

避免在生产中使用inline-***和eval-***,它们会增加bundle大小降低整体性能

8.代码分离方法:

入口起点:使用 entry 配置手动地分离代码。

防止重复:使用 CommonsChunkPlugin 去重和分离 chunk。

动态导入:通过模块的内联函数调用来分离代码。

9.懒加载:注意当调用 ES6 模块的 import() 方法(引入模块)时,必须指向模块的 .default 值,因为它才是 promise 被处理后返回的实际的 module 对象。

10.缓存:

输出文件的文件名:通过使用 output.filename 进行文件名替换,可以确保浏览器获取到修改后的文件。[hash] 替换可以用于在文件名中包含一个构建相关(build-specific)的 hash,但是更好的方式是使用 [chunkhash] 替换,在文件名中包含一个 chunk 相关(chunk-specific)的哈希

提取模板:CommonsChunkPlugin 可以用于将模块分离到单独的文件中,另一个功能时能够在每次修改后的构建结果中,将 webpack 的样板(boilerplate)和 manifest 提取出来。通过指定 entry 配置中未用到的名称,此插件会自动将我们需要的内容提取到单独的包中。将第三方库提取到单独的vendor chunk文件中;CommonsChunkPlugin 的 'vendor' 实例,必须在 'manifest' 实例之前引入。

main bundle 会随着自身的新增内容的修改,而发生变化。

vendor bundle 会随着自身的 module.id 的修改,而发生变化。

manifest bundle 会因为当前包含一个新模块的引用,而发生变化。

11.通过以下方式暴露 library:

变量:作为一个全局变量,通过 script 标签来访问(libraryTarget:'var')。

this:通过 this 对象访问(libraryTarget:'this')。

window:通过 window 对象访问,在浏览器中(libraryTarget:'window')。

UMD:在 AMD 或 CommonJS 的 require 之后可访问(libraryTarget:'umd')。

12.shimming:针对不符合规范的模块;polyfill虽然是一种模块引入方式,但是并不推荐在主bundle中引入polyfills,因为这不利于具备这些模块功能的现代浏览器用户,会使他们下载体积很大,但却不需要的脚本文件。

script-loader会在全局上下文中对代码进行取值,类似于通过一个script标签引入脚本,使用此loader将不会有devtool的支持,它不会被webpack压缩。

小结:shim是一个库(library),它将一个新的api引入到一个旧的环境,而且仅靠旧的环境中已有的手段实现。polyfill就是一个用在浏览器api上的shim.我们通常的做法是先检查当前浏览器是否支持某个api,如果不支持的话就加载对应的polyfill。然后新旧浏览器就都可以使用这个api了。

13.渐进式网络应用程序(PWA):通过使用名为Service Worker的网路技术,在离线(offline)时应用程序能够继续运行功能。eg:停止服务器然后刷新,仍然可以查看应用程序正常运行。

14.TypeScript是JavaScript的超集,为其增加了类型系统,可以编译为普通的JavaScript代码。

基础安装:安装TypeScript编译器(compiler)和loader;

loader:ts-loader,可以启动额外的webpack功能,如将其他web资源导入项目中

source map:启动source map,必须配置TypeScript,已将内联的source map输出到编译过的JavaScript文件

使用第三方库:你可以从TypeScript中找到并安装这些第三方库的类型声明文件。

导入其他资源:要在TypeScript里使用费代码资源,需要告诉TypeScript如何兼容这些导入类型。

15.迁移到新版本

16.使用环境变量 通过设置--env可以使你根据需要,出入尽可能多的环境变量

17.性能构建

保持版本最新

将loader应用于最少数的必要模块中

每个额外的loader/plugin都有启动时间 尽量少使用不同的工具

以下几步可以提供解析速度:

尽量减少 resolve.modules, resolve.extensions, resolve.mainFiles, resolve.descriptionFiles 中类目的数量,因为他们会增加文件系统调用的次数。

如果你不使用 symlinks ,可以设置 resolve.symlinks: false (例如 npm link 或者 yarn link).

如果你使用自定义解析 plugins ,并且没有指定 context 信息,可以设置 resolve.cacheWithContext: false 。

使用 DllPlugin 将更改不频繁的代码进行单独编译。这将改善引用程序的编译速度。

减少编译的整体大小,以提高构建性能。尽量保持 chunks 小巧:

使用 更少/更小 的库。

在多页面应用程序中使用 CommonsChunksPlugin。

在多页面应用程序中以 async 模式使用 CommonsChunksPlugin 。

移除不使用的代码。

只编译你当前正在开发部分的代码。

可以将非常消耗资源的 loaders 转存到 worker pool 中。不要使用太多的 workers ,因为 Node.js 的 runtime 和 loader 有一定的启动开销。最小化 workers 和主进程间的模块传输。进程间通讯(IPC)是非常消耗资源的。启用持久化缓存。使用 package.json 中的 "postinstall" 清除缓存目录。

Development:增量编译、在内存中编译、Devtool、避免在生产环境中才用到的工具(UglifyJsPlugin,ExtractTextPlugin,[hash]/[chunkhash],AggressiveSplittingPlugin,AggressiveMergingPlugin,ModuleConcatenationPlugin)、最小化入口chunk。

Production:多个编译时(parallel-webapck:它允许编译工作在worker池中进行。cache-loader:缓存可以在多个编译时之间共享)、Source Maps(太消耗资源,一般不需要它)

工具:Babel项目中的preset/plugins数量最小化;

TypeScript:

在单独的进程中使用 fork-ts-checker-webpack-plugin 进行类型检查。

配置 loaders 跳过类型检查。

使用 ts-loader 时,设置 happyPackMode: true / transpileOnly: true。

Sass:node-sass 中有个来自 Node.js 线程池的阻塞线程的 bug。 当使用 thread-loader 时,需要设置 workerParallelJobs: 2。

18.内容安全策略:启用CSP

19.开发-Vagrant:项目配置、启动服务器、配合nginx的高级用法。

20.管理依赖:带表达式的require语句、require.context、上下文模块API。

21.公共路径:构建项目时设置路径值(比如生产环境下,把静态文件统一使用CDN加载)、即时设定路径值。

22.集成(integrations):通常 webpack 用户使用 npm scripts 来作为任务执行器。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/ANNENBERG/article/details/87800922

智能推荐

羊车门问题看到吐血后的理解----一千七百字小作文+Python代码验证,帮你从质到量上理解,这再看不明白算我输!_世由心生的博客-程序员秘密

标题有些夸张哈哈哈哈不过这个问题真是自己跟自己较劲了好半天不断跟自己说换不换概率都是一样的呀!!!!然后看了好多现存帖子答案都是统一的1/3 2/3于是我陷入了长达几分钟的沉思。。。结论是:确实是1/3 和2/3 哈哈哈哈哈哈哈嗝现存代码有很多,不过如果你从质上无法接受代码中的逻辑关系,恐怕也很难接受代码跑出来的比例结果,本文先从质上提供了几种思路详细阐述了为什么换的概率是大的,继而给出代码验证量上比例关系。对于初次想这个问题依然坚持认为概率是一样的同学,不知我这样说是否可以说服你:已知

转载:jquery如何来获取label标签里的内容 checkbox选中后获取label标签内容_aet26399的博客-程序员秘密

转载网址:http://www.itokit.com/2012/0813/74663.html我们在做checkbox列表中,希望选中某些checkbox后,checkbox后面的label标签里的显示内容能够在一个指定的文本框里追加上内容。我们在做checkbox列表中,希望选中某些checkbox后,checkbox后面的label标签里的显示内容能够在一个指定的文本框里追加...

【BZOJ2326】数学作业(HNOI2011)-递推+矩阵快速幂_Maxwei_wzj的博客-程序员秘密

测试地址:数学作业 做法:本题需要用到递推+矩阵快速幂。 令f(i)f(i)f(i)为Concatenate(i)Concatenate(i)Concatenate(i)对mmm取模后的结果,很快能得到一个递推式: f(i+1)=f(i)×10k+i+1f(i+1)=f(i)×10k+i+1f(i+1)=f(i)\times 10^k+i+1 注意到所需的信息:f(i)f(i)f(i)和i...

uniapp中使用定位导航和拨打电话_babyxuqian的博客-程序员秘密_uniapp使用gps

uni.getLocation(OBJECT)获取当前的地理位置、速度。OBJECT 参数说明参数名 类型 必填 说明 平台差异说明 type String 否 默认为 wgs84 返回 gps 坐标,gcj02 返回国测局坐标,可用于uni.openLocation和 map 组件坐标,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。 altitude Boolean 否 传入 true 会返回高度..

数据收集,网站数据采集伪原创发布(图文)_战国SEO的博客-程序员秘密

数据收集,最近很多站长问我有没有好用的文章数据收集系统,因为不同CMS的文章采集伪原创发布是一件让人头痛的事。我们都知道网站的收录离不了日常的文章更新。网站有了收录之后网站的一个SEO排名才能够起来,数据收集对网站的收录起着重要的作用,文章数据收集系统可以让我们的网站定时采集伪原创发布之外并一键自动推送给搜狗、百度、神马、360。让网站更快让搜索引擎收录,保护网站文章的原创性。

Ubuntu18.04 gedit 中文乱码_Denzel张的博客-程序员秘密

参考文章:找不到了输入命令:gsettings set org.gnome.gedit.preferences.encodings candidate-encodings "['GB18030','GB2312','GBK','UTF-8','BIG5','CURRENT','UTF-16']

随便推点

python 字典中有中文,写入文件变为编码的解决方法_远哥的小迷弟的博客-程序员秘密

字典中有中文,写入文件变为编码的解决方法#!/usr/bin/python# encoding:utf-8import jsondef writeDict(data): with open("data.txt", "w") as f: # 下面这句及时解决问题的关键 f.write(json.dumps(data, ensure_ascii=False))

使用Object对象的wait和notify来实现一个生产者消费者模型_和Java狼狈为奸的博客-程序员秘密

今天学习Object的wait和notify。使用这两个方法实现一个生产者、消费者模型首先定义一个仓库类,因为生产者还是消费者,都要从仓库存或者取public class Storage { // 仓库的最大容量 private int maxSize; // 具体的仓库 private LinkedList<Date> storage; ...

ionic ion-infinite-scroll上拉刷新会自动调用多次的问题_付茜的博客-程序员秘密

在第一次自动调用时,如果加载的数据没有充满屏幕,会自动再调用一次,要是还没充满屏幕,会无限次请求数据。解决办法就是多请求点数据。

完成基于ICX285和ICX205两种CCD的兼容性电路设计_iTRUM-imaging的博客-程序员秘密

设计主要实现了ICX285和ICX205两种CCD公用一块电路驱动板的问题。 众所周知,不同型号的CCD,由于其管教定义、接口时序都不同,因此驱动部分都不一样,很难做到公用一套电路板,但是ICX285和ICX205两款CCD有很多共性,完全能够实现这一功能。我最好于2年前就考虑过这个问题,之前老的思路是,主要设计ICX285的成像电路,然后再做一块小的转接电路板,与ICX285的电路对接,实现ICX205 CCD的驱动。这个设计思路是没有问题的,虽然没有实际作出ICX205的转接板做实际测试,但是...

SQLServer2008数据库分离与附加_日月人云的博客-程序员秘密_附加数据库sql

1、分离数据库就是将某个数据库(如student_Mis)从SQL Server数据库列表中删除,使其不再被SQL Server管理和使用,但该数据库的文件(.MDF)和对应的日志文件(.LDF)完好无损。分离成功后,我们就可以把该数据库文件(.MDF)和对应的日志文件(.LDF)拷贝到其它磁盘中作为备份保存。2、附加数据库就是将一个备份磁盘中的数据库文件(.MDF)和对应的日志文件(.L

MediaPlayer播放音频_Gaoxry的博客-程序员秘密

Android提供了常见的音频、视频的编码、解码机制。借助于多媒体类MediaPlayer的支持,开发人员可以很方便在在应用中播放音频、视频。本篇博客主要讲解在Android平台下如何播放一个音频文件。本篇博客主要内容如下:MediaPlayer MediaPlayer的音频源 使用MediaPlayer播放音乐 MediaPlayer使用技巧 Demo--一个简单的MP3播放器MediaPlayer上面提到过,Android下对于音频、视频的支持均需要使用到MediaPlayer,它