Skip to content

Instantly share code, notes, and snippets.

@riskers riskers/
Last active Apr 18, 2019

What would you like to do?
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
	// ...


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

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

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


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

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

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

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


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

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

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


This comment has been minimized.

Copy link
Owner Author

riskers commented Jun 17, 2017

externals vs resolve.alias

以 React 为例,对于在 main.js 中,同样:

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

再看 html 中:

<script src=""></script>
<script src=""></script>
<script src="./main.js"></script>
<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
You can’t perform that action at this time.