Skip to content

Instantly share code, notes, and snippets.

@riskers
Last active April 18, 2019 09:43
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save riskers/4c90fd60177c230c0f8fd57a41578e05 to your computer and use it in GitHub Desktop.
Save riskers/4c90fd60177c230c0f8fd57a41578e05 to your computer and use it in GitHub Desktop.
webpack 应用解析

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
	// ...
}

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 返回给它。

@riskers
Copy link
Author

riskers commented Jun 17, 2017

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',
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment