To begin, you'll need to install fragment-loader:
$ npm install fragment-loader --save-devThen 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.
Type: boolean
Default: false
Use ES modules syntax
webpack.config.js
module.exports = {
module: {
rules: [
{
loader: `fragment-loader`,
options: {
esModule: false,
},
},
],
},
};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)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;
}Please take a moment to read our contributing guidelines if you haven't yet done so.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent