Простой способ горячей перезагрузки файла CSS в Webpack с использованием Webpack Dev Middleware

Question

У меня есть проект, написанный на языке TypeScript, который я могу использовать в Webpack Hot Reload, используя библиотеки webpack-hot-middleware и webpack-dev-middleware на моем сервере Node.js.

Кроме того, у меня уже есть все этапы сборки, сконфигурированные для моего кода стилуса (инкрементные сборки с помощью 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 как зависимость вашего приложения. Вы можете потребовать (или импортировать) один или несколько файлов css в свой javascript и тем самым стать частью дерева зависимостей приложения.

В стандартной настройке вы должны были бы сопоставлять файлы .css с использованием css-загрузчика и пересылать его перед выдачей его на выход, но поскольку вы не хотите, чтобы Webpack касался вашего css, вы можете использовать файловый загрузчик вместо. Webpack все равно возьмет файл как зависимость, но просто скопирует его в выходной каталог, не касаясь его содержимого.

Поместите что-то наподобие: require("file!./styles.css"); в основной файл приложения. Это даст указание использовать загрузчик файлов в файле css. Вам нужно будет установить file-loader с NPM, поскольку он не является частью Webpack.