define-variable-webpack-plugin v 1.0.1
增强了Webpack DefinePlugin在实际变量中存储定义的内容。
前置条件
本插件依赖Webpack 4，它将随 webpack 主版本进行更新。
安装
yarn add -D define-variable-webpack-plugin
# 或
npm i --save-dev define-variable-webpack-plugin
1
2
3
2
3
使用
下面的例子是基于 TypeScript 的应用的示例，供您参考。
webpack.config.ts
import { DefineVariablePlugin } from 'define-variable-webpack-plugin';
import { Configuration } from 'webpack';
const config: Configuration = {
// ... 您的 webpack 配置
plugins: [
new DefineVariablePlugin({
myVar: JSON.stringify('test'),
myWindowVar: {
type: 'window', // 可以为 'window', 'const' (默认), 'global'
value: JSON.string('foo'),
}
}),
],
}
export default config;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
index.ts
// 取回实际的变量，而非纯粹的替换
import { dynamicImporter } from 'define-variable-webpack-plugin/dynamicImporter';
console.log(dynamicImporter.myVar); // 'test'
console.log(Object.entries(dynamicImporter)) // [ ['myVar', 'test'] ]
console.log(window.myWindowVar); // 'foo'
console.log('myWindowVar' in window); // true
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
这将生成一个带有已声明变量的独立代码块，按需加载。