webpack 应用解析

DefinePlugin.md

DefinePlugin 定义全局变量

可以根据测试和线上注入全局变量来动态控制逻辑

// webpak.config.js
new webpack.DefinePlugin({
    'ENV': JSON.stringify(process.env.ENV)
})

// package.json
"script": {
    "dev": "ENV=DEV webpack",
    "build": "webpack"
}

这样在代码中的 ENV 就是 'DEV' 了：

// code
if(ENV === 'DEV'){  // ENV -> DEV
	// ...
}

暴露变量.md

ProvidePlugin

当 webpack 加载到某个 js 模块里，出现了未定义且名称符合（字符串完全匹配）配置中 key 的变量时，会自动 require 配置中 value 所指定的 js 模块。

下面这样设置就再也不用在每个模块中 require('jquery') 了，适合于兼容通过 npm 引入的 jQuery 插件：

var providePlugin = new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	'window.$': 'jquery',
});

expose-loader

install: npm install --save-dev expose-loader

这样设置就是把全局里的 $ 都当做 jQuery 了，适合于兼容通过 <script> 引入的 jQuery 插件：

{
  test: require.resolve('jquery'),  // 此loader配置项的目标是NPM中的jquery
  loader: 'expose?$!expose?jQuery', // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
}

可以在控制台使用 $ 获得 jQuery 了

externals

用来将某个全局变量伪装成某个 js 模块的 export：

externals: {
    'jquery': 'window.jQuery'
},

老项目中， jQuery 是通过 <script> 引入的，那么当某个模块 require('jquery') 的时候，就会把 window.jQuery 返回给它。

externals vs resolve.alias

以 React 为例，对于在 main.js 中，同样：

import React from 'react';
import ReactDOM from 'react-dom';

再看 html 中：

<!--externals-->
<script src="http://www.cdn.com/react.js"></script>
<script src="http://www.cdn.com/react-dom.js"></script>
<script src="./main.js"></script>

<!--alias-->
<script src="./main.js"></script>

• externals 模式就是让外部模块（CDN上）能够被 import 使用，不会打包进 main.js

externals: {
    "react": "React",
    "react-dom": "ReactDOM"
}

• alias 模式让模块指向本地，还是会被打包进 main：

alias: {
      'react': ROOT + '/src/lib/react.min.js',
      'react-dom': ROOT + '/src/lib/react-dom.min.js',
}