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

Question

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

此外，我已经配置了所有的构建步骤，针对我的Stylus代码（使用Gulp进行增量构建），这会在我的公共目录下生成一个单独的CSS文件。

因此，现在我想要为CSS也利用Webpack的热重载功能，因为我已经为我的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热中间件和Webpack开发中间件：

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

- Buzinas

Answer 1

我认为你不需要为了 HMR 处理 CSS 文件而采取任何特殊措施，除了你已经有的配置。但是 Webpack 需要将你的 CSS 视为应用程序的依赖项。您可以在 JavaScript 中 require（或import）一个或多个 CSS 文件，这样它就成为应用程序依赖树的一部分。

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

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

- Thijs Koerselman