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 ...
随机推荐
- Spring Cloud 系列之 Sleuth 链路追踪（三）
本篇文章为系列文章,未读前几集的同学请猛戳这里: Spring Cloud 系列之 Sleuth 链路追踪(一) Spring Cloud 系列之 Sleuth 链路追踪(二) 本篇文章讲解 Sleu ...
- 调用ocx ActiveX控件详解(做一个简单的ocx控件)
背景 最近做的项目都和插件有关,就是在页面中调用插件的方法,然后进行操作. 插件就是ocx ActiveX控件,具体的说明可以自己去了解一下,在这里就不做赘述. 具体调用方式很简单: 1.在页面中写一 ...
- [Inno Setup] 执行程序，返回值不为0时提示用户
procedure LoadPerfCounter(); var Ret : Integer; begin if Exec(ExpandConstant('{sys}') + '\lodctr.exe ...
- sed命令的正则表达式实践
1. 取系统ip [root@oldboy logs]# ifconfig eth3 eth3 Link encap:Ethernet HWaddr 08:00:27:4C:6F:AD inet ad ...
- ACM-ICPC 2019 山东省省赛 M Sekiro
Sekiro: Shadows Die Twice is an action-adventure video game developed by FromSoftware and published ...
- 数学--数论--HDU - 6322 打表找规律
In number theory, Euler's totient function φ(n) counts the positive integers up to a given integer n ...
- FTP服务器项目的一些整理
几个月前按照网上的教程写了一个FTP的服务器,现在回头整理一下里面的一些知识. FTP简介 FTP是文件传输协议(File Transfer Protocol),工作在TCP/IP协议族的应用层,其传 ...
- muduo网络库源码学习————无界队列和有界队列
muduo库里实现了两个队列模板类:无界队列为BlockingQueue.h,有界队列为BoundedBlockingQueue.h,两个测试程序实现了生产者和消费者模型.(这里以无界队列为例,有界队 ...
- PHP命令执行学习总结
前言 最近学习了PHP命令执行,内容比较多,把自己学到的总结下来,加深理解,水平有限,欢迎大佬斧正. 什么是PHP命令注入攻击? Command Injection,即命令注入攻击,是指由于Web应用 ...
- 《Docker从入门到跑路》之Dockerfile基本操作
一.简介 Dockerfile是一个文本文件,里面包含一条条指令,每一条指令就是一层镜像.一般情况下,Dockerfile分为4个部分: 基础镜像 维护者信息 镜像操作指令 容器启动时执行命令 例如: ...