javascript - 基本 Webpack ExtractTextWebpackPlugin 配置

Question

我在配置 ExtractTextWebpackPlugin 时遇到问题，以便在我的 HTML head 标记中包含单独的 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仅从 bundle 中删除 CSS，以将其与 JavaScript 解耦，并且您需要将其包含在 HTML 以及 bundle 中。

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

此外，您应该明白，在运行时包含 CSS 的想法会对页面的加载时间产生负面影响，因为您首先需要下载 JavaScript 包(第一个网络请求)，然后需要执行 JS ，这需要一些时间来解析，之后您必须下载 CSS 文件(第二个网络请求)。由于您依赖于首先执行的 bundle ，因此您将在没有 CSS 的情况下显示页面一小会儿，或者在网络连接较差的低端移动设备上显示相当长的时间。

如果您不使用ExtractTextPlugin，这基本上就是发生的情况而是使用 style-loader 。 style-loader只需将您的 CSS 注入(inject) <style>标签，这是从 JavaScript 包完成的，因此它仍然取决于正在执行的包，但至少它不需要 CSS 的额外网络请求。这比您预期的还要好 ExtractTextPlugin这样做，这实际上会使插件变得毫无用处。