Question

我在设置ExtractTextWebpackPlugin时遇到问题，包括我的HTML头标记中的单独CSS文件（使用链接标记），这是我相信的主要目的。

我在 webpack.config.js 中的当前配置：

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    filename: "app.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('general.css')
  ]
};

在我的主 index.js 文件中，我有require("../style.css");

style.css 放置在项目根文件夹中。

在我的 index.html 中，我有<script src="dist/app.js"></script>

据我所知，这应该在运行时在我的 head 标记中包含 general.css ，但它不存在。

感谢任何帮助。

Answer 1

ExtractTextPlugin仅从您的捆绑包中删除CSS以将其与JavaScript分离，您需要将其包含在HTML和捆绑包中。

您可以通过让webpack为您生成HTML文件来自动执行此操作。当您在文件名中使用哈希时，这尤其有用。您需要使用html-webpack-plugin，它会自动包含捆绑的JavaScript以及ExtractTextPlugin提取的CSS。

此外，您应该了解在运行时包含CSS的想法会对页面的加载时间产生负面影响，因为您首先需要下载JavaScript包（第一个网络请求），然后您需要执行JS ，这需要一些时间来解析，之后你必须下载你的CSS文件（第二个网络请求）。由于您依赖于首先执行的捆绑包，因此您将在短时间内显示没有CSS的页面，或者在网络连接不良的低端移动设备上显示大量时间。

如果您不使用ExtractTextPlugin而是使用style-loader，基本上会发生这种情况。 style-loader只是将您的CSS注入<style>标记，这是从您的JavaScript包中完成的，所以它仍然取决于正在执行的包，但至少它不需要额外的网络请求对于CSS。这甚至比你预期的ExtractTextPlugin要好，这会使插件无效。

基本Webpack ExtractTextWebpackPlugin配置

1 个答案: