在 webpack 中提取每个入口点的 css

问题描述 投票：0回答：1

有什么办法告诉 webpack 在具有多个条目的项目中仅包含每个条目各自的 css 吗？

似乎它提取了所有条目中的所有 css，将它们放在 

vendor.css
下，并将该 css 包含到所有条目中。我不知道如何告诉它分离每个条目的 css。

这是一个 Vue3 项目，但解决方案应该是特定于 webpack 的。

无论如何，我的

vue.config.js
是这样的：

module.exports = {
    ...
    pages:{
        entry1:{
            entry:"./src/entry/entry1.js",
            template:"public/entry1.html"
        },
        entry2:{
            entry:"./src/entry/entry2.js",
            template:"public/entry2.html"
        }
    },
    ...

    configureWebpack:{
        ...
    }
}

entry1.js:

import css1.css
...

entry2.js:

import css2.css
...

现在我需要构建仅包含 

entry1.html
中的样式的 
css1.css
和仅包含 
entry2.html
中的样式的 
css2.css
。

相反，webpack 将 

css1.css
和 
css2.css
中的所有样式合并到一个文件中，并将生成的文件包含到两个 html 中。

我试图尝试使用 

MiniCssExtractPlugin
配置和块命名，但到目前为止还没有运气。

vue.js webpack vuejs3 webpack-5
1个回答
0
投票

您可以使用 html-bundler-webpack-plugin 来满足您的需求。

使用 Bundler 插件，入口点是 HTML 模板。 所有源资源文件（脚本、样式、图像等）都可以使用 

<script>
和 
<link>
标签直接在 HTML 模板中指定。 该插件解析模板中资源的源文件，并在生成的 HTML 中将其替换为正确的输出 URL。 解析后的资源将通过 Webpack 插件/加载器进行处理并放入输出目录中。

例如，有 HTML 模板

src/entry/home.html
:

<!DOCTYPE html>
<html>
<head>
  <!-- relative path to CSS/SCSS source file src/entry/home.css -->
  <link href="./home.css" rel="stylesheet">
  <!-- relative path to JS source file src/entry/home.js -->
  <script src="./home.js" defer="defer"></script>
</head>
<body>
  <h1>Home</h1>
</body>
</html>

还有其他 HTML 模板

src/entry/about.html
:

<!DOCTYPE html>
<html>
<head>
  <!-- relative path to CSS/SCSS source file src/entry/about.css -->
  <link href="./about.css" rel="stylesheet">
  <!-- relative path to JS source file src/entry/about.js-->
  <script src="./about.js" defer="defer"></script>
</head>
<body>
  <h1>About</h1>
</body>
</html>

Webpack 配置：

const path = require('path');
const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'dist'),
  },

  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: 'src/entry/home.html', // save generated HTML into dist/index.html
        about: 'src/entry/about.html', // save generated HTML into dist/about.html
      },
      js: {
        filename: 'js/[name].[contenthash:8].js', // JS output filename
      },
      css: {
        filename: 'css/[name].[contenthash:8].css', // CSS output filename
      },
    }),
  ],
  
  module: {
      rules: [
        {
          test: /\.s?css$/,
          use: ['css-loader', 'sass-loader'], // you can use both SCSS and CSS
        },
      ],
    },
};

生成的 HTML 包含输出 URL：

dist/index.html
：

<!DOCTYPE html>
<html>
<head>
  <link href="home.1234abcd.css" rel="stylesheet">
  <script src="home.adbc1234.js" defer="defer"></script>
</head>
<body>
  <h1>Home</h1>
</body>
</html>


dist/about.html
：

<!DOCTYPE html>
<html>
<head>
  <link href="about.1234abcd.css" rel="stylesheet">
  <script src="about.adbc1234.js" defer="defer"></script>
</head>
<body>
  <h1>About</h1>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.