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 ...
随机推荐
- 调用ocx ActiveX控件详解(做一个简单的ocx控件)
背景 最近做的项目都和插件有关,就是在页面中调用插件的方法,然后进行操作. 插件就是ocx ActiveX控件,具体的说明可以自己去了解一下,在这里就不做赘述. 具体调用方式很简单: 1.在页面中写一 ...
- 2019-2020-1 20199328《Linux内核原理与分析》第三周作业
加载内核 这里可以看出有些东西隔一段时间就会打印出来 查看mymain.c 开头的一些语句不再描述 每10000次循环打印一次 这里还是针对的mymain.c文件,这里我们可以根据自己的计算机对频率进 ...
- SpringBoot应用操作Rabbitmq（topic交换器高级操作）
一.topic交换器为主题交换器,可以根据路由key模糊匹配 实现模型图 二.实战 1.引入maven <dependency> <groupId>org.springfram ...
- 事件总线功能库，Reface.EventBus 详细使用教程
Reface.AppStarter 中的事件总线功能是通过 Reface.EventBus 提供的. 参考文章 : Reface.AppStarter 框架初探 使用 Reface.EventBus ...
- 5.Python是怎么解释的？
Python是怎么解释的? Python language is an interpreted language. Python program runs directly from the sour ...
- OpenWrt-19.07.2 For HC5861(极路由3) /HiWiFi/Gee最新固件，极路由3刷openwrt
OpenWrt For HiWiFi(HC5861) 自编译精减固件,极路由3自用固件 HC5861-uboot.bin v19.07.2 下载 支持 NTFS 读写 支持 Wi-Fi 5G 驱动 默 ...
- Linux指令面试题01-进程查看与终止
查看某一进程是否运行:ps -ef|grep 程序名 终止程序: kill pid 转载于:https://www.cnblogs.com/feihujiushiwo/p/10896636.html
- js特效：鼠标滑过图片时切换为动图
效果展示 事前准备 一张普通的静态图+与其对应的gif图. 实现思路 获取图片的src,改变其后缀,使其变成与之对应的gif图片.(很简单有木有= =) 具体实现 编写html代码 <div c ...
- 原生JS设计轮播图
一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...
- 字符串后面空字符的问题（char*与string的转换）
今天AC了不少题,困扰已久的Time limit error 也解决了,记住下次用STL容器的时候一定要清空容器. 其次是字符数组与字符串的浅谈. 字符数组是以'\0'结尾的,所以在字符数组赋值给字符 ...