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 ...
随机推荐
- 计算某天的下一天：黑盒测试之等价类划分+JUnit参数化测试
题目要求 测试以下程序:该程序有三个输入变量month.day.year(month.day和year均为整数值,并且满足:1≤month≤12.1≤day≤31和1900≤year≤2050),分别 ...
- Python常见报错 - 使用openpyxl模块时出现错误： zipfile.BadZipFile: File is not a zip file
背景 在pycharm项目下,有一个data.xlsx,主要用来存放接口测试用例数据的 要通过openpyxl库去读取data.xlsx,方法: openpyxl.load_workbook(path ...
- JDK14的新特性:Lombok的终结者record
目录 简介 新的Record类型 探讨Record的秘密 record扩展 总结 JDK 14的新特性:Lombok的终结者record 简介 自从面向对象产生之后,程序界就开始了新的变化,先是C发展 ...
- 如何在Spring boot中修改默认端口
文章目录 介绍 使用Property文件 在程序中指定 使用命令行参数 值生效的顺序 如何在Spring boot中修改默认端口 介绍 Spring boot为应用程序提供了很多属性的默认值.但是有时 ...
- 【JAVA基础】08 面向对象3
1. 多态 多态polymorhic概述 事物存在的多种形态. 多态前提 要有继承关系 要有方法重写 要有父类引用指向子类对象 案例演示 代码体现多态 class Demo1_Polymorphic{ ...
- 【Linux常见命令】diff命令
diff - compare files line by line diff命令用于比较文件的差异. diff以逐行的方式,比较文本文件的异同处. 如果指定要比较目录,则diff会比较目录中相同文件名 ...
- TOP-K Problems
最小的K个数 直接数组排序,取出前K个.复杂度\(O(nlogn)\). 分治 此题只要求出最小的K个数,并不要求这K个数有序. 我们可以借鉴快排中的partition做法,将比第K个数小的都放前面, ...
- The Preliminary Contest for ICPC Asia Xuzhou 2019 徐州网络赛 C Buy Watermelon
The hot summer came so quickly that Xiaoming and Xiaohong decided to buy a big and sweet watermelon. ...
- P2290 [HNOI2004]树的计数（bzoj1211）
洛谷P2290 [HNOI2004]树的计数 bzoj1211 [HNOI2004]树的计数 Description 一个有\(n\)个结点的树,设它的结点分别为\(v_1,v_2,\cdots, v ...
- Centos7.x 装机优化
Linux 服务器装机后优化 参考 https://blog.csdn.net/u010133338/article/details/81055475 优化初始化脚本 vim init_optimiz ...