Install
- This Plugin dependent on HtmlWebpackPlugin
npm i --save-dev inject-assets-list-webpack-plugin
yarn add --dev inject-assets-list-webpack-plugin
Usage
The plugin will generate an JS array for you that includes all your webpack
assets(RawSource) in the <head>
using <script>
tags. Just add the plugin to your webpack
config as follows:
webpack.config.js
// !! HtmlWebpackPlugin requiredconst HtmlWebpackPlugin = ;const InjectAssetsListWebpackPlugin = ; moduleexports = entry: 'index.js' publicPath: '/' output: path: __dirname + '/dist' filename: 'bundle.js' plugins: ;
This will generate a file dist/index.html
containing the following
Webpack App
Assets list value format: <publicPath>name.ext
(eg. /img/banana.51a48343.png)
Options
You can pass a hash of configuration options to inject-assets-list-webpack-plugin
.
Allowed values are as follows:
Name | Type | Default | Description |
---|---|---|---|
name |
{String} |
__assets |
The name to use for the global variable |
allowPattern |
{RegExp} |
undefined | Regular expression for allow assets name |
ignorePattern |
{RegExp} |
undefined | Regular expression for ignoring assets |
Here's an example webpack config illustrating how to use these options
webpack.config.js
moduleexports = entry: 'index.js' publicPath: '/' output: path: __dirname + '/dist' filename: 'index.js' plugins: name: 'myAssets' allowPattern: /[png|jpg]/ // Allow `png`, `jpg` ignorePattern: /[gif|ttf]/ // ignoring `gif`, `ttf` files ;
Sample assets
assets
├─ img
│ ├── apple.png
│ ├── animation.gif
│ └── banana.png
│
├─ font
│ └── my-font.ttf
│
└─ content
├── post_1.jpg
├── post_2.jpg
└── post_3.jpg
Result
// in <script>var myAssets = '/img/apple.707709ec.png' '/img/banana.51a48343.png' '/content/post_1.6b60786f.jpg' '/content/post_2.26053162.jpg' '/content/post_3.a416371c.jpg';
You can uses assets list list like this.
{ Promise;} ; // 5 resource(s) loaded.
Development
# Install dependencies npm i # Build module npm run build
Changelog
1.0.3
(2020.11.09)- Remove
RawSource
filtering logic
- Remove
1.0.2
(2020.11.09)- FIXED: Combine default options at initialization
- Update README.md
1.0.1
(2020.11.09)- Add
allowPattern
option - Change
name
property to optional
- Add
1.0.0
(2020.11.09)- First Release!
Contributors
This project exists thanks to all the people who contribute.
You're free to contribute to this project by submitting issues and/or pull requests.