webpack指南（四）shimming
shimming 将一个新的 API 引入到一个旧的环境中，而且仅靠旧的环境中已有的手段实现。
ProvidePlugin 我们在程序中暴露一个变量，通知webpack某个库被使用，webpack将在最终的bundle中引入该库。
// index.js
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['hello','webpack'],' ');
return element;
}
document.body.appendChild(component());
注意，这个文件里不需要import _ from lodash了
// webpack.common.js
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'shimming'
}),
+ new webpack.ProvidePlugin({
+ _: 'lodash'
+ })
]
还可以利用ProvidePlugin暴露库中的单一函数（变量）
function component() {
var element = document.createElement('div');
element.innerHTML = join(['hello','webpack'],' ');
return element;
}
document.body.appendChild(component());
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'shimming'
}),
new webpack.ProvidePlugin({
+ join: ['lodash','join']
})
]
这样，就可以将lodash库中的其他没用到的部分去除。（tree shaking）
注意：任何需要AST的功能，ProvidePlugin都无法正常运行。
imports-loader 覆写this指向.
npm i imports-loader
在CommonJS环境下，this指向module.exports。通过imports-loader将this指向window.
function component() {
var element = document.createElement('div');
element.innerHTML = join(['hello','webpack'],' ');
+ this.alert('test hahaha');
return element;
}
document.body.appendChild(component());
module: {
rules: [
{
test: require.resolve('./src/test.js'),
use: 'imports-loader?this=>window'
}
]
},
exports-loader 将一个全局变量作为一个普通模块导出。
npm i exports-loader
global.js // 注意：这个文件中没有任何export语句。
const file = 'this is file text';
var helper = {
parse: function() {
console.log('this parse function comes from global.js');
}
}
webpack.config.js
module: {
rules: [
{
test: require.resolve('./src/global.js'),
use: 'exports-loader?file,parse=helper.parse'
}
]
},
运行webpack编译命令，然后在test.js中导入
import {file, parse} from './global';
function component() {
var element = document.createElement('div');
element.innerHTML = join(['hello','webpack'],' ');
console.log(file);
parse();
return element;
}
document.body.appendChild(component());
再运行编译命令
polyfill 是一个用在浏览器 API 上的 shim。
我们通常的做法是先检查当前浏览器是否支持某个 API，如果不支持的话就加载对应的 polyfill。
npm install --save babel-polyfill
npm install --save whatwg-fetch官网上，不推荐在主 bundle 中引入 polyfills，因为这不利于已具备这些模块功能的现代浏览器用户，会使他们下载体积很大、但却不需要的脚本文件。推荐做法是将其放入一个单独的文件。
// polyfill.js
import 'babel-polyfill';
import 'whatwg-fetch';
entry: {
polyfills: './src/polyfills.js',
index: './src/index.js'
},
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
+ <script>
// 检测需要的功能是否支持
+ var modernBrowser = (
+ 'fetch' in window &&
+ 'assign' in Object
+ );
+ // 若不支持，则导入
+ if ( !modernBrowser ) {
+ var scriptElement = document.createElement('script');
+
+ scriptElement.async = false;
+ scriptElement.src = '/polyfills.bundle.js';
+ document.head.appendChild(scriptElement);
+ }
+ </script>
</head>
<body>
<script src="index.bundle.js"></script>
</body>
</html>
script-loader 会在全局上下文中对代码进行取值，类似于通过一个 script 标签引入脚本。在这种模式下，每一个标准的库(library)都应该能正常运行。require,module等取值为undefine.
当使用 script-loader 时，模块将转化为字符串，然后添加到 bundle 中。它不会被webpack 压缩，所以应该选择一个 min 版本。同时，script-loader将不会有devtool 的支持。
这些老旧的模块如果没有 AMD/CommonJS 规范版本，但你也想将他们加入 /dist 目录，你可以使用 noParse 来标识出这个模块。这样就能使 webpack 将引入这些模块，但是不进行转化(parse)和解析(resolve) require和 import 语句。这个实践将提升构建性能。
---------------------------------------------------------------------------------------
在构建中涉及性能的loaders
thread-loader
可以将非常消耗资源的 loaders 转存到 worker pool 中。
cache-loader 启用持久化缓存
可以在多个编译之间共享缓存。
使用 package.json 中的 "postinstall" 清除缓存目录。
webpack指南（四）shimming的更多相关文章
- Swift语言指南(四)--类型安全和类型推断
原文:Swift语言指南(四)--类型安全和类型推断 Swift是一门类型安全语言,类型安全语言需要代码里值的类型非常明确.如果你的代码中有部分值需要String类型,你就不能错误地传递Int. 鉴于 ...
- C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)
上一讲<C++11 并发指南四(<future> 详解一 std::promise 介绍)>主要介绍了 <future> 头文件中的 std::promise 类, ...
- App架构师实践指南四之性能优化一
App架构师实践指南四之性能优化一 1.性能维度常见用来衡量App性能的维度如图9-1所示.其中,性能指标包括电池(电量/温度).流量(上行流量/下行流量等).CPU(平均/最大/最小).内存 ...
- C++11 并发指南四(<future> 详解三 std::future & std::shared_future)
上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...
- C++11 并发指南四(<future> 详解三 std::future & std::shared_future)（转）
上一讲<C++11 并发指南四(<future> 详解二 std::packaged_task 介绍)>主要介绍了 <future> 头文件中的 std::pack ...
- 转：Webpack 指南（整理 草稿）
基础 安装 首先要安装 Node.js, Node.js 自带了软件包管理器 npm.用 npm 全局安装 Webpack: $ npm install webpack -g 通常我们会将 Webpa ...
- webpack的四个核心概念介绍
前言 webpack 是一个当下最流行的前端资源的模块打包器.当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后 ...
- Webpack指南（一）：安装，创建项目，配置文件，开发环境以及问题汇总
Webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency gra ...
- View Programming Guide for iOS ---- iOS 视图编程指南(四)---Views
Views Because view objects are the main way your application interacts with the user, they have many ...
随机推荐
- python25之进制转换
一.进制转换函数 bin():将十进制转换为二进制 oct():将十进制转换为八进制 hex():将十进制转换为十六进制 >>> x=1234>>> bin(x)' ...
- QT 无法抓住异常
出处:https://stackoverflow.com/questions/40980171/qt5core-dll-crashing I've found that enabling /EHa ( ...
- mac OS 安装 Homebrew软件包管理器
Homebrew macOS 缺失的软件包的管理器 中文官网 https://brew.sh/index_zh-cn 获取安装命令 /usr/bin/ruby -e "$(curl -fsS ...
- 运用shell脚本 执行sftp，ftp命令
sftp文件上传(从本地上传到远程) #!/bin/bash #远程上传文件测试 if [ $# -ne 2 ] then echo "miss arguments" echo & ...
- Windows 怎么启动 apache
在可执行目录下找到httpd.exe命令,然后运行cmd,执行类似以下命令:C:\"Program Files"\"Apache Software Foundation& ...
- HTML5 Canvas指纹及反追踪介绍
1 Canvas指纹的简介很多网站通过Canvas指纹来跟踪用户.browserleaks[1]是一个在线检测canvas指纹的网站.一般的指纹实现原理即通过canvas画布绘制一些图形,填写一些文字 ...
- E - Petya and Exam CodeForces - 832B 字典树+搜索
E - Petya and Exam CodeForces - 832B 这个题目其实可以不用字典树写,但是因为之前写过poj的一个题目,意思和这个差不多,所以就用字典树写了一遍. 代码还是很好理解的 ...
- jQuery中val() text()和html()的区别
2020年4月21日 16:48:11 jQuery 学习 html() 它可以设置和获取起始标签和结束标签中的内容. 跟 dom 属性 innerHTML 一样.text() 它可以设置和获取起始标 ...
- 关于Cookie的一点简单认识
1.Cookie Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一服务器,是在客户端保持状态的方案.通常每个 Cookie 的大小不能超过4KB.客户端每次向服务器发出请求,就 ...
- Coursera课程笔记----Write Professional Emails in English----Week 2
Let's Start Writing (Week 2) Write Effective Subject Lines be BRIEF 50 characters or less = 5-7 word ...