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 ...
随机推荐
- 进制之间转换——day_01
一.计算机文件大小单位 b = bit 位(比特) B = Byte 字节 1B = 8b #一个字节等于8位 简写 1Byte = 8 bit 1KB = 1024B 1MB = 1024KB 1G ...
- thinkphp5 csv格式导入导出（多数据处理）
关于csv文件格式的导出导入个人见解 先上代码: <?php namespace think; class Csv { /** * 导出csv文件 * @param $list 数据源 * @p ...
- ansible一键安装mysql8.0
ansbile安装: # ansible在CentOS7中需要安装epel仓库 yum install -y epel-release yum install -y ansible 安装有好几种方法, ...
- Shiro（二）：Spring-boot如何集成Shiro（上）
这篇文章主要介绍了spring-boot是如何集成shiro的authentication流程的. 从shiro-spring-boot-web-starter说起 shiro-spring-boot ...
- 被@ResponseBoby注释的方法在拦截器的posthandle方法中设置cookie失效的问题
文章标题可能有点绕口.先来解释下遇到的问题. 我写了一个拦截器,希望能够实现保存特定方法的请求参数到cookie中. public class SaveParamInterceptor extends ...
- JQuery学习(一)
本文是学习廖老师的Javascript全栈教程后的一些笔记. 使用jQuery: 方法一:下载jQuery库,并在html页面中引入,方式如下: 1 <html> 2 <head&g ...
- 02-线性结构4 Pop Sequence
02-线性结构4 Pop Sequence (25分) 时间限制:400ms 内存限制:64MB 代码长度限制:16kB 判题程序:系统默认 作者:陈越 单位:浙江大学 https://pta.p ...
- Microsoft Dynamics CRM 2015 服务器系统的性能维护，追踪， 也可以用到任务管理器哟...
Microsoft Dynamics CRM 2015 的追踪是一个很有用的function,它能为我们的CRM调试,评估 提供有价值的信息:我们可以用window的性能监控工具来了解CRM的性能状态 ...
- WebStorm 2019 3.3 安装及破解教程附汉化教程
WebStorm2019 3.3 安装及破解教程附加汉化教程 安装包及破解补丁 链接: https://pan.baidu.com/s/19ATTAW3Tsm0huIJSqYChTw 提取码:1ei7 ...
- Linked List-1
链表一直是面试的重点问题,恰好最近看到了Stanford的一篇材料,涵盖了链表的基础知识以及派生的各种问题. 第一篇主要是关于链表的基础知识. 一.基本结构 1.数组回顾 链表和数组都是用来存储一堆数 ...