使用 Webpack 4.41 为 CSS 链接标签答案

【问题标题】：Link tags for CSS using Webpack 4.41使用 Webpack 4.41 为 CSS 链接标签
【发布时间】：2020-05-10 19:42:41
【问题描述】：

我使用Create React App 创建了一个基本应用程序。我在网上冲浪时遇到了将链接标签加载到 HTML 的不同方法。

目前，WebPack 正在将链接标签创建为：

<link href="styles.css" rel="stylesheet">

但我希望链接标签以不同的形式呈现，例如：

<link rel="preload" href="styles.css" as="style">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

有什么方法可以实现吗？

【问题讨论】：

【解决方案1】：

如果您使用create-react-app 构建项目，那么您将找不到可自定义的webpack.config.js（有一个，但由react-scripts 处理）。

According to Dan，他们不允许自定义插件以尽量减少潜在问题。

因此，如果您想将插件添加到使用 create-react-app 引导的 React 应用程序中。您必须运行npm run eject，这将使所有配置文件都可用于手动自定义。

退出项目后，您可以使用 preload-webpack-plugin 为 Webpack 预加载资源。详情here

基本示例webpack.config.js:

plugins: [
  new HtmlWebpackPlugin({
    title: 'My Cool App',
    template: './app/index.html'
  }),
  new PreloadWebpackPlugin()
]

这应该会自动为您预加载资产和依赖项。其他使用详情here

【讨论】：

得到错误Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found. 我正在使用"preload-webpack-plugin": "^2.3.0"。我检查了将其升级到 3.0.0-beta.3 的解决方案，但升级到该解决方案会使链接标签保持不变。
因为您使用create-react-app 启动项目，所以Webpack 配置由react-scripts 处理。看看this answer for details
另外，好像somebody customized the configuration of a project built using create-react-app，它可能就是你要找的东西。
我已经退出了项目。此外，他们正在使用我没有使用的react-app-rewired。我正在直接与create-react-app 合作。最重要的是，我不太确定在这种情况下添加 copy-webpack-plugin 有什么帮助。