diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index d5cdb23a..521c736d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -17,7 +17,7 @@ jobs:
strategy:
matrix:
- node-version: [ 14, 16, 18 ]
+ node-version: [ 16, 18, 20 ]
steps:
- name: Checkout repository
diff --git a/CHANGELOG.md b/CHANGELOG.md
index aaf8d17e..f94a2405 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,104 @@
# Change log
+## 5.0.0 (2024-02-08)
+
+> **Note**
+>
+> The `pug-plugin` since the version `5.0.0` has completely new code based on the [html-bundler-webpack-plugin](https://github.com/webdiscus/html-bundler-webpack-plugin) version `3.5.5`.
+>
+> The new version have many many new cool features, but contains some `BREAKING CHANGES`.
+
+## BREAKING CHANGES
+
+### Pug loader
+
+The Pug loader should not be defined in the `module.rules` anymore.
+The plugin add the pug loader automatically.
+Please remove the `PugPlugin.loader` from the config:
+
+```diff
+module.exports = {
+ mode: 'production',
+ output: {
+ path: path.join(__dirname, 'dist/'),
+ },
+ entry: {
+ index: './src/index.pug',
+ },
+ plugins: [
+ new PugPlugin(),
+ ],
+ module: {
+ rules: [
+- {
+- test: /\.pug$/,
+- loader: PugPlugin.loader,
+- },
+ ],
+ },
+};
+```
+
+Only if you need to define the [Pug options](https://pugjs.org/api/reference.html#options) then use the new `preprocessorOptions` plugin option:
+```diff
+module.exports = {
+ plugins: [
+ new PugPlugin({
++ preprocessorOptions: {
++ basedir: path: path.join(__dirname, 'src/'),
++ }
+ }),
+ ],
+};
+```
+
+### The `modules` option
+
+The `modules` option is removed. Use the plugin [js](https://github.com/webdiscus/html-bundler-webpack-plugin#option-js) and [css](https://github.com/webdiscus/html-bundler-webpack-plugin#option-css) options.
+Instead of the `modules.test` option you can use following:
+- [test](https://github.com/webdiscus/html-bundler-webpack-plugin#option-test) option for template extensions
+- [js.test](https://github.com/webdiscus/html-bundler-webpack-plugin#option-js) option for script extensions
+- [css.test](https://github.com/webdiscus/html-bundler-webpack-plugin#option-css) option for style extensions
+
+See new [plugin options](https://github.com/webdiscus/html-bundler-webpack-plugin#plugin-options).
+
+### Inline JS
+
+JS code can be [inlined](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-js) using the `js.inline: true` option or using the `?ìnline` query:
+```diff
+//- OLD syntax
+- script=require('./main.js?inline')
+
+//- NEW syntax
++ script(src='./main.js?inline')
+```
+
+### Inline CSS
+
+CSS code can be [inlined](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-css) using the `css.inline: true` option or using the `?ìnline` query:
+```diff
+//- OLD syntax
+- style=require('./style.css?inline' rel='stylesheet')
+
+//- NEW syntax
++ link(href='./style.css?inline' rel='stylesheet')
+```
+
+### Using require() in srcset attribute
+
+The require() function in srcset attribute works anymore.
+```diff
+//- OLD syntax
+ Note: the required file is relative to the current pug partial file, recommends to use an webpack alias
+- img(srcset=`${require('./image1.png')} 400w, ${require('@images/image2.png')} 800w` src=require('./image.png'))
+
+//- NEW syntax
+ Note: the file is relative to the main entrypoint pug file, recommends to use an webpack alias
++ img(srcset=`./image1.png 400w, @images/image2.png 800w` src='./image.png')
+```
+
+
+
## 4.9.9 (2023-08-12)
- fix: resolve filename containing a URI fragment, e.g.:
```pug
diff --git a/README.md b/README.md
index a43fbf42..dd38b5a0 100644
--- a/README.md
+++ b/README.md
@@ -7,9 +7,9 @@
Pug Plugin
+ Pug Plugin for Webpack
- Pug plugin for Webpack compiles Pug files to HTML, extracts CSS and JS from their sources specified in Pug
+ The plugin renders Pug templates with referenced source asset files into HTML
---
@@ -21,128 +21,63 @@
[](https://www.npmjs.com/package/pug-plugin)
-Pug Plugin enable to use Pug file as entry-point in Webpack. This plugin creates HTML files containing
-hashed output JS and CSS filenames whose source files are specified in the Pug template.
+## Pug template as entry point
-💡 **Highlights**:
+The **Pug Plugin** generates static HTML or [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) from **Pug template** containing source files of scripts, styles, images, fonts and other resources, similar to how it works in [Vite](https://vitejs.dev/guide/#index-html-and-project-root).
-- Pug file is the entry-point for all scripts and styles.
-- Source scripts and styles should be specified directly in Pug.
-- All JS and CSS files will be extracted from their sources specified in Pug.
-- Pug loader has built-in filters: `:escape` `:code` `:highlight` `:markdown`.
+## 💡 Highlights
-Specify the Pug files in the Webpack entry:
+- An [entry point](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry) is the Pug template.
+- **Auto processing** multiple templates in the [entry path](https://github.com/webdiscus/html-bundler-webpack-plugin#option-entry-path).
+- Allows to specify [`script`](#option-js) and [`style`](https://github.com/webdiscus/html-bundler-webpack-plugin#option-css) **source files** directly in **Pug**:
+ - `link(href="./style.scss" rel="stylesheet")`
+ - `script(src="./app.tsx" defer="defer")`
+- **Resolves** [source files](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources) in [default attributes](https://github.com/webdiscus/html-bundler-webpack-plugin#loader-option-sources-default) `href` `src` `srcset` etc. using **relative path** or **alias**:
+ - `link(href="../images/favicon.svg" type="image/svg" rel=icon)`
+ - `img(src="@images/pic.png" srcset="@images/pic400.png 1x, @images/pic800.png 2x")`
+- **Inlines** [JS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-js) and [CSS](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-css) into HTML.
+- **Inlines** [images](https://github.com/webdiscus/html-bundler-webpack-plugin#recipe-inline-image) into HTML and CSS.
+- **Compile** the Pug template into [template function](https://github.com/webdiscus/html-bundler-webpack-plugin#template-in-js) for usage in JS on the client-side.
+- Generates the [preload](https://github.com/webdiscus/html-bundler-webpack-plugin#option-preload) tags for fonts, images, video, scripts, styles, etc.
+- Generates the [integrity](https://github.com/webdiscus/html-bundler-webpack-plugin#option-integrity) attribute in the `link` and `script` tags.
+- Generates the [favicons](https://github.com/webdiscus/html-bundler-webpack-plugin#favicons-bundler-plugin) of different sizes for various platforms.
+- Built-in filters: `:escape` `:code` `:highlight` `:markdown`.
+- You can create **own plugin** using the [Plugin Hooks](https://github.com/webdiscus/html-bundler-webpack-plugin#plugin-hooks-and-callbacks).
-```js
-const PugPlugin = require('pug-plugin');
-module.exports = {
- entry: {
- // define your Pug files here
- index: './src/views/home/index.pug', // output dist/index.html
- 'route/to/page': './src/views/page/index.pug', // output dist/route/to/page.html
- },
- plugins: [
- new PugPlugin(), // rendering of Pug files defined in Webpack entry
- ],
- module: {
- rules: [
- {
- test: /.pug$/,
- loader: PugPlugin.loader, // Pug loader
- },
- ],
- },
-};
-```
-
-Add source scripts and styles directly to Pug using `require()`:
-```pug
-link(href=require('./style.scss') rel='stylesheet')
-script(src=require('./main.js') defer='defer')
-```
+See the [full list of features](https://github.com/webdiscus/html-bundler-webpack-plugin#features).
-The generated HTML contains hashed output CSS and JS filenames:
-```html
-... ")
-- enable/disable extraction of comments to `*.LICENSE.txt` file
-- support the `postprocess` for modules to handle the extracted content
-- support the [responsive-loader](https://github.com/dazuaz/responsive-loader), see [docs](https://webdiscus.github.io/pug-plugin/responsive-image/) and [usage example](https://github.com/webdiscus/pug-plugin/tree/master/examples/responsive-image)
+---
-Just one Pug plugin replaces the functionality of many plugins and loaders used with Pug:
+### 📋 [Table of Contents](https://github.com/webdiscus/html-bundler-webpack-plugin#contents)
-| Package | Features |
-|-------------------------------------------------------------------------------------------|------------------------------------------------------------------|
-| [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) | extract HTML and save in a file |
-| [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin) | extract CSS and save in a file |
-| [webpack-remove-empty-scripts](https://github.com/webdiscus/webpack-remove-empty-scripts) | remove empty JS files generated by the `mini-css-extract-plugin` |
-| [pug-loader](https://github.com/webdiscus/pug-loader) | the Pug loader is already included in the Pug plugin |
-| [style-loader](https://github.com/webpack-contrib/style-loader) | inject CSS into the DOM |
-| [resolve-url-loader](https://github.com/bholloway/resolve-url-loader) | resolve url in CSS |
-| [svg-url-loader](https://github.com/bhovhannes/svg-url-loader) | encode SVG data-URL as utf8 |
-| [posthtml-inline-svg](https://github.com/andrey-hohlov/posthtml-inline-svg) | inline SVG icons in HTML |
+### 📜 [History of Pug Plugin](#history-pug-plugin)
-> **Warning**
->
-> Don't use the `pug-plugin` together with `html-webpack-plugin` and `mini-css-extract-plugin`.\
-> The `pug-plugin` is designed to replace these plugins to make Pug easier to use and faster to compile.
+---
-Hello Pug!
-
+ Hello World!
+ Hello Pug!
- Hello Pug!
-
-
-
-
-```
-
----
-
-
-
-
My component
-
My teaser.
-
Hello Pug!
-
-
-
-
My component
-
My teaser.
-
-
Hello Pug!
-
-
-```
-
-> **Note**
->
-> To enable source map in inline CSS set the Webpack option `devtool: 'source-map'`.
-
-
-Hello World!
-
-
-```
-
-}
- */
- static files = new Map();
-
- /**
- * Unique last index for each file with same name.
- * @type {Object}
- */
- static fileIndex = {};
-
- /**
- *
- * @param {string} outputPath
- * @param {string | undefined} publicPath
- */
- static init({ outputPath, publicPath }) {
- if (typeof publicPath === 'function') {
- publicPath = publicPath.call(null, {});
- }
-
- this.outputPath = outputPath;
- this.publicPath = publicPath === undefined ? 'auto' : publicPath;
-
- // reset initial states
- this.isAutoPublicPath = false;
- this.isUrlPublicPath = false;
- this.isRelativePublicPath = false;
-
- if (this.publicPath === 'auto') {
- this.isAutoPublicPath = true;
- } else if (/^(\/\/|https?:\/\/)/i.test(this.publicPath)) {
- this.isUrlPublicPath = true;
- } else if (!this.publicPath.startsWith('/')) {
- this.isRelativePublicPath = true;
- }
- }
-
- /**
- * Reset settings.
- * This method is called before each compilation after changes by `webpack serv/watch`.
- */
- static reset() {
- this.fileIndex = {};
- this.files.clear();
- }
-
- /**
- * Get the publicPath.
- *
- * @param {string | null} assetFile The output asset filename relative by output path.
- * @return {string}
- */
- static getPublicPath(assetFile = null) {
- let isAutoRelative = assetFile && this.isRelativePublicPath && !assetFile.endsWith('.html');
-
- if (this.isAutoPublicPath || isAutoRelative) {
- if (!assetFile) return '';
-
- const fullFilename = path.resolve(this.outputPath, assetFile);
- const context = path.dirname(fullFilename);
- const publicPath = path.relative(context, this.outputPath) + '/';
-
- return isWin ? pathToPosix(publicPath) : publicPath;
- }
-
- return this.publicPath;
- }
-
- /**
- * Get the output asset file regards the publicPath.
- *
- * @param {string} assetFile The output asset filename relative by output path.
- * @param {string} issuer The output issuer filename relative by output path.
- * @return {string}
- */
- static getOutputFile(assetFile, issuer) {
- let isAutoRelative = issuer && this.isRelativePublicPath && !issuer.endsWith('.html');
-
- // if the public path is relative, then a resource using not in the template file must be auto resolved
- if (this.isAutoPublicPath || isAutoRelative) {
- if (!issuer) return assetFile;
-
- const issuerFullFilename = path.resolve(this.outputPath, issuer);
- const context = path.dirname(issuerFullFilename);
- const file = path.posix.join(this.outputPath, assetFile);
- const outputFilename = path.relative(context, file);
-
- return isWin ? pathToPosix(outputFilename) : outputFilename;
- }
-
- if (this.isUrlPublicPath) {
- const url = new URL(assetFile, this.publicPath);
- return url.href;
- }
-
- return path.posix.join(this.publicPath, assetFile);
- }
-
- /**
- * Add resolved module asset.
- * This asset can be as issuer for other resource assets.
- *
- * @param {string} sourceFile
- * @param {string} assetFile
- */
- static add(sourceFile, assetFile) {
- this.files.set(sourceFile, assetFile);
- }
-
- /**
- * Find asset file by its source file.
- *
- * @param {string} sourceFile The source file.
- * @return {string|null} The asset file.
- */
- static findAssetFile(sourceFile) {
- return this.files.get(sourceFile);
- }
-
- /**
- * Find source file by its asset file.
- *
- * @param {string} assetFile The asset file.
- * @return {string|null} The source file.
- */
- static findSourceFile(assetFile) {
- const entries = this.files.entries();
- for (let [sourceFile, value] of entries) {
- if (value === assetFile) return sourceFile;
- }
-
- return null;
- }
-
- /**
- * @param {string} sourceFile
- * @param {string} assetFile
- * @return {{isCached: boolean, filename: string}}
- */
- static getUniqueFilename(sourceFile, assetFile) {
- if (this.files.has(sourceFile)) {
- return {
- isCached: true,
- filename: this.files.get(sourceFile),
- };
- }
-
- let uniqueFilename = assetFile;
-
- if (!this.fileIndex[assetFile]) {
- this.fileIndex[assetFile] = 1;
- } else {
- const uniqId = this.fileIndex[assetFile]++;
- let pos = assetFile.lastIndexOf('.');
-
- // paranoid check of the filename extension, because it is very sensible, should normally never occur
- if (pos < 0) pos = assetFile.length;
- uniqueFilename = assetFile.slice(0, pos) + '.' + uniqId + assetFile.slice(pos);
- }
-
- this.add(sourceFile, uniqueFilename);
-
- return {
- isCached: false,
- filename: uniqueFilename,
- };
- }
-
- /**
- * @param {{__isStyle?:boolean|undefined, __isDependencyTypeUrl?:boolean|undefined, resource:string, loaders:Array<{loader:string}>}} module The Webpack chunk module.
- * Properties:} The loaders for this module.
- *
- * @return {boolean}
- */
- static isStyle(module) {
- if (module.__isStyle == null) {
- module.__isStyle = module.loaders.find((item) => item.loader.indexOf('css-loader') > 0) != null;
- }
-
- return module.__isStyle;
- }
-
- /**
- * Whether request contains the `inline` URL query param.
- *
- * TODO: compare perf with url parse.
- *
- * @param {string} request
- * @return {boolean}
- */
- static isInline(request) {
- if (!request) return false;
-
- const [, query] = request.split('?', 2);
-
- return query != null && /(?:^|&)inline(?:$|&)/.test(query);
- }
-}
-
-module.exports = Asset;
diff --git a/src/AssetCompiler.js b/src/AssetCompiler.js
deleted file mode 100644
index 4ab4c0bb..00000000
--- a/src/AssetCompiler.js
+++ /dev/null
@@ -1,969 +0,0 @@
-const vm = require('vm');
-const path = require('path');
-
-const JavascriptParser = require('webpack/lib/javascript/JavascriptParser');
-const JavascriptGenerator = require('webpack/lib/javascript/JavascriptGenerator');
-
-const { pluginName } = require('./config');
-const { isWin, pathToPosix, isFunction, toCommonJS } = require('./Utils');
-
-const { plugin, ScriptCollection } = require('./Modules');
-const extractCss = require('./Modules/extractCss');
-
-const Resolver = require('./Resolver');
-const UrlDependency = require('./UrlDependency');
-
-const Asset = require('./Asset');
-const AssetEntry = require('./AssetEntry');
-const AssetResource = require('./AssetResource');
-const AssetInline = require('./AssetInline');
-const AssetScript = require('./AssetScript');
-const AssetSource = require('./AssetSource');
-const AssetTrash = require('./AssetTrash');
-
-const {
- verboseEntry,
- verboseExtractModule,
- verboseExtractScript,
- verboseExtractResource,
- verboseExtractInlineResource,
-} = require('./Messages/Info');
-
-const {
- optionModulesException,
- executeTemplateFunctionException,
- postprocessException,
-} = require('./Messages/Exception');
-
-/** @typedef {import('webpack').Compiler} Compiler */
-/** @typedef {import('webpack').Compilation} Compilation */
-/** @typedef {import('webpack').ChunkGraph} ChunkGraph */
-/** @typedef {import('webpack').Chunk} Chunk */
-/** @typedef {import('webpack').Module} Module */
-/** @typedef {import('webpack').sources.Source} Source */
-/** @typedef {import('webpack-sources').RawSource} RawSource */
-/** @typedef {import('webpack').Configuration} Configuration */
-/** @typedef {import('webpack').PathData} PathData */
-/** @typedef {import('webpack').AssetInfo} AssetInfo */
-
-/**
- * @typedef {Object} ModuleOptions
- * @property {RegExp} test The search for a match of entry files.
- * @property {boolean} [enabled = true] Enable/disable the plugin.
- * @property {boolean} [verbose = false] Show the information at processing entry files.
- * @property {string} [sourcePath = options.context] The absolute path to sources.
- * @property {string} [outputPath = options.output.path] The output directory for an asset.
- * @property {string|function(PathData, AssetInfo): string} filename The file name of output file.
- * @property {function(string, ResourceInfo, Compilation): string|null =} postprocess The post process for extracted content from entry.
- * @property {function(sourceMaps: string, assetFile: string, compilation: Compilation): string|null =} extract
- */
-
-/**
- * @typedef {Object} ExtractJsOptions
- * @property {boolean} [verbose = false] Show the information at processing entry files.
- * @property {string|function(PathData, AssetInfo): string} [filename = '[name].js'] The file name of output file.
- */
-
-/**
- * @typedef {ModuleOptions} ModuleProps
- * @property {boolean} [`inline` = false] Whether inline CSS should contain inline source map.
- */
-
-/**
- * @typedef {Object} AssetEntryOptions
- * @property {string} name The key of webpack entry.
- * @property {string} file The output asset file with absolute path.
- * @property {string} assetFile The output asset file with relative path by webpack output path.
- * Note: the method compilation.emitAsset() use this file as key of assets object
- * and save the file relative by output path, defined in webpack.options.output.path.
- * @property {string|function(PathData, AssetInfo): string} filenameTemplate The filename template or function.
- * @property {string} filename The asset filename.
- * The template strings support only these substitutions: [name], [base], [path], [ext], [id], [contenthash], [contenthash:nn]
- * See https://webpack.js.org/configuration/output/#outputfilename
- * @property {string} request The full path of import file with query.
- * @property {string} importFile The import file only w/o query.
- * @property {string} outputPath
- * @property {string} sourcePath
- * @property {{name: string, type: string}} library Define the output a js file.
- * See https://webpack.js.org/configuration/output/#outputlibrary
- * @property {function(string, AssetInfo, Compilation): string} [postprocess = null] The post process for extracted content from entry.
- * @property {function(): string|null =} extract
- * @property {Array} resources
- * @property {boolean} [verbose = false] Show an information by handles of the entry in a postprocess.
- */
-
-/**
- * @typedef {Object} ResourceInfo
- * @property {boolean} isEntry True if is the asset from entry, false if asset is required from template.
- * @property {boolean} verbose Whether information should be displayed.
- * @property {string|(function(PathData, AssetInfo): string)} filename The filename template or function.
- * @property {string} sourceFile The absolute path to source file.
- * @property {string} outputPath The absolute path to output directory of asset.
- * @property {string} assetFile The output asset file relative by outputPath.
- */
-
-const verboseList = new Set();
-
-/** @type RawSource This objects will be assigned by plugin initialisation. */
-let RawSource, HotUpdateChunk;
-
-const issuerCache = {
- request: new Map(),
-
- add(request) {
- const [file] = request.split('?', 1);
-
- if (!this.request.has(file)) {
- this.request.set(file, new Set());
- }
-
- this.request.get(file).add(request);
- },
-
- get(file) {
- return this.request.get(file);
- },
-
- clear() {
- this.request.clear();
- },
-};
-
-class AssetCompiler {
- /** @type {PluginOptions} */
- options = {};
-
- entryLibrary = {
- name: 'return',
- type: 'jsonp', // compiles JS from source into HTML string via Function()
- };
-
- // webpack's options and modules
- webpackContext = '';
- webpackOutputPath = '';
-
- /**
- * @param {PluginOptions|{}} options
- */
- constructor(options = {}) {
- this.options = options;
- this.enabled = this.options.enabled !== false;
- this.verbose = this.options.verbose === true;
- this.watchMode = false;
-
- if (options.modules && !Array.isArray(options.modules)) {
- optionModulesException(options.modules);
- }
-
- let extractCssOptions = extractCss(options.css);
- const moduleExtractCssOptions = this.options.modules.find(
- (item) => item.test.source === extractCssOptions.test.source
- );
-
- if (moduleExtractCssOptions) {
- extractCssOptions = moduleExtractCssOptions;
- } else {
- this.options.modules.unshift(extractCssOptions);
- }
-
- this.options.extractCss = extractCssOptions;
- this.options.extractJs = options.js || {};
-
- // let know the loader that the plugin is being used
- plugin.init(this.options);
-
- // bind the instance context for using these methods as references in Webpack hooks
- this.afterProcessEntry = this.afterProcessEntry.bind(this);
- this.beforeResolve = this.beforeResolve.bind(this);
- this.afterCreateModule = this.afterCreateModule.bind(this);
- this.beforeBuildModule = this.beforeBuildModule.bind(this);
- this.renderManifest = this.renderManifest.bind(this);
- this.afterProcessAssets = this.afterProcessAssets.bind(this);
- this.filterAlternativeRequests = this.filterAlternativeRequests.bind(this);
- this.done = this.done.bind(this);
- }
-
- /**
- * Get plugin module depend on type of source file.
- *
- * @param {string} sourceFile The source file of asset.
- * @returns {ModuleOptions|undefined}
- */
- getModule(sourceFile) {
- return this.options.modules.find((module) => module.enabled !== false && module.test.test(sourceFile));
- }
-
- /**
- * Whether the source file is an entry file.
- *
- * @param {string} sourceFile
- * @return {boolean}
- */
- isEntry(sourceFile) {
- const [file] = sourceFile.split('?', 1);
- return this.options.test.test(file);
- }
-
- /**
- * Apply plugin.
- * @param {{}} compiler
- */
- apply(compiler) {
- if (!this.enabled) return;
-
- const { webpack, options } = compiler;
- const webpackOutput = options.output;
- const { extractJs } = this.options;
-
- RawSource = webpack.sources.RawSource;
- HotUpdateChunk = webpack.HotUpdateChunk;
-
- // save using webpack options
- this.webpackContext = options.context;
- this.webpackOutputPath = webpackOutput.path || path.join(__dirname, 'dist');
-
- // define js output filename
- if (!webpackOutput.filename) {
- webpackOutput.filename = '[name].js';
- }
- if (extractJs.filename) {
- webpackOutput.filename = extractJs.filename;
- } else {
- extractJs.filename = webpackOutput.filename;
- }
-
- // resolve js filename by outputPath
- if (extractJs.outputPath) {
- const filename = extractJs.filename;
-
- extractJs.filename = isFunction(filename)
- ? (pathData, assetInfo) => this.resolveOutputFilename(filename(pathData, assetInfo), extractJs.outputPath)
- : this.resolveOutputFilename(extractJs.filename, extractJs.outputPath);
-
- webpackOutput.filename = extractJs.filename;
- }
-
- Asset.init({
- outputPath: this.webpackOutputPath,
- publicPath: webpackOutput.publicPath,
- });
- AssetResource.init(compiler);
- AssetEntry.setWebpackOutputPath(this.webpackOutputPath);
-
- // clear caches by tests for webpack serve/watch
- AssetScript.clear();
- Resolver.clear();
- AssetEntry.clear();
-
- // enable library type
- const libraryType = this.entryLibrary.type;
- if (webpackOutput.enabledLibraryTypes.indexOf(libraryType) < 0) {
- webpackOutput.enabledLibraryTypes.push(libraryType);
- }
-
- if (!this.options.sourcePath) this.options.sourcePath = this.webpackContext;
- if (!this.options.outputPath) this.options.outputPath = this.webpackOutputPath;
-
- // entry options
- compiler.hooks.entryOption.tap(pluginName, this.afterProcessEntry);
-
- // after rebuild add missing dependencies from cache
- compiler.hooks.make.tapAsync(pluginName, (compilation, callback) => {
- if (this.watchMode) {
- AssetScript.optimizeDependencies();
- }
- callback();
- });
-
- // executes by watch/serve only, before the compilation
- compiler.hooks.watchRun.tap(pluginName, (compiler) => {
- this.watchMode = true;
-
- const { publicPath } = compiler.options.output;
- if (publicPath == null || publicPath === 'auto') {
- // By using watch/serve browsers not support an automatic publicPath in HMR script injected into inlined JS,
- // the output.publicPath must be an empty string.
- compiler.options.output.publicPath = '';
- }
- });
-
- // this compilation
- compiler.hooks.thisCompilation.tap(pluginName, (compilation, { normalModuleFactory, contextModuleFactory }) => {
- this.compilation = compilation;
-
- Resolver.init({
- fs: normalModuleFactory.fs.fileSystem,
- rootContext: this.webpackContext,
- });
-
- UrlDependency.init({
- fs: normalModuleFactory.fs.fileSystem,
- moduleGraph: compilation.moduleGraph,
- });
-
- AssetEntry.setCompilation(compilation);
-
- // resolve modules
- normalModuleFactory.hooks.beforeResolve.tap(pluginName, this.beforeResolve);
- contextModuleFactory.hooks.alternativeRequests.tap(pluginName, this.filterAlternativeRequests);
-
- // build modules
- normalModuleFactory.hooks.module.tap(pluginName, this.afterCreateModule);
- compilation.hooks.buildModule.tap(pluginName, this.beforeBuildModule);
- compilation.hooks.succeedModule.tap(pluginName, this.afterBuildModule);
-
- // render source code of modules
- compilation.hooks.renderManifest.tap(pluginName, this.renderManifest);
-
- // after render sources
- compilation.hooks.processAssets.tap(
- { name: pluginName, stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL },
- (assets) => {
- AssetTrash.clearCompilation(compilation);
- }
- );
-
- // postprocess for assets content
- compilation.hooks.afterProcessAssets.tap(pluginName, this.afterProcessAssets);
- });
-
- compiler.hooks.done.tap(pluginName, this.done);
- }
-
- /**
- * Called after the entry configuration from webpack options has been processed.
- *
- * @param {string} context The base directory, an absolute path, for resolving entry points and loaders from the configuration.
- * @param {Object} entries The webpack entries.
- */
- afterProcessEntry(context, entries) {
- const extensionRegexp = this.options.test;
-
- for (let name in entries) {
- const entry = entries[name];
- let { filename: filenameTemplate, sourcePath, outputPath, postprocess, extract, verbose } = this.options;
- const importFile = entry.import[0];
- let request = importFile;
- let [sourceFile] = importFile.split('?', 1);
- const module = this.getModule(sourceFile);
-
- if (!extensionRegexp.test(sourceFile) && !module) continue;
- if (!entry.library) entry.library = this.entryLibrary;
-
- if (module) {
- if (module.hasOwnProperty('verbose')) verbose = module.verbose;
- if (module.filename) filenameTemplate = module.filename;
- if (module.sourcePath) sourcePath = module.sourcePath;
- if (module.outputPath) outputPath = module.outputPath;
- if (module.postprocess) postprocess = module.postprocess;
- if (module.extract) extract = module.extract;
- }
- if (entry.filename) filenameTemplate = entry.filename;
-
- if (!path.isAbsolute(sourceFile)) {
- request = path.join(sourcePath, request);
- sourceFile = path.join(sourcePath, sourceFile);
- entry.import[0] = path.join(sourcePath, importFile);
- }
-
- /** @type {AssetEntryOptions} */
- const assetEntryOptions = {
- name,
- filenameTemplate,
- filename: undefined,
- file: undefined,
- request,
- importFile: sourceFile,
- sourcePath,
- outputPath,
- library: entry.library,
- postprocess: isFunction(postprocess) ? postprocess : null,
- extract: isFunction(extract) ? extract : null,
- verbose,
- };
-
- AssetEntry.add(entry, assetEntryOptions);
- }
- }
-
- /**
- * Called when a new dependency request is encountered.
- *
- * @param {Object} resolveData
- * @return {boolean|undefined} Return undefined to processing, false to ignore dependency.
- */
- beforeResolve(resolveData) {
- const { context, request, contextInfo } = resolveData;
- const { issuer } = contextInfo;
-
- // save requests to issuer cache
- if (!issuer) issuerCache.add(request);
-
- // ignore data-URL
- if (request.startsWith('data:')) return;
-
- if (issuer && issuer.length > 0) {
- const [requestFile] = request.split('?', 1);
- const extractCss = this.options.extractCss;
- if (extractCss.enabled && extractCss.test.test(issuer) && requestFile.endsWith('.js')) {
- // ignore runtime scripts of a loader, because a style can't have a javascript dependency
- return false;
- }
-
- const scriptFile = AssetScript.resolveFile(request);
-
- if (scriptFile) {
- return AssetScript.addDependency({
- scriptFile,
- context,
- issuer,
- filenameTemplate: this.options.extractJs.filename,
- });
- }
- }
-
- if (resolveData.dependencyType === 'url') {
- UrlDependency.resolve(resolveData);
- }
- }
-
- /**
- * Filter alternative requests.
- *
- * Entry files should not have alternative requests.
- * If the template file contains require and is compiled with `compile` method,
- * then ContextModuleFactory generate additional needless request as relative path without query.
- * Such 'alternative request' must be removed from compilation.
- *
- * @param {Array<{}>} requests
- * @param {{}} options
- * @return {Array} Returns only alternative requests not related to entry files.
- */
- filterAlternativeRequests(requests, options) {
- return requests.filter((item) => !this.isEntry(item.request));
- }
-
- /**
- * Called after a NormalModule instance is created.
- *
- * @param {Object} module
- * @param {Object} createData
- * @param {Object} resolveData
- */
- afterCreateModule(module, createData, resolveData) {
- const { type, loaders } = module;
- const { rawRequest, resource } = createData;
- const issuer = resolveData.contextInfo.issuer;
-
- if (!issuer || AssetInline.isDataUrl(rawRequest)) return;
-
- if (type === 'asset/inline' || type === 'asset') {
- AssetInline.add(resource, issuer, this.isEntry(issuer));
- }
-
- if (resolveData.dependencyType === 'url') {
- if (AssetScript.isScript(module)) return;
-
- module.__isDependencyTypeUrl = true;
- Resolver.addAsset(resource, undefined, issuer);
- }
-
- // add resolved sources in use cases:
- // - if used url() in SCSS for source assets
- // - if used import url() in CSS, like `@import url('./styles.css');`
- // - if used webpack context
- if (module.__isDependencyTypeUrl === true || loaders.length > 0 || type === 'asset/resource') {
- Resolver.addSourceFile(resource, rawRequest, issuer);
- }
- }
-
- /**
- * Called before a module build has started.
- *
- * @param {Object} module
- */
- beforeBuildModule(module) {
- if (
- module.type === 'asset/resource' &&
- (AssetScript.isScript(module) || (module.__isDependencyTypeUrl === true && Asset.isStyle(module)))
- ) {
- // set correct module type for scripts and styles when used the `html` method of a loader
- module.type = 'javascript/auto';
- module.binary = false;
- module.parser = new JavascriptParser('auto');
- module.generator = new JavascriptGenerator();
- }
- }
-
- /**
- * Called after a module has been built successfully.
- *
- * @param {Object} module The Webpack module.
- */
- afterBuildModule(module) {
- // decide asset type by webpack option parser.dataUrlCondition.maxSize
- if (module.type === 'asset') {
- module.type = module.buildInfo.dataUrl === true ? 'asset/inline' : 'asset/resource';
- }
- }
-
- /**
- * @param {Array} result
- * @param {Object} chunk
- * @param {Object} chunkGraph
- * @param {Object} outputOptions
- * @param {Object} codeGenerationResults
- */
- renderManifest(result, { chunk, chunkGraph, outputOptions, codeGenerationResults }) {
- const { compilation, verbose } = this;
-
- if (chunk instanceof HotUpdateChunk) return;
-
- const entry = AssetEntry.get(chunk.name);
-
- // process only entries supported by this plugin
- if (!entry) return;
-
- const assetModules = new Set();
- const contentHashType = 'javascript';
- const chunkModules = chunkGraph.getChunkModulesIterable(chunk);
-
- entry.filename = compilation.getPath(chunk.filenameTemplate, { contentHashType, chunk });
- AssetScript.setIssuerFilename(entry.request, entry.filename);
-
- for (const module of chunkModules) {
- const { buildInfo, resource: sourceRequest, resourceResolveData } = module;
-
- if (!sourceRequest || AssetInline.isDataUrl(sourceRequest)) continue;
-
- const inline = Asset.isInline(sourceRequest) || module.type === 'asset/source';
- const { issuer } = resourceResolveData.context;
- const [sourceFile] = sourceRequest.split('?', 1);
- let issuerFile = !issuer || this.isEntry(issuer) ? entry.importFile : issuer;
-
- if (module.type === 'javascript/auto') {
- // do nothing for scripts because webpack itself compiles and extracts JS files from scripts
- if (AssetScript.isScript(module)) {
- if (this.options.extractJs.verbose && issuerFile !== sourceFile) {
- verboseList.add({
- type: 'script',
- header: 'Extract JS',
- issuerFile,
- sourceFile,
- outputPath: this.options.extractJs.outputPath || this.webpackOutputPath,
- });
- }
- continue;
- }
-
- // entry point
- if (sourceFile === entry.importFile) {
- const source = module.originalSource();
- // break process by module builder error
- if (source == null) return;
-
- const { filename: assetFile } = entry;
-
- // Note: save full path with param queries because
- // the template request in entry can be resolved with different output paths:
- // - 'index': './index.ext' => dist/index.html
- // - 'index/de': './index.ext?lang=de' => dist/de/index.html
- Asset.add(sourceRequest, assetFile);
-
- if (verbose) {
- verboseList.add({
- type: 'entry',
- name: chunk.name,
- });
- }
-
- assetModules.add({
- inline,
- entryAsset: null,
- // resourceInfo
- isEntry: true,
- verbose: entry.verbose,
- outputPath: entry.outputPath,
- filenameTemplate: entry.filenameTemplate,
- // renderContent arguments
- source,
- sourceFile,
- sourceRequest,
- assetFile,
- pluginModule: entry,
- fileManifest: {
- filename: assetFile,
- identifier: `${pluginName}.${chunk.id}`,
- hash: chunk.contentHash[contentHashType],
- },
- });
-
- continue;
- }
-
- // asset supported via the plugin module
- const pluginModule = this.getModule(sourceFile);
- if (pluginModule == null) continue;
-
- const source = module.originalSource();
- // break process by module builder error
- if (source == null) return;
-
- // note: the `id` is
- // - in production mode as a number
- // - in development mode as a relative path
- const id = chunkGraph.getModuleId(module);
- const { name } = path.parse(sourceFile);
- const hash = buildInfo.assetInfo ? buildInfo.assetInfo.contenthash : buildInfo.hash;
- const filenameTemplate = pluginModule.filename ? pluginModule.filename : entry.filenameTemplate;
-
- /** @type {PathData} The data to generate an asset path by filenameTemplate. */
- const pathData = {
- contentHash: hash,
- chunk: {
- chunkId: chunk.id,
- id,
- name,
- hash,
- },
- filename: sourceFile,
- };
-
- const assetPath = compilation.getAssetPath(filenameTemplate, pathData);
- const { isCached, filename } = Asset.getUniqueFilename(sourceFile, assetPath);
- let assetFile = filename;
-
- // apply outputPath option for plugin module, e.g. for 'css'
- if (pluginModule.test.test(sourceFile)) {
- assetFile = this.resolveOutputFilename(assetFile, pluginModule.outputPath);
- }
-
- Resolver.addAsset(sourceRequest, assetFile, issuerFile);
-
- if (inline) {
- AssetSource.add(sourceRequest);
- }
-
- // skip already processed file assets, but all inline assets must be processed
- if (isCached && !inline) {
- continue;
- }
-
- const moduleVerbose = pluginModule.verbose || entry.verbose;
- const moduleOutputPath = pluginModule.outputPath || entry.outputPath;
-
- if (moduleVerbose) {
- verboseList.add({
- type: 'module',
- header: pluginModule.verboseHeader,
- sourceFile,
- outputPath: moduleOutputPath,
- });
- }
-
- assetModules.add({
- inline,
- entryAsset: entry.filename,
- // resourceInfo
- isEntry: false,
- verbose: moduleVerbose,
- outputPath: moduleOutputPath,
- filenameTemplate,
- // renderContent arguments
- source,
- sourceFile,
- sourceRequest,
- assetFile,
- pluginModule,
- fileManifest: {
- filename: assetFile,
- identifier: `${pluginName}.${chunk.id}.${id}`,
- hash,
- },
- });
- } else if (module.type === 'asset/resource') {
- // resource required in the template or in the CSS via url()
- AssetResource.render(module, issuerFile);
-
- if (verbose) {
- verboseList.add({
- type: module.type,
- sourceFile: sourceRequest,
- });
- }
- } else if (module.type === 'asset/inline') {
- AssetInline.render({ module, chunk, codeGenerationResults, issuerAssetFile: entry.filename });
-
- if (verbose) {
- verboseList.add({
- type: module.type,
- sourceFile: sourceRequest,
- });
- }
- } else if (module.type === 'asset/source') {
- // TODO: remove in v5.0 the usage of 'asset/source' to inline CSS,
- // because this type not support url() in inline CSS
- // and inline CSS already works via '?inline' query
- const pluginModule = this.getModule(sourceFile);
- if (pluginModule == null) continue;
-
- AssetSource.add(sourceRequest);
-
- if (verbose) {
- verboseList.add({
- type: module.type,
- sourceFile: sourceRequest,
- });
- }
-
- assetModules.add({
- inline,
- entryAsset: entry.filename,
- // postprocessInfo
- isEntry: false,
- verbose: pluginModule.verbose || entry.verbose,
- outputPath: null,
- filenameTemplate: null,
- // renderContent arguments
- source: module.originalSource(),
- sourceFile,
- sourceRequest,
- assetFile: null,
- pluginModule,
- fileManifest: {},
- });
- }
- }
-
- // render modules after collection of dependencies in all chunks
- for (let module of assetModules) {
- const { fileManifest } = module;
- const content = this.renderModule(module);
-
- if (content != null) {
- fileManifest.render = () => new RawSource(content);
- result.push(fileManifest);
- }
- }
- }
-
- /**
- * Called after the processAssets hook had finished without error.
- * @note: Only at this stage the js file has the final hashed name.
- */
- afterProcessAssets() {
- const compilation = this.compilation;
- const RawSource = compilation.compiler.webpack.sources.RawSource;
-
- if (this.options.extractComments !== true) {
- AssetTrash.removeComments(compilation);
- }
-
- AssetScript.substituteOutputFilenames(compilation);
- AssetInline.insertInlineSvg(compilation);
- AssetSource.inlineSource(compilation);
-
- for (const assetFile in compilation.assets) {
- const sourceFile = Asset.findSourceFile(assetFile) || AssetScript.findSourceFile(assetFile);
- const source = compilation.assets[assetFile].source();
- const result = this.afterProcess(compilation, { sourceFile, assetFile, source });
-
- if (result != null) {
- compilation.updateAsset(assetFile, new RawSource(result));
- }
- }
-
- // remove all unused assets from compilation
- AssetTrash.clearCompilation(compilation);
- }
-
- /**
- * Abstract method should be overridden in child class.
- *
- * @param {Compilation} compilation The instance of the webpack compilation.
- * @param {string} sourceFile The source filename of asset.
- * @param {string} assetFile The output filename of asset.
- * @param {string} source The source of compiled asset.
- * @return {string|undefined}
- * @abstract
- */
- afterProcess(compilation, { sourceFile, assetFile, source }) {}
-
- /**
- * Render the module source code generated by a loader.
- *
- * @param {string} code The source code.
- * @param {string} sourceFile The full path of source file w/o URL query.
- * @param {string} sourceRequest The full path of source file with URL query.
- * @param {string} assetFile
- * @param {ModuleProps} pluginModule
- * @return {string|null} When return null then not emit file.
- */
- renderModule({
- inline,
- entryAsset,
- source,
- sourceFile,
- sourceRequest,
- assetFile,
- isEntry,
- verbose,
- outputPath,
- filenameTemplate,
- pluginModule,
- }) {
- let code = source.source();
-
- if (!code) {
- // TODO: reproduce this case and write test
- // the source is empty when webpack config contains an error
- return null;
- }
-
- if (Buffer.isBuffer(code)) {
- code = code.toString();
- }
-
- if (code.indexOf('export default') > -1) {
- code = toCommonJS(code);
- }
-
- Resolver.setIssuer(sourceRequest, entryAsset);
-
- const contextOptions = {
- require: Resolver.require,
- // the `module.id` is required for `css-loader`, in module extractCss expected as source path
- module: { id: sourceFile },
- };
- const contextObject = vm.createContext(contextOptions);
- const script = new vm.Script(code, { filename: sourceFile });
- const compiledCode = script.runInContext(contextObject) || '';
- let content;
-
- try {
- content = isFunction(compiledCode) ? compiledCode() : compiledCode;
- } catch (error) {
- executeTemplateFunctionException(error, sourceFile, code);
- }
-
- if (pluginModule) {
- if (pluginModule.extract) {
- pluginModule.inline = inline;
- content = pluginModule.extract(content, assetFile, this.compilation);
- }
- if (pluginModule.postprocess) {
- const resourceInfo = {
- isEntry,
- verbose,
- outputPath,
- sourceFile,
- assetFile,
- filename: filenameTemplate,
- };
- try {
- content = pluginModule.postprocess(content, resourceInfo, this.compilation);
- } catch (error) {
- postprocessException(error, resourceInfo);
- }
- }
- }
-
- if (inline) {
- AssetSource.setSource(sourceRequest, entryAsset, content);
- return null;
- }
-
- return content;
- }
-
- /**
- * Execute after compilation.
- * Reset initial settings and caches by webpack serve/watch, display verbose.
- *
- * @param {Object} stats
- */
- done(stats) {
- // display verbose after rendering of all modules
- if (verboseList.size > 0) {
- for (let item of verboseList) {
- const { type, issuerFile, sourceFile, outputPath } = item;
-
- switch (type) {
- case 'entry': {
- const entry = AssetEntry.get(item.name);
- verboseEntry(entry);
- break;
- }
- case 'module': {
- const { originalAssetFile, issuers } = Resolver.data.get(sourceFile);
- verboseExtractModule({
- sourceFile,
- assetFile: originalAssetFile,
- issuers: issuers,
- outputPath,
- header: item.header,
- });
- break;
- }
- case 'script': {
- const posixSourceFile = isWin ? pathToPosix(sourceFile) : sourceFile;
- const entity = ScriptCollection.getEntity(posixSourceFile);
- verboseExtractScript({
- entity,
- outputPath,
- });
- break;
- }
- case 'asset/resource': {
- const { originalAssetFile, issuers } = Resolver.data.get(sourceFile);
- verboseExtractResource({
- sourceFile,
- assetFile: originalAssetFile,
- issuers,
- outputPath: this.webpackOutputPath,
- });
- break;
- }
- case 'asset/inline':
- verboseExtractInlineResource({
- sourceFile,
- data: AssetInline.data.get(sourceFile),
- });
- break;
- // no default
- }
- }
- }
-
- verboseList.clear();
- issuerCache.clear();
-
- Asset.reset();
- AssetEntry.reset();
- AssetScript.reset();
- AssetTrash.reset();
- Resolver.reset();
- }
-
- /**
- * @param {string} filename The output filename.
- * @param {string | null} outputPath The output path.
- * @return {string}
- */
- resolveOutputFilename(filename, outputPath) {
- if (!outputPath) return filename;
-
- let relativeOutputPath = path.isAbsolute(outputPath)
- ? path.relative(this.webpackOutputPath, outputPath)
- : outputPath;
-
- if (relativeOutputPath) {
- if (isWin) relativeOutputPath = pathToPosix(relativeOutputPath);
- filename = path.posix.join(relativeOutputPath, filename);
- }
-
- return filename;
- }
-}
-
-module.exports = AssetCompiler;
diff --git a/src/AssetEntry.js b/src/AssetEntry.js
deleted file mode 100644
index d08a089a..00000000
--- a/src/AssetEntry.js
+++ /dev/null
@@ -1,163 +0,0 @@
-const path = require('path');
-const { isFunction } = require('./Utils');
-
-class AssetEntry {
- /** @type {Map} */
- static entryMap = new Map();
- static compilationEntryNames = new Set();
-
- static compilation = null;
- static EntryPlugin = null;
-
- /**
- * @param {string} outputPath The Webpack output path.
- */
- static setWebpackOutputPath(outputPath) {
- this.webpackOutputPath = outputPath;
- }
-
- /**
- * @param {Compilation} compilation The instance of the webpack compilation.
- */
- static setCompilation(compilation) {
- this.compilation = compilation;
- this.EntryPlugin = compilation.compiler.webpack.EntryPlugin;
- }
-
- /**
- * @param {string} name The entry name.
- * @returns {AssetEntryOptions}
- */
- static get(name) {
- return this.entryMap.get(name);
- }
-
- /**
- * @param {{}} entry The webpack entry object.
- * @param {AssetEntryOptions} assetEntryOptions
- */
- static add(entry, assetEntryOptions) {
- const { name, outputPath, filenameTemplate } = assetEntryOptions;
- const relativeOutputPath = path.isAbsolute(outputPath)
- ? path.relative(this.webpackOutputPath, outputPath)
- : outputPath;
-
- entry.filename = (pathData, assetInfo) => {
- if (assetEntryOptions.filename != null) return assetEntryOptions.filename;
-
- // the `filename` property of the `PathData` type should be a source file, but in entry this property not exists
- if (pathData.filename == null) {
- pathData.filename = assetEntryOptions.importFile;
- }
-
- let filename = isFunction(filenameTemplate) ? filenameTemplate(pathData, assetInfo) : filenameTemplate;
- if (relativeOutputPath) {
- filename = path.posix.join(relativeOutputPath, filename);
- }
- assetEntryOptions.filename = filename;
-
- return filename;
- };
-
- this.entryMap.set(name, assetEntryOptions);
- }
-
- /**
- * Add a script to webpack compilation.
- *
- * @param {string} name
- * @param {string} importFile
- * @param {string} filenameTemplate
- * @param {string} context
- * @param {string} issuer
- * @return {boolean} Return true if new file was added, if a file exists then return false.
- */
- static addToCompilation({ name, importFile, filenameTemplate, context, issuer }) {
- // skip duplicate entries
- if (this.inEntry(name, importFile)) return false;
-
- const entry = {
- name,
- runtime: undefined,
- layer: undefined,
- dependOn: undefined,
- baseUri: undefined,
- publicPath: undefined,
- chunkLoading: undefined,
- asyncChunks: undefined,
- wasmLoading: undefined,
- library: undefined,
- };
-
- /** @type {AssetEntryOptions} */
- const assetEntryOptions = {
- name,
- filenameTemplate,
- filename: undefined,
- file: undefined,
- importFile,
- sourcePath: context,
- outputPath: this.webpackOutputPath,
- postprocess: undefined,
- extract: undefined,
- verbose: false,
- };
-
- this.add(entry, assetEntryOptions);
- this.compilationEntryNames.add(name);
-
- // adds the entry of the script from the template to the compilation
- // see reference: node_modules/webpack/lib/EntryPlugin.js
- const entryDependency = this.EntryPlugin.createDependency(importFile, { name });
- this.compilation.addEntry(context, entryDependency, entry, (err) => {
- if (err) throw new Error(err);
- });
-
- return true;
- }
-
- /**
- * Whether the entry is unique.
- *
- * @param {string} name The name of the entry.
- * @param {string} file The source file.
- * @return {boolean}
- */
- static isUnique(name, file) {
- const entry = this.entryMap.get(name);
- return !entry || entry.importFile === file;
- }
-
- /**
- * Whether the file in the entry already exists.
- *
- * @param {string} name The name of the entry.
- * @param {string} file The source file.
- * @return {boolean}
- */
- static inEntry(name, file) {
- const entry = this.entryMap.get(name);
- return entry && entry.importFile === file;
- }
-
- /**
- * Clear caches.
- * This method is called only once, when the plugin is applied.
- */
- static clear() {
- this.entryMap.clear();
- }
-
- /**
- * Remove entries added not via webpack entry.
- * This method is called before each compilation after changes by `webpack serv/watch`.
- */
- static reset() {
- for (const entryName of this.compilationEntryNames) {
- this.entryMap.delete(entryName);
- }
- this.compilationEntryNames.clear();
- }
-}
-
-module.exports = AssetEntry;
diff --git a/src/AssetInline.js b/src/AssetInline.js
deleted file mode 100644
index 8ae5b0aa..00000000
--- a/src/AssetInline.js
+++ /dev/null
@@ -1,292 +0,0 @@
-const path = require('path');
-const { isWin } = require('./Utils');
-
-/**
- * @param {{key: string, value: string}} attrs
- * @param {Array} exclude The list of excluded attributes from result.
- * @return {string}
- */
-const attrsToString = (attrs, exclude = []) => {
- let res = '';
- for (const key in attrs) {
- if (exclude.indexOf(key) < 0) {
- res += ` ${key}="${attrs[key]}"`;
- }
- }
-
- return res;
-};
-
-/**
- * Parse tag attributes in a tag string.
- *
- * @param {string} string
- * @returns {Object} The parsed attributes as object key:value.
- */
-const parseAttributes = (string) => {
- let attrs = {};
- const matches = string.matchAll(/([^\s]+)="(.+?)"/gm);
- for (const [, key, val] of matches) {
- attrs[key] = val;
- }
-
- return attrs;
-};
-
-/**
- * Parse values in HTML.
- *
- * @param {string} content The HTML content.
- * @param {string} value The value to parse.
- * @return {Array<{value: string, attrs: {}, tagStartPos: number, tagEndPos: number, valueStartPos: number, valueEndPos: number}>}
- */
-const parseValues = (content, value) => {
- const valueLen = value.length;
- let valueStartPos = 0;
- let valueEndPos = 0;
- let result = [];
-
- while ((valueStartPos = content.indexOf(value, valueStartPos)) >= 0) {
- valueEndPos = valueStartPos + valueLen;
-
- let tagStartPos = valueStartPos;
- let tagEndPos = content.indexOf('>', valueEndPos) + 1;
- while (tagStartPos >= 0 && content.charAt(--tagStartPos) !== '<') {}
-
- result.push({
- value,
- attrs: parseAttributes(content.slice(tagStartPos, tagEndPos)),
- tagStartPos,
- tagEndPos,
- valueStartPos,
- valueEndPos,
- });
-
- valueStartPos = valueEndPos;
- }
-
- return result;
-};
-
-const comparePos = (a, b) => a.valueStartPos - b.valueStartPos;
-
-class AssetInline {
- static data = new Map();
- static inlineSvgIssueAssets = new Set();
-
- /**
- * Whether the request is data-URL.
- *
- * @param {string} request The request of asset.
- * @returns {boolean}
- */
- static isDataUrl(request) {
- return request.startsWith('data:');
- }
-
- /**
- * @param {string} sourceFile
- * @param {string} issuer
- * @returns {boolean}
- */
- static isInlineSvg(sourceFile, issuer) {
- const item = this.data.get(sourceFile);
- return item != null && item.cache != null && item.inlineSvg && item.inlineSvg.issuers.has(issuer);
- }
-
- /**
- * @param {string} request
- * @return {boolean}
- */
- static isSvgFile(request) {
- const [file] = request.split('?', 1);
- return file.endsWith('.svg');
- }
-
- /**
- * @param {string} sourceFile
- * @param {string} issuer
- * @returns {string|null}
- */
- static getDataUrl(sourceFile, issuer) {
- if (isWin) sourceFile = path.win32.normalize(sourceFile);
- const item = this.data.get(sourceFile);
-
- return item != null && item.cache != null && item.dataUrl.issuers.has(issuer) ? item.cache.dataUrl : null;
- }
-
- /**
- * @param {string} sourceFile The source filename of asset.
- * @param {string} issuer The output filename of the issuer.
- * @param {boolean} isEntry Whether the issuer is an entry file.
- */
- static add(sourceFile, issuer, isEntry) {
- if (!this.data.has(sourceFile)) {
- this.data.set(sourceFile, {
- cache: null,
- });
- }
- const item = this.data.get(sourceFile);
-
- if (isEntry && this.isSvgFile(sourceFile)) {
- // SVG can only be inlined in HTML, in CSS it's a data URL
- if (!item.inlineSvg) {
- item.inlineSvg = {
- issuers: new Set(),
- assets: new Set(),
- };
- }
- item.inlineSvg.issuers.add(issuer);
- } else {
- if (!item.dataUrl) {
- item.dataUrl = {
- issuers: new Set(),
- };
- }
- item.dataUrl.issuers.add(issuer);
- }
- }
-
- /**
- * @param {Chunk} chunk The Webpack chunk.
- * @param {Module} module The Webpack module.
- * @param {CodeGenerationResults|Object} codeGenerationResults Code generation results of resource modules.
- * @param {string} issuerAssetFile The output filename of issuer.
- */
- static render({ module, chunk, codeGenerationResults, issuerAssetFile }) {
- const sourceFile = module.resource;
- const item = this.data.get(sourceFile);
-
- if (!item) return;
-
- if (this.isSvgFile(sourceFile)) {
- // extract SVG content from processed source via a loader like svgo-loader
- const svg = module.originalSource().source().toString();
-
- // svg is inline in html only, in css is as data URL
- if (item.inlineSvg) {
- item.inlineSvg.assets.add(issuerAssetFile);
- this.inlineSvgIssueAssets.add(issuerAssetFile);
- }
-
- if (item.cache == null) {
- item.cache = this.parseSvg(svg);
- }
- } else if (item.cache == null) {
- // data URL for binary resource
- const dataUrl = codeGenerationResults.getData(module, chunk.runtime, 'url').toString();
- item.cache = { dataUrl };
- }
- }
-
- /**
- * @param {string} svg The SVG content.
- * @return {{dataUrl: string, svgAttrs: Object, innerSVG: string}}
- */
- static parseSvg(svg) {
- const svgOpenTag = ' 0) {
- // extract SVG content only, ignore xml tag and comments before SVG tag
- svg = svg.slice(svgOpenTagStartPos, svgCloseTagPos + svgCloseTag.length);
- }
-
- // parse SVG attributes and extract inner content of SVG
- const svgAttrsStartPos = svgOpenTag.length;
- const svgAttrsEndPos = svg.indexOf('>', svgAttrsStartPos);
- const svgAttrsString = svg.slice(svgAttrsStartPos, svgAttrsEndPos);
- const svgAttrs = parseAttributes(svgAttrsString, ['id', 'version', 'xml', 'xmlns']);
- const innerSVG = svg.slice(svgAttrsEndPos + 1, svgCloseTagPos - svgOpenTagStartPos);
-
- // encode reserved chars in data URL for IE 9-11 (enable if needed)
- // const reservedChars = /["#%{}<>]/g;
- // const charReplacements = {
- // '"': "'",
- // '#': '%23',
- // '%': '%25',
- // '{': '%7B',
- // '}': '%7D',
- // '<': '%3C',
- // '>': '%3E',
- // };
-
- // encode reserved chars in data URL for modern browsers
- const reservedChars = /["#]/g;
- const charReplacements = {
- '"': "'",
- '#': '%23',
- };
- const replacer = (char) => charReplacements[char];
- // note: don't have to encode as base64, pure svg is smaller
- const dataUrl = 'data:image/svg+xml,' + svg.replace(/\s+/g, ' ').replace(reservedChars, replacer);
-
- return {
- svgAttrs,
- innerSVG,
- dataUrl,
- };
- }
-
- /**
- * Insert inline SVG in HTML.
- * Replacing a tag containing the svg source file with the svg element.
- *
- * @param {Compilation} compilation The instance of the webpack compilation.
- */
- static insertInlineSvg(compilation) {
- if (this.inlineSvgIssueAssets.size === 0) return;
-
- const RawSource = compilation.compiler.webpack.sources.RawSource;
-
- for (const assetFile of this.inlineSvgIssueAssets) {
- const asset = compilation.assets[assetFile];
- if (!asset) continue;
-
- const html = asset.source();
- const headStartPos = html.indexOf('', headStartPos);
- const hasHead = headStartPos >= 0 && headEndPos > headStartPos;
- let results = [];
-
- // parse all inline SVG images in HTML
- for (let [sourceFile, item] of this.data) {
- if (!item.inlineSvg || !item.inlineSvg.assets.has(assetFile)) continue;
- results = [...results, ...parseValues(html, sourceFile)];
- }
- results.sort(comparePos);
-
- // compile parsed data to HTML with inlined SVG
- const excludeAttrs = ['src', 'href', 'xmlns', 'alt'];
- let output = '';
- let pos = 0;
-
- for (let { value, attrs, tagStartPos, tagEndPos, valueStartPos, valueEndPos } of results) {
- const { cache } = this.data.get(value);
-
- if (hasHead && tagStartPos < headEndPos) {
- // in head inline as data URL
- output += html.slice(pos, valueStartPos) + cache.dataUrl;
- pos = valueEndPos;
- } else {
- // in body inline as SVG tag
- attrs = { ...cache.svgAttrs, ...attrs };
- const attrsString = attrsToString(attrs, [...excludeAttrs, 'title']);
- const titleStr = 'title' in attrs ? attrs['title'] : 'alt' in attrs ? attrs['alt'] : null;
- const title = titleStr ? `${titleStr} ` : '';
- const inlineSvg = `${title}${cache.innerSVG}`;
-
- output += html.slice(pos, tagStartPos) + inlineSvg;
- pos = tagEndPos;
- }
- }
-
- output += html.slice(pos);
- compilation.assets[assetFile] = new RawSource(output);
- }
- }
-}
-
-module.exports = AssetInline;
diff --git a/src/AssetResource.js b/src/AssetResource.js
deleted file mode 100644
index aa618f99..00000000
--- a/src/AssetResource.js
+++ /dev/null
@@ -1,56 +0,0 @@
-const AssetTrash = require('./AssetTrash');
-const Resolver = require('./Resolver');
-
-// supports for responsive-loader
-const ResponsiveLoader = require('./Extras/ResponsiveLoader');
-
-class AssetResource {
- /**
- * @param {Object} compiler The webpack compiler object.
- */
- static init(compiler) {
- // initialize responsible-loader module
- ResponsiveLoader.init(compiler);
- }
-
- /**
- * @param {Object} module The Webpack module.
- * @param {string} issuer The issuer of module resource.
- */
- static render(module, issuer) {
- const { buildInfo, resource } = module;
- let assetFile = buildInfo.filename;
-
- // resolve SVG filename with fragment, like './icons.svg#home'
- if (resource.indexOf('.svg#') > 0) {
- if (assetFile.indexOf('.svg#') > 0) {
- // fix save file name when filename in Webpack config is like '[name][ext][fragment]'
- const [file] = assetFile.split('#');
- buildInfo.filename = file;
- } else {
- // fix output asset filename used in HTML
- const [, fragment] = resource.split('#');
- assetFile += `#${fragment}`;
- }
- }
-
- // try to get asset file processed via responsive-loader
- const asset = ResponsiveLoader.getAsset(module, issuer);
-
- if (asset != null) {
- Resolver.addResolvedAsset(resource, asset, issuer);
-
- // save a module and handler for asset that may be used in many styles
- Resolver.setModuleHandler(resource, (originalAssetFile, issuer) => ResponsiveLoader.getAsset(module, issuer));
-
- // remove an original asset filename generated by Webpack, because responsive-loader generates own filename
- AssetTrash.add(assetFile);
- return;
- }
-
- // save an asset file that may be used in many files
- Resolver.addAsset(resource, assetFile, issuer);
- }
-}
-
-module.exports = AssetResource;
diff --git a/src/AssetScript.js b/src/AssetScript.js
deleted file mode 100644
index 641ce5e9..00000000
--- a/src/AssetScript.js
+++ /dev/null
@@ -1,299 +0,0 @@
-const path = require('path');
-const AssetEntry = require('./AssetEntry');
-const AssetTrash = require('./AssetTrash');
-const Asset = require('./Asset');
-const { ScriptCollection } = require('./Modules');
-const { isWin, pathToPosix } = require('./Utils');
-
-class AssetScript {
- static index = {};
- static dependenciesCache = new Map();
-
- /**
- * Clear cache.
- * Called only once, when the plugin is applied.
- */
- static clear() {
- this.index = {};
- this.dependenciesCache.clear();
- ScriptCollection.clear();
- }
-
- /**
- * Reset settings.
- * Called before each compilation after changes by `webpack serv/watch`.
- */
- static reset() {
- this.index = {};
- ScriptCollection.reset();
- }
-
- /**
- * Add dependency to cache.
- * After rebuild the scripts loaded from node modules will be added to compilation from the cache.
- * Called after AssetScript.optimizeDependencies.
- *
- * @param {string} scriptFile
- * @param {string} context
- * @param {string} issuer
- * @param {string} filenameTemplate
- * @return {boolean|undefined}
- */
- static addDependency({ scriptFile, context, issuer, filenameTemplate }) {
- if (this.dependenciesCache.has(scriptFile)) {
- // skip already added dependencies by optimizeDependencies
- return;
- }
-
- const name = this.getUniqueName(scriptFile);
- const entry = {
- name,
- importFile: scriptFile,
- filenameTemplate,
- context,
- issuer,
- };
-
- ScriptCollection.setName(scriptFile, name);
-
- if (AssetEntry.addToCompilation(entry)) {
- this.dependenciesCache.set(scriptFile, entry);
- return;
- }
-
- return false;
- }
-
- /**
- * Add missing node modules to compilation after rebuild.
- * Called before AssetScript.addDependency.
- */
- static optimizeDependencies() {
- for (const entry of this.dependenciesCache.values()) {
- AssetEntry.addToCompilation(entry);
- }
- }
-
- /**
- * @param {{__isScript?:boolean|undefined, resource:string}} module The Webpack chunk module.
- * Properties:Home
-
- 
+ 
```
-> **Warning**
->
-> - Don't define scripts and styles in the Webpack entry. Use `require()` to load source files in Pug.
-> - Don't import styles in JavaScript.
-> - Don't use `html-webpack-plugin` to render Pug files in HTML. The Pug plugin compiles the files defined in the Webpack entry.
-> - Don't use `mini-css-extract-plugin` to extract CSS from styles. The Pug plugin extract CSS from styles required in Pug.
-
-
-## Plugin options
-
-### `enabled`
-Type: `boolean` Default: `true`
-
-
-
-```
-
-All this is done by one Pug plugin, without additional plugins and loaders. To save build time, to keep your Webpack config clear and clean, just use this plugin.
-
----
-
-
-
-### Using Pug in JavaScript with `render` method
-
-_./webpack.config.js_
-```js
-const path = require('path');
-const PugPlugin = require('pug-plugin');
-module.exports = {
- output: {
- path: path.join(__dirname, 'dist/'),
- },
- entry: {
- index: './src/index.pug' // => dist/index.html
- },
- plugins: [
- new PugPlugin({
- js: {
- filename: '[name].[contenthash:8].js',
- },
- }),
- ],
- module: {
- rules: [
- {
- test: /\.pug$/,
- loader: PugPlugin.loader,
- },
- ],
- },
-};
-```
-
-_./src/index.pug_
-```pug
-html
- head
- body
- h1 Hello Pug!
- #js-component-container
- script(src=require('./component.js'))
-```
-
-_./src/component.pug_
-```pug
-.component
- h1 Title
- p The teaser.
-```
-
-_./src/component.js_
-```js
-import componentHtml from './component.pug';
-const containerElm = document.getElementById('js-component-container');
-containerElm.innerHTML = componentHtml;
-```
-
-The `componentHtml` contain rendered HTML string:
-```html
-