Webpack загружает некоторые HTML-файл в index.html (например, веб-компонент) - PullRequest
Новая
       45

Webpack загружает некоторые HTML-файл в index.html (например, веб-компонент)

0 голосов
/ 10 июня 2018

Я хочу разделить файл моего проекта на несколько файлов.с помощью импорта sass и JavaScript я могу сделать это только для стилей и сценариев.

, но я хочу разделить и HTML-файлы.я не использую никаких фреймворков, просто веб-пакет.

в соответствии с документацией веб-пакета, мы можем сделать это с интерполяцией https://webpack.js.org/loaders/html-loader/#interpolation

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

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

но я получил ошибку:

Не удается найти модуль 'html-загрузчик? Интерполировать! ./ file.html'

моя конфигурация веб-пакета: 

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>

как я могу это сделать или как работает интерполяция?

1 Ответ

0 голосов
/ 01 сентября 2018

Я нашел ответ:)

  1. удалить require("html-loader?interpolate!./file.html")
  2. включить interpolate в конфигурации веб-пакета

конфигурации веб-пакета 

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