{{firstname}} {{lastname}}
\n![\"alt\"](\"image.png\")
\n\n```\n\n#### `Function`\n\nYou can set the `preprocessor` option as a `Function` instance.\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require('handlebars');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.hbs$/i,\n loader: 'html-loader',\n options: {\n preprocessor: (content, loaderContext) => {\n let result;\n\n try {\n result = Handlebars.compile(content)({\n firstname: 'Value',\n lastname: 'OtherValue',\n });\n } catch (error) {\n loaderContext.emitError(error);\n\n return content;\n }\n\n return result;\n },\n },\n },\n ],\n },\n};\n```\n\nYou can also set the `preprocessor` option as an asynchronous function instance.\n\nFor example:\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require('handlebars');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.hbs$/i,\n loader: 'html-loader',\n options: {\n preprocessor: async (content, loaderContext) => {\n let result;\n\n try {\n result = await Handlebars.compile(content)({\n firstname: 'Value',\n lastname: 'OtherValue',\n });\n } catch (error) {\n await loaderContext.emitError(error);\n\n return content;\n }\n\n return result;\n },\n },\n },\n ],\n },\n};\n```\n\n### `minimize`\n\nType: `Boolean|Object`\nDefault: `true` in production mode, otherwise `false`\n\nTell `html-loader` to minimize HTML.\n\n#### `Boolean`\n\nThe enabled rules for minimizing by default are the following ones:\n\n- `collapseWhitespace`\n- `conservativeCollapse`\n- `keepClosingSlash`\n- `minifyCSS`\n- `minifyJS`\n- `removeAttributeQuotes`\n- `removeComments`\n- `removeScriptTypeAttributes`\n- `removeStyleTypeAttributes`\n- `useShortDoctype`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n loader: 'html-loader',\n options: {\n minimize: true,\n },\n },\n ],\n },\n};\n```\n\n#### `Object`\n\n**webpack.config.js**\n\nSee [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)'s documentation for more information on the available options.\n\nThe rules can be disabled using the following options in your `webpack.conf.js`\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n loader: 'html-loader',\n options: {\n minimize: {\n removeComments: false,\n collapseWhitespace: false,\n },\n },\n },\n ],\n },\n};\n```\n\n### `esModule`\n\nType: `Boolean`\nDefault: `false`\n\nBy default, `html-loader` generates JS modules that use the CommonJS modules syntax.\nThere are some cases in which using ES modules is beneficial, like in the case of [module concatenation](https://webpack.js.org/plugins/module-concatenation-plugin/) and [tree shaking](https://webpack.js.org/guides/tree-shaking/).\n\nYou can enable a ES module syntax using:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n loader: 'html-loader',\n options: {\n esModule: true,\n },\n },\n ],\n },\n};\n```\n\n## Examples\n\n### CDN\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n { test: /\\.jpg$/, loader: 'file-loader' },\n { test: /\\.png$/, loader: 'url-loader' },\n ],\n },\n output: {\n publicPath: 'http://cdn.example.com/[hash]/',\n },\n};\n```\n\n**file.html**\n\n```html\n![](\"image.jpg\")
\n```\n\n**index.js**\n\n```js\nrequire('html-loader!./file.html');\n\n// => '![](\"http://cdn.example.com/49eba9f/a992ca.jpg\")
'\n```\n\n```js\nrequire('html-loader?{\"attributes\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// => ''\n```\n\n```js\nrequire('html-loader?{\"attributes\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"src\",\"type\":\"src\"},{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// => ''\n```\n\n```js\nrequire('html-loader?-attributes!./file.html');\n\n// => ''\n```\n\n> :warning: `-attributes` sets `attributes: false`.\n\n### Process `script` and `link` tags\n\n**script.file.js**\n\n```js\nconsole.log(document);\n```\n\n**style.file.css**\n\n```css\na {\n color: red;\n}\n```\n\n**file.html**\n\n```html\n\n\n \n \n Title of the document \n \n \n \n Content of the document......\n \n \n\n```\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],\n },\n {\n test: /\\.js$/i,\n exclude: /\\.file.js$/i,\n loader: 'babel-loader',\n },\n {\n test: /\\.file.js$/i,\n loader: 'file-loader',\n },\n {\n test: /\\.css$/i,\n exclude: /\\.file.css$/i,\n loader: 'css-loader',\n },\n {\n test: /\\.file.css$/i,\n loader: 'file-loader',\n },\n ],\n },\n};\n```\n\n### 'Root-relative' URLs\n\nWith the same configuration as in the CDN example:\n\n**file.html**\n\n```html\n![](\"/image.jpg\")
\n```\n\n**scripts.js**\n\n```js\nrequire('html-loader!./file.html');\n\n// => ''\n```\n\n**other-scripts.js**\n\n```js\nrequire('html-loader?{\"attributes\":{\"root\":\".\"}}!./file.html');\n\n// => ''\n```\n\n### Templating\n\nYou can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/).\n\n**file.hbs**\n\n```hbs\n
![](\"image2x.png\")
\n```\n\n**index.js**\n\n```js\nrequire('html-loader!./file.html');\n\n// => ''\n```\n\n```js\nrequire('html-loader?{\"attributes\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// => ''\n```\n\n```js\nrequire('html-loader?{\"attributes\":{\"list\":[{\"tag\":\"img\",\"attribute\":\"src\",\"type\":\"src\"},{\"tag\":\"img\",\"attribute\":\"data-src\",\"type\":\"src\"}]}}!./file.html');\n\n// => ''\n```\n\n```js\nrequire('html-loader?-attributes!./file.html');\n\n// => ''\n```\n\n> :warning: `-attributes` sets `attributes: false`.\n\n### Process `script` and `link` tags\n\n**script.file.js**\n\n```js\nconsole.log(document);\n```\n\n**style.file.css**\n\n```css\na {\n color: red;\n}\n```\n\n**file.html**\n\n```html\n\n\n \n \n \n```\n\n**scripts.js**\n\n```js\nrequire('html-loader!./file.html');\n\n// => ''\n```\n\n**other-scripts.js**\n\n```js\nrequire('html-loader?{\"attributes\":{\"root\":\".\"}}!./file.html');\n\n// => ''\n```\n\n### Templating\n\nYou can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/).\n\n**file.hbs**\n\n```hbs\n\n \n
{{firstname}} {{lastname}}
\n\n\n```\n\n**webpack.config.js**\n\n```js\nconst Handlebars = require('handlebars');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.hbs$/i,\n loader: 'html-loader',\n options: {\n preprocessor: (content, loaderContext) => {\n let result;\n\n try {\n result = Handlebars.compile(content)({\n firstname: 'Value',\n lastname: 'OtherValue',\n });\n } catch (error) {\n loaderContext.emitError(error);\n\n return content;\n }\n\n return result;\n },\n },\n },\n ],\n },\n};\n```\n\n### PostHTML\n\nYou can use [PostHTML](https://github.com/posthtml/posthtml) without any additional loaders.\n\n**file.html**\n\n```html\n\n```\n\n**webpack.config.js**\n\n```js\nconst posthtml = require('posthtml');\nconst posthtmlWebp = require('posthtml-webp');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.hbs$/i,\n loader: 'html-loader',\n options: {\n preprocessor: (content, loaderContext) => {\n let result;\n\n try {\n result = posthtml().use(plugin).process(content, { sync: true });\n } catch (error) {\n loaderContext.emitError(error);\n\n return content;\n }\n\n return result.html;\n },\n },\n },\n ],\n },\n};\n```\n\n### Export into HTML files\n\nA very common scenario is exporting the HTML into their own _.html_ file, to\nserve them directly instead of injecting with javascript. This can be achieved\nwith a combination of 3 loaders:\n\n- [file-loader](https://github.com/webpack/file-loader)\n- [extract-loader](https://github.com/peerigon/extract-loader)\n- html-loader\n\nThe html-loader will parse the URLs, require the images and everything you\nexpect. The extract loader will parse the javascript back into a proper html\nfile, ensuring images are required and point to proper path, and the file loader\nwill write the _.html_ file for you. Example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],\n },\n ],\n },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/html-loader.svg\n[npm-url]: https://npmjs.com/package/html-loader\n[node]: https://img.shields.io/node/v/html-loader.svg\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/webpack-contrib/html-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/html-loader\n[tests]: https://github.com/webpack-contrib/html-loader/workflows/html-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/html-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/html-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/html-loader\n[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[size]: https://packagephobia.now.sh/badge?p=html-loader\n[size-url]: https://packagephobia.now.sh/result?p=html-loader\n","readmeFilename":"README.md"}
\n```\n\n**webpack.config.js**\n\n```js\nconst posthtml = require('posthtml');\nconst posthtmlWebp = require('posthtml-webp');\n\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.hbs$/i,\n loader: 'html-loader',\n options: {\n preprocessor: (content, loaderContext) => {\n let result;\n\n try {\n result = posthtml().use(plugin).process(content, { sync: true });\n } catch (error) {\n loaderContext.emitError(error);\n\n return content;\n }\n\n return result.html;\n },\n },\n },\n ],\n },\n};\n```\n\n### Export into HTML files\n\nA very common scenario is exporting the HTML into their own _.html_ file, to\nserve them directly instead of injecting with javascript. This can be achieved\nwith a combination of 3 loaders:\n\n- [file-loader](https://github.com/webpack/file-loader)\n- [extract-loader](https://github.com/peerigon/extract-loader)\n- html-loader\n\nThe html-loader will parse the URLs, require the images and everything you\nexpect. The extract loader will parse the javascript back into a proper html\nfile, ensuring images are required and point to proper path, and the file loader\nwill write the _.html_ file for you. Example:\n\n**webpack.config.js**\n\n```js\nmodule.exports = {\n module: {\n rules: [\n {\n test: /\\.html$/i,\n use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'],\n },\n ],\n },\n};\n```\n\n## Contributing\n\nPlease take a moment to read our contributing guidelines if you haven't yet done so.\n\n[CONTRIBUTING](./.github/CONTRIBUTING.md)\n\n## License\n\n[MIT](./LICENSE)\n\n[npm]: https://img.shields.io/npm/v/html-loader.svg\n[npm-url]: https://npmjs.com/package/html-loader\n[node]: https://img.shields.io/node/v/html-loader.svg\n[node-url]: https://nodejs.org\n[deps]: https://david-dm.org/webpack-contrib/html-loader.svg\n[deps-url]: https://david-dm.org/webpack-contrib/html-loader\n[tests]: https://github.com/webpack-contrib/html-loader/workflows/html-loader/badge.svg\n[tests-url]: https://github.com/webpack-contrib/html-loader/actions\n[cover]: https://codecov.io/gh/webpack-contrib/html-loader/branch/master/graph/badge.svg\n[cover-url]: https://codecov.io/gh/webpack-contrib/html-loader\n[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg\n[chat-url]: https://gitter.im/webpack/webpack\n[size]: https://packagephobia.now.sh/badge?p=html-loader\n[size-url]: https://packagephobia.now.sh/result?p=html-loader\n","readmeFilename":"README.md"}