Skip to content

Commit

Permalink
Added support for CSS resources.
Browse files Browse the repository at this point in the history
  • Loading branch information
BTOdell committed Apr 5, 2018
1 parent 2b661b9 commit a9930e4
Show file tree
Hide file tree
Showing 6 changed files with 13 additions and 36 deletions.
10 changes: 8 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,22 @@ URL replacement for HTML Webpack Plugin
This is an extension plugin for the [webpack](https://www.npmjs.com/package/webpack) plugin [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

Typically, [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) injects `<script>` and `<link>` elements into generated HTML.
When used with a template, [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) will still inject new elements regardless of whether or not the necessary `<script>` elements already exist.
When used with a template, [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin) will still inject new elements regardless of whether or not elements already exist for the assets.

This plugin will automatically update the URLs for existing `<script>` and `<link>` elements in an HTML template with URLs generated by Webpack.
It identifies existing elements by comparing their URLs with the generated output file name from Webpack. See Example section.

Webpack doesn't handle CSS resources natively.
However, by using some of the following plugin combinations you can make them accessible to [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin):
* copy-webpack-plugin ([npm](https://www.npmjs.com/package/copy-webpack-plugin)) ([github](https://github.com/webpack-contrib/copy-webpack-plugin)),<br>
html-webpack-include-assets-plugin ([npm](https://www.npmjs.com/package/html-webpack-include-assets-plugin)) ([github](https://github.com/jharris4/html-webpack-include-assets-plugin))
* extract-text-webpack-plugin ([npm](https://www.npmjs.com/package/extract-text-webpack-plugin)) ([github](https://github.com/webpack-contrib/extract-text-webpack-plugin)) (warning: untested)

Environment
-----------
* [node](https://nodejs.org/) >= 6.11.5

Dependencies
Peer Dependencies
------------
* webpack ([npm](https://www.npmjs.com/package/webpack)) ([github](https://github.com/webpack/webpack)) >= 4.0.0
* html-webpack-plugin ([npm](https://www.npmjs.com/package/html-webpack-plugin)) ([github](https://github.com/jantimon/html-webpack-plugin)) >= 3.2.0
Expand Down
16 changes: 1 addition & 15 deletions index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion index.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

17 changes: 1 addition & 16 deletions index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import webpack = require("webpack");
import {AsyncSeriesWaterfallHook} from "tapable";
import {Configuration} from "webpack";
import * as path from "path";
import {ParsedPath} from "path";

Expand Down Expand Up @@ -40,26 +39,12 @@ interface HTMLPluginData {

}

/**
*
* @param {string} html The input HTML string.
* @param {string[]} jsFiles
* @param {webpack.Configuration} compilerOptions
* @returns {string} The output HTML string.
*/
function replaceJS(html: string, jsFiles: string[], compilerOptions: webpack.Configuration): string {
return replace(html, jsFiles, compilerOptions, /(<script[\S\s]*?src=['"])(.+?)(['"][^>]*?>)/gi);
}

/**
*
* @param {string} html
* @param {string[]} cssFiles
* @param {webpack.Configuration} compilerOptions
* @returns {string} The output HTML string.
*/
function replaceCSS(html: string, cssFiles: string[], compilerOptions: webpack.Configuration): string {
return html;
return replace(html, cssFiles, compilerOptions, /(<link[\S\s]*?href=['"])(.+?)(['"][^>]*?>)/gi);
}

function replace(html: string, files: string[], compilerOptions: webpack.Configuration, regex: RegExp): string {
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "replace-url-html-webpack-plugin",
"version": "0.1.1",
"version": "1.0.0",
"description": "Updates the URLs for existing script (JS) and link (CSS) elements in an HTML template with URLs generated by Webpack",
"main": "index.js",
"repository": {
Expand Down

0 comments on commit a9930e4

Please sign in to comment.