https://github.com/leegeunhyeok/inject-assets-list-webpack-plugin
Inject webpack assets list into your HTML template
https://github.com/leegeunhyeok/inject-assets-list-webpack-plugin
assets webpack webpack-plugin
Last synced: 3 months ago
JSON representation
Inject webpack assets list into your HTML template
- Host: GitHub
- URL: https://github.com/leegeunhyeok/inject-assets-list-webpack-plugin
- Owner: leegeunhyeok
- License: mit
- Created: 2020-11-09T04:12:05.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-09T08:52:00.000Z (over 5 years ago)
- Last Synced: 2026-03-03T16:56:44.416Z (4 months ago)
- Topics: assets, webpack, webpack-plugin
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/inject-assets-list-webpack-plugin
- Size: 69.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![npm][npm]][npm-url]
[![node][node]][node-url]
Inject Assets List Webpack Plugin
Inject assets list into your HTML template
## Install
- This Plugin dependent on [HtmlWebpackPlugin](https://github.com/jantimon/html-webpack-plugin)
```bash
npm i --save-dev inject-assets-list-webpack-plugin
```
```bash
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 `` using `` tags. Just add the plugin to your `webpack`
config as follows:
**webpack.config.js**
```js
// !! HtmlWebpackPlugin required
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectAssetsListWebpackPlugin = require('inject-assets-list-webpack-plugin');
module.exports = {
entry: 'index.js',
publicPath: '/',
output: {
path: __dirname + '/dist',
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin(), new InjectAssetsListWebpackPlugin()],
};
```
This will generate a file `dist/index.html` containing the following
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
<script type="text/javascript">
var __assets = [
'/img/apple.707709ec.png',
'/img/banana.51a48343.png',
/* Webpack assets */
];