使用 Webpack 的 HTML/CSS 组件（无框架）

sla*_*den 5 javascript web-component webpack

如何设置 Webpack 4.5 将具有自己的 css 文件的 html 文件注入到主index.html中，而无需 Angular、React 等框架，并且我想要注入的每个 html 文件都没有 javaScript 文件？

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

在home.html内部，我希望能够像平常一样使用home.css
中的类（即不喜欢<div className={styles.foo}>，这是我发现的最接近的）

首页.html

<div class=foo></div>
<div>
  <p class=bar></p>
</div>

Run Code Online (Sandbox Code Playgroud)

home.css（本地范围）

.foo {background: red;}
.bar {background: green;}

Run Code Online (Sandbox Code Playgroud)

并自动将其范围限定为本地范围，以便在我的index.html中我可以注入home.html而不会发生CSS冲突，并且每个.html文件都不需要它自己的.js文件。

索引.html

<!doctype html>
<html lang="en">
<head>
  <title>Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="styles.css" rel="stylesheet">
</head>
<body>
  <div id="pages">
    <!-- inject page templates below -->
    <section id="home" class="page">${require("./pg-templates/home/home.html")}</section>
  </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

styles.css（全局范围）

* {box-sizing: border-box;}
body
{
  padding: 0;
  margin: 0;
}
.foo  /*this will be overridden by the .foo class in home.css*/
{
  background: yellow;
  color: purple;
}

Run Code Online (Sandbox Code Playgroud)

webpack.config.js

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')
  }
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	851 次
最近记录：	8 年，3 月前