Javascript 带有网页包的HTML/CSS组件（无框架）

我如何设置Webpack 4.5，在没有Angular、React等框架的情况下，将具有自己css文件的html文件注入到main index.html中，并且没有要注入的每个html文件的javaScript文件

我已经创建了单独的html文件并将它们注入index.html，但还没有弄清楚如何使这些html模板拥有自己的本地范围css文件

在home.html中，我希望能够像正常情况一样使用home.css中的类
（也就是说，与我发现的最接近的

不同）

home.html

home.css（本地范围）

.foo{背景：红色；}
.bar{背景：绿色；}

并使其自动在本地确定作用域，以便在我的index.html中插入home.html，而不会产生css冲突，也不会让每个.html文件都需要自己的.js文件

index.html

例子
${require（“./pg templates/home/home.html”）}

styles.css（全局范围）

*{框大小：边框框；}
身体
{
填充：0；
保证金：0；
}
.foo/*这将被home.css中的.foo类覆盖*/
{
背景：黄色；
颜色：紫色；
}

webpack.config.js

---

问题是什么？@Daniel我把问题改写得更清楚了你找到解决办法了吗？我能知道你是如何将html文件导入js的吗？@CristianTraìna要将html文件导入js文件，我使用了

require（'foo.html'）

，但我没有将文件直接导入html文件，这正是问题所在。@slanden毕竟，我发布了一个类似的问题

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  devServer: {
    contentBase: './src',
    port: 4200,
    open: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: './src/index.html'}),
    new UglifyJsPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: /src/,
        exclude: /node_modules/
      },
      {
        test: /\.(html)$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
          options: {
            attrs:[':data-src'],
            minimize: true,
            conservativeCollapse: false,
            interpolate: true
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[path][name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}