Enhancement of Webpack DefinePlugin to store defined things in actual variables.
[![npm][npm]][npm-url]
[![deps][deps]][deps-url]
[![node][node]][node-url]
Enhancement of Webpack DefinePlugin to store defined things in actual variables.
define-variable-webpack-plugin relies on [webpack] 4. It will be updated as needed on major updates of webpack.
``bash`
yarn add -D define-variable-webpack-pluginor
npm i --save-dev define-variable-webpack-plugin
webpack.config
`ts
import { DefineVariablePlugin } from 'define-variable-webpack-plugin';
import { Configuration } from 'webpack';
const config: Configuration = {
// ... your webpack configuration
plugins: [
new DefineVariablePlugin({
myVar: JSON.stringify('test'),
myWindowVar: {
type: 'window', // can be: 'window', 'const' (default), 'global'
value: JSON.string('foo'),
}
}),
],
}
export default config;
`
index.ts
`ts
// fetch the actual variables instead of pure replacement
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
``
This will generate a separated chunk with declared variables, loaded on demand by you application.
Lilian Saget-Lethias |
[npm]: https://img.shields.io/npm/v/define-variable-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/define-variable-webpack-plugin
[node]: https://img.shields.io/node/v/define-variable-webpack-plugin.svg
[node-url]: https://nodejs.org
[deps]: https://img.shields.io/david/bios21/define-variable-webpack-plugin.svg
[deps-url]: https://david-dm.org/bios21/define-variable-webpack-plugin
[webpack]: https://webpack.org