使用 Webpack Dev Middleware 在 Webpack 中热重载 CSS 文件的最简单方法

Posted 2023-03-08

【中文标题】使用 Webpack Dev Middleware 在 Webpack 中热重载 CSS 文件的最简单方法

【英文标题】：Simplest way to hot reload a CSS file in Webpack using Webpack Dev Middleware

【发布时间】：2016-09-09 06:59:04

【问题描述】：

我有一个用 TypeScript 编写的项目，我可以利用我的 Node.js 服务器中的 webpack-hot-middleware 和 webpack-dev-middleware 库来利用 Webpack Hot Reload。

另外，我已经为我的 Stylus 代码配置了所有构建步骤（使用 Gulp 进行增量构建），它会在我的公共目录中生成一个 CSS 文件。

所以，现在我也想利用 Webpack 对 CSS 的热重载，因为我已经为我的 TypeScript 东西提供了它，但我不希望它来构建我的 CSS 文件，因为我已经有了一些很棒的东西为了那个原因。理想情况下，我只想让 Webpack 在每次更改时热重新加载我的单个 CSS 文件。实现这一目标的最简单和最好的方法是什么？

我当前的配置文件是这样的：

const webpack = require('webpack');

module.exports = 
  entry: [
    'webpack-hot-middleware/client',
    './src/client/index.tsx'
  ],
  output: 
    path: '/public/js/',
    filename: 'bundle.js',
    publicPath: '/js/'
  ,
  resolve: 
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  ,
  module: 
    loaders: [
      
        test: /\.tsx?$/,
        loader: 'ts-loader'
      
    ]
  ,
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ];
;

然后，我像这样使用 Webpack Hot Middleware 和 Webpack Dev Middleware：

const webpackConfig = require('../webpack.config');
const compiler = webpack(webpackConfig);
app.use(webpackDevMiddleware(compiler,  noInfo: true, publicPath: webpackConfig.output.publicPath ));
app.use(webpackHotMiddleware(compiler));

【参考方案1】：

我认为除了你已有的配置之外，你不需要为 HMR 做任何特别的事情来处理 css 文件。但是 Webpack 需要将您的 css 视为您的应用程序的依赖项。您可以在 javascript 中要求（或导入）一个或多个 css 文件，这样它就成为应用程序依赖树的一部分。

在标准设置中，您将匹配 .css 文件以使用 css-loader 并在将其发送到输出之前对其进行转译，但由于您不希望 Webpack 接触您的 css，因此您可以改用 file-loader . Webpack 仍然会选择该文件作为依赖项，但只需将其复制到输出目录而不触及其内容。

在您的应用程序主文件中添加类似：require("file!./styles.css"); 的内容。这将指示它在 css 文件上使用文件加载器。您需要使用 NPM 安装 file-loader，因为它不是 Webpack 的一部分。