├── .npmrc ├── .gitattributes ├── .gitignore ├── fixture ├── index.js ├── child-compiler-plugin.js └── webpack.config.js ├── .editorconfig ├── .github └── workflows │ └── main.yml ├── test.js ├── index.d.ts ├── index.js ├── license ├── package.json └── readme.md /.npmrc: -------------------------------------------------------------------------------- 1 | package-lock=false 2 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | yarn.lock 3 | -------------------------------------------------------------------------------- /fixture/index.js: -------------------------------------------------------------------------------- 1 | console.log('🦄'); 2 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = tab 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | 10 | [*.yml] 11 | indent_style = space 12 | indent_size = 2 13 | -------------------------------------------------------------------------------- /fixture/child-compiler-plugin.js: -------------------------------------------------------------------------------- 1 | export default class ChildCompilerPlugin { 2 | apply(compiler) { 3 | compiler.hooks.make.tapAsync('ChildCompilerPlugin', (compilation, callback) => { 4 | const childCompiler = compilation.createChildCompiler('ChildCompilerPlugin'); 5 | childCompiler.runAsChild(callback); 6 | }); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | - push 4 | - pull_request 5 | jobs: 6 | test: 7 | name: Node.js ${{ matrix.node-version }} 8 | runs-on: ubuntu-latest 9 | strategy: 10 | fail-fast: false 11 | matrix: 12 | node-version: 13 | - 20 14 | - 18 15 | steps: 16 | - uses: actions/checkout@v4 17 | - uses: actions/setup-node@v4 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - run: npm install 21 | - run: npm test 22 | -------------------------------------------------------------------------------- /fixture/webpack.config.js: -------------------------------------------------------------------------------- 1 | import {fileURLToPath} from 'node:url'; 2 | import path from 'node:path'; 3 | import AddAssetPlugin from '../index.js'; 4 | import ChildCompilerPlugin from './child-compiler-plugin.js'; 5 | 6 | const __dirname = path.dirname(fileURLToPath(import.meta.url)); 7 | 8 | const config = { 9 | output: { 10 | filename: 'unicorn.js', 11 | }, 12 | entry: __dirname, 13 | plugins: [ 14 | new AddAssetPlugin('rainbow.js', 'console.log("🌈")'), 15 | new AddAssetPlugin('cake.js', () => 'console.log("🎂")'), 16 | new AddAssetPlugin('cat.js', async () => 'console.log("🐈")'), 17 | new ChildCompilerPlugin(), 18 | ], 19 | }; 20 | 21 | export default config; 22 | -------------------------------------------------------------------------------- /test.js: -------------------------------------------------------------------------------- 1 | import fs from 'node:fs'; 2 | import path from 'node:path'; 3 | import test from 'ava'; 4 | import webpack from 'webpack'; 5 | import {temporaryDirectory} from 'tempy'; 6 | import pify from 'pify'; 7 | import config from './fixture/webpack.config.js'; 8 | 9 | test('main', async t => { 10 | const cwd = temporaryDirectory(); 11 | config.output.path = cwd; 12 | const stats = await pify(webpack)(config); 13 | t.false(stats.hasErrors()); 14 | t.true(fs.readFileSync(path.join(cwd, 'unicorn.js'), 'utf8').includes('🦄')); 15 | t.true(fs.readFileSync(path.join(cwd, 'rainbow.js'), 'utf8').includes('🌈')); 16 | t.true(fs.readFileSync(path.join(cwd, 'cake.js'), 'utf8').includes('🎂')); 17 | t.true(fs.readFileSync(path.join(cwd, 'cat.js'), 'utf8').includes('🐈')); 18 | }); 19 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import type {Compiler, Compilation} from 'webpack'; 2 | 3 | /** 4 | Dynamically add an asset to the webpack graph. 5 | 6 | @example 7 | ``` 8 | import AddAssetPlugin from 'add-asset-webpack-plugin'; 9 | 10 | export default { 11 | // … 12 | plugins: [ 13 | new AddAssetPlugin('file.js', ` 14 | console.log('This is a dynamically created file'); 15 | `) 16 | ] 17 | }; 18 | ``` 19 | */ 20 | declare class AddAssetPlugin { 21 | /** 22 | @param filePath - Relative file path for the asset. 23 | @param source - Asset source or a function that returns the asset source. If a function, it will receive the compilation instance. 24 | */ 25 | constructor( 26 | filePath: string, 27 | source: string | ((compilation: Compilation) => string | Promise) 28 | ); 29 | 30 | apply(compiler: Compiler): void; 31 | } 32 | 33 | export default AddAssetPlugin; 34 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import webpack from 'webpack'; 2 | 3 | const {Compilation, sources} = webpack; 4 | const {RawSource} = sources; 5 | 6 | const tapOptions = { 7 | name: 'AddAssetPlugin', 8 | stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS, 9 | }; 10 | 11 | export default class AddAssetPlugin { 12 | constructor(filePath, source) { 13 | this.filePath = filePath; 14 | this.source = source; 15 | } 16 | 17 | apply(compiler) { 18 | compiler.hooks.thisCompilation.tap('AddAssetPlugin', compilation => { 19 | compilation.hooks.processAssets.tapPromise(tapOptions, async () => { 20 | let source; 21 | if (typeof this.source === 'string') { 22 | if (compilation.getAsset(this.filePath)) { 23 | // Skip emitting the asset again because it's immutable 24 | return; 25 | } 26 | 27 | source = this.source; 28 | } else { 29 | source = await this.source(compilation); 30 | } 31 | 32 | compilation.emitAsset(this.filePath, new RawSource(source)); 33 | }); 34 | }); 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /license: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Sindre Sorhus (https://sindresorhus.com) 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "add-asset-webpack-plugin", 3 | "version": "3.1.1", 4 | "description": "Dynamically add an asset to the Webpack graph", 5 | "license": "MIT", 6 | "repository": "sindresorhus/add-asset-webpack-plugin", 7 | "funding": "https://github.com/sponsors/sindresorhus", 8 | "author": { 9 | "name": "Sindre Sorhus", 10 | "email": "sindresorhus@gmail.com", 11 | "url": "https://sindresorhus.com" 12 | }, 13 | "type": "module", 14 | "exports": { 15 | "types": "./index.d.ts", 16 | "default": "./index.js" 17 | }, 18 | "sideEffects": false, 19 | "engines": { 20 | "node": ">=18" 21 | }, 22 | "scripts": { 23 | "test": "xo && ava" 24 | }, 25 | "files": [ 26 | "index.js", 27 | "index.d.ts" 28 | ], 29 | "keywords": [ 30 | "webpack-plugin", 31 | "webpack", 32 | "add", 33 | "generate", 34 | "create", 35 | "make", 36 | "asset", 37 | "file" 38 | ], 39 | "devDependencies": { 40 | "ava": "^6.1.2", 41 | "pify": "^6.1.0", 42 | "tempy": "^3.1.0", 43 | "webpack": "^5.91.0", 44 | "xo": "^0.58.0" 45 | }, 46 | "peerDependencies": { 47 | "webpack": ">=5" 48 | }, 49 | "peerDependenciesMeta": { 50 | "webpack": { 51 | "optional": true 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # add-asset-webpack-plugin 2 | 3 | > Dynamically add an asset to the [Webpack](https://webpack.js.org) graph 4 | 5 | ## Install 6 | 7 | ```sh 8 | npm install add-asset-webpack-plugin 9 | ``` 10 | 11 | ## Usage 12 | 13 | ```js 14 | import AddAssetPlugin from 'add-asset-webpack-plugin'; 15 | 16 | export default { 17 | // … 18 | plugins: [ 19 | new AddAssetPlugin('file.js', ` 20 | console.log('This is a dynamically created file'); 21 | `) 22 | ] 23 | }; 24 | ``` 25 | 26 | ## API 27 | 28 | ### AddAssetPlugin(filePath, source) 29 | 30 | #### filePath 31 | 32 | Type: `string` 33 | 34 | Relative file path for the asset. 35 | 36 | #### source 37 | 38 | Type: `string | (compilation => string | Promise)` 39 | 40 | Asset source or a function that returns the asset source. 41 | 42 | If a function, it will receive the [`compilation` instance](https://webpack.js.org/api/compilation/). 43 | 44 | ## FAQ 45 | 46 | ### Can I import the dynamically created files? 47 | 48 | No. This plugin creates assets in the output directory, not importable modules. For virtual modules that can be imported, use [`webpack-virtual-modules`](https://github.com/sysgears/webpack-virtual-modules) instead. 49 | 50 | ## Related 51 | 52 | - [node-env-webpack-plugin](https://github.com/sindresorhus/node-env-webpack-plugin) - Simplified `NODE_ENV` handling 53 | - [add-module-exports-webpack-plugin](https://github.com/sindresorhus/add-module-exports-webpack-plugin) - Add `module.exports` for Babel and TypeScript compiled code 54 | --------------------------------------------------------------------------------