基本的Webpack ExtractTextWebpackPlugin配置

Question

我在为simpy配置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更好，因为这将使插件毫无用处。