Question

我有一个用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));

Answer 1

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

在标准设置中，您将匹配.css文件以使用css-loader并在将其发送到输出之前进行转换，但由于您不希望Webpack触及您的CSS，您可以使用该文件 - 装载机代替。 Webpack仍然会将该文件作为依赖项获取，但只需将其复制到输出目录而不触及其内容。

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

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

1 个答案: