10.webpack^4.42.1文档学习

1.上一节咋们学习了webpack进行库的配置以及发布到npm。咋们这一节的学习一些对于老库的优化，webpack文档对应的是shimming(补偿)，其实我理解就是优化吧。

1.1 定义全局变量(scope=>整个项目)：

// webpack.config.js中配置

const webpack =require("webpack");
module.exports = {
 plugins: [
    new webpack.ProvidePlugin({
     //_: 'lodash',
     join: ['lodash', 'join']
    }),
}]

// index.js

// import _ from "lodash";// 无需手动引入
// console.log(_.join([1,2],[3]))
console.log(join([1,2],[3]))

游览器打印出来的结果如图1-1没有变化：

图1-1

1.2细粒度shimming（矫正打包后的this指向）：

node环境下this指向如图1-2

图1-2

浏览器中this指向如图1-3

图1-3

然而webpack 打包后全局作用域下的this可能不会符合我们的预期指向如图1-4:

图1-4 这个时候咱们要借助import-loader来矫正this指向，在webpack.config.js中配置：

module.exports = {
	module:{
	rules:[
	...
	      {
        test: require.resolve(__dirname+'/src/index.js'),
        use: 'imports-loader?this=>window'
      }
]
}
}

重新运行npm run build，在浏览器中打开dist/index/html文件，如图1-5：

图1-5 至此this指向的问题得到了解决。

1.3 老旧的库导出全局变量：

在es6这些模块化兴起之前，很多库的只支持script引入全局变量的方式。这在模块发开发的情景下直接在入口文件内是无法通过模块导入引入这些全局变量的，比如：
// globals.js
// 老旧库

// 定义全局变量，无法使用模块化导入引入此变量
var globalVariable = 1

// 新库

// 模块化导出定义的全局变量，可以使用模块化导入引入此变量
export const globalVariable = 1

这时我们可以借助exports-loader，暴露这些老库的全局变量，使其支持模块化导入。
在webpack.config.js中进行配置：

  module.exports = {
  ...
 	 module: {
      	rules: [
      		...
      		{
				test: require.resolve('globals.js'),
	    		use: 'exports-loader?globalVariable '
			}
      	]
      	}
     }

然后 我们在入口文件中用模块化导入 import { globalVariable } from ‘./globals.js’。
可以看到globalVariable 可以被使用。

2. 尽管当前各大浏览器已支持大部分的es6+的语法，但是为了兼顾更多的情景，我们需要借助babel-polyfill这样的垫片去实现javascript在各种情景下的兼容。但是可能一些浏览器以及对于一些高级语法支持得很好了，所以不是对于所有得游览器咱们都要对其注入脚本进行支持，那么我们能不实现按需注入支持呢？

文档中使用的方法是单独将babel-polyfill以及whatwg-fetch打包成一个bundle，然后在html中按需引入打包后的脚本，通过in关键字判断浏览器全局对象window上是否存在某些特性，如果不存在则引入脚本支持，存在则不引入。
备注： babel-polyfill以及whatwg-fetch，前者是转换新版api及抹平浏览器之间的差异（兼容ie），后者是兼容fetch。
然后文档后面还提到了babel-preset-env：实际上它是babel-polyfill的互补，它仅仅用来 转换高级语法，比如箭头函数。后面学习babel时候再深入了解。