fragment-loader

Getting Started

To begin, you'll need to install fragment-loader:

$ npm install fragment-loader --save-dev

Then add the loader to your webpack config. For example:

file.html

import file from 'file.html';

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /.html$/,
        use: [
          {
            loader: `fragment-loader`,
            options: {
              ...options,
            },
          },
        ],
      },
    ],
  },
};

And run webpack via your preferred method.

Options

esModule

Type: boolean Default: false

Use ES modules syntax

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: `fragment-loader`,
        options: {
          esModule: false,
        },
      },
    ],
  },
};

Examples

Use With html-loader

To use fragment-loader with html-loader, you will need another loader to evaluate the return value of html-loader, since it returns a javscript module and fragment-loader expects only a string. In this example, "execute-loader" is an installed loader that runs eval() on its content. You can make this loader yourself or find one that does this.

webpack.config.js

const path = require('path');
module.exports = {
  module: {
    rules: [
      {
        test: /\.fragment\.html$/,
        use: ['fragment-loader', 'execute-loader', 'html-loader'],
      },
    ],
  },
};

src/file.fragment.html

<h1>Hello from another file!</h1>

src/index.js

import fragment from './file.fragment.html';

// ... do whatever with this DocumentFragment,
// such as document.body.appendChild(fragment)

Add Typescript Typings

To add Typescript typings to *.html modules imported with fragment-loader, create @types/html.d.ts like below:

@types/html.d.ts

module '*.html' {
  const value: DocumentFragment;
  export default value;
}

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT