webpack 将一些 html 文件加载到 index.html 中（比如 web 组件）

Question

我想将我的项目文件分成多个文件。使用 sass 和 JavaScript 导入，我可以只对样式和脚本执行此操作。

但我也想分开 HTML 个文件。我不使用任何框架，只使用 webpack。

根据 webpack 文档，我们可以通过插值来做到这一点 https://webpack.js.org/loaders/html-loader/#interpolation

require("html-loader?interpolate!./file.html");

<div>${require('./components/gallery.html')}</div>

但是我得到了错误：

Cannot find module 'html-loader?interpolate!./file.html'

我的 webpack 配置：

const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const webpack = require('webpack');
require("html-loader?interpolate!./file.html");

module.exports = {
  devtool: 'source-map', // to see source map of scss and ts
  entry: [ // root files to load
    './node_modules/material-design-lite/material.min.js',
    './src/scripts/main.ts',

    './src/index.html',

    './src/styles/main.scss',
  ],
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'ts-loader',
        options: {
          transpileOnly: false
        }
      },
      { // to auto refresh index.html and other html
        test: /\.html$/,
        loader: "raw-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.html$/,
        use: [ {
          loader: 'html-loader',
        }],
      },
      {
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader", options: {
              sourceMap: true
            }
        }, {
            loader: "sass-loader", options: {
              sourceMap: true
            }
        }]
      },
      { // for images and fonts in scss file
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,  
        use: [{
            loader: 'url-loader',
            options: { 
                limit: 8000, // Convert images < 8kb to base64 strings
                name: 'images/[hash]-[name].[ext]'
            } 
        }]
      }
    ]
  },
  resolve:  {
    extensions: ['.ts', '.js', '.json'],
    plugins: [
      // to get access of custom typescript paths. (e.g. _app/XXX/XX or @app/XXX/XX)
      new TsconfigPathsPlugin({ configFile: __dirname + "/tsconfig.json" })
    ]
  },
  output: {
    filename: "./bundle.js",
    path: path.resolve(__dirname, './build'),
  },
  plugins: [
    // use for html pre complier like jade
    // new HtmlWebpackPlugin({
    //   filename: 'index.html',
    //   path: path.resolve(__dirname, './build'),
    //   template: './src/index.jade',
    //   inject: 'body',
    // }),
    new HtmlWebpackPlugin({
      template: './src/index.html'
    }),

    // copy assets folder to access file from html or as http request
    new CopyWebpackPlugin([{
        from: './src/assets',
        to: path.resolve(__dirname, './build/assets')
    }]),

    // to use hot, inline (auto refresh) in config file. with out this we have to set as command of webpack-dev-server
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    contentBase: path.resolve(__dirname, './build'),
    hot: true, // for auto refresh
    inline: true, // for auto refresh
    port: 3000,
    overlay: true // for show error on html 
  }

}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Zoom.FM</title>

</head>

<body>



  <div class="side-nav mdl-list">

    <div>${require('./myfile.html')}</div>


</body>

</html>

我该怎么做或者插值是如何工作的？

Answer 1

我找到了答案:)

移除require("html-loader?interpolate!./file.html")
在 webpack 配置中启用 interpolate

webpack 配置

   {
      test: /\.html$/,
      use: [ {
        loader: 'html-loader',
        options: {
          interpolate: true
        }
      }],
    },

webpack 将一些 html 文件加载到 index.html 中（比如 web 组件）

webpack load some html file into index.html (like web component)

html

interpolation

webpack

webpack-html-loader