``` #### `Function` You can set the `preprocessor` option as a `Function` instance. **webpack.config.js** ```js const Handlebars = require('handlebars'); module.exports = { module: { rules: [ { test: /\.hbs$/i, loader: 'html-loader', options: { preprocessor: (content, loaderContext) => { let result; try { result = Handlebars.compile(content)({ firstname: 'Value', lastname: 'OtherValue', }); } catch (error) { loaderContext.emitError(error); return content; } return result; }, }, }, ], }, }; ``` You can also set the `preprocessor` option as an asynchronous function instance. For example: **webpack.config.js** ```js const Handlebars = require('handlebars'); module.exports = { module: { rules: [ { test: /\.hbs$/i, loader: 'html-loader', options: { preprocessor: async (content, loaderContext) => { let result; try { result = await Handlebars.compile(content)({ firstname: 'Value', lastname: 'OtherValue', }); } catch (error) { await loaderContext.emitError(error); return content; } return result; }, }, }, ], }, }; ``` ### `minimize` Type: `Boolean|Object` Default: `true` in production mode, otherwise `false` Tell `html-loader` to minimize HTML. #### `Boolean` The enabled rules for minimizing by default are the following ones: ```js ({ caseSensitive: true, collapseWhitespace: true, conservativeCollapse: true, keepClosingSlash: true, minifyCSS: true, minifyJS: true, removeComments: true, removeRedundantAttributes: true, removeScriptTypeAttributes: true, removeStyleLinkTypeAttributes: true, }); ``` **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.html$/i, loader: 'html-loader', options: { minimize: true, }, }, ], }, }; ``` #### `Object` **webpack.config.js** See [html-minifier-terser](https://github.com/DanielRuf/html-minifier-terser)'s documentation for more information on the available options. The rules can be disabled using the following options in your `webpack.conf.js` **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.html$/i, loader: 'html-loader', options: { minimize: { removeComments: false, collapseWhitespace: false, }, }, }, ], }, }; ``` ### `esModule` Type: `Boolean` Default: `false` By default, `html-loader` generates JS modules that use the CommonJS modules syntax. There 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/). You can enable a ES module syntax using: **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.html$/i, loader: 'html-loader', options: { esModule: true, }, }, ], }, }; ``` ## Examples ### CDN **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.jpg$/, loader: 'file-loader' }, { test: /\.png$/, loader: 'url-loader' }, ], }, output: { publicPath: 'http://cdn.example.com/[hash]/', }, }; ``` **file.html** ```html ``` **index.js** ```js require('html-loader!./file.html'); // => '' ``` ```js require('html-loader?{"attributes":{"list":[{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html'); // => '' ``` ```js require('html-loader?{"attributes":{"list":[{"tag":"img","attribute":"src","type":"src"},{"tag":"img","attribute":"data-src","type":"src"}]}}!./file.html'); // => '' ``` ```js require('html-loader?-attributes!./file.html'); // => '' ``` > :warning: `-attributes` sets `attributes: false`. ### Process `script` and `link` tags **script.file.js** ```js console.log(document); ``` **style.file.css** ```css a { color: red; } ``` **file.html** ```html Content of the document...... ``` **webpack.config.js** ```js module.exports = { module: { rules: [ { test: /\.html$/i, use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader'], }, { test: /\.js$/i, exclude: /\.file.js$/i, loader: 'babel-loader', }, { test: /\.file.js$/i, loader: 'file-loader', }, { test: /\.css$/i, exclude: /\.file.css$/i, loader: 'css-loader', }, { test: /\.file.css$/i, loader: 'file-loader', }, ], }, }; ``` ### 'Root-relative' URLs With the same configuration as in the CDN example: **file.html** ```html ``` **scripts.js** ```js require('html-loader!./file.html'); // => '' ``` **other-scripts.js** ```js require('html-loader?{"attributes":{"root":"."}}!./file.html'); // => '' ``` ### Templating You can use any template system. Below is an example for [handlebars](https://handlebarsjs.com/). **file.hbs** ```hbs