Включить горячую перезагрузку с помощью Webpack и PostCSS

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

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      loader: 'babel-loader',
    },
    {
      test: /\.css$/,
      include: [`${PATHS.src}`, `${PATHS.modules}/normalize.css/normalize.css`],
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      }),
    },
  ],
}

Я использую Webpack 3, Webpack Dev Server и PostCSS вместе с плагином Extract Text. Спасибо!


webpack css-modules postcss webpack-dev-server extract-text-plugin
person iknowhtml    schedule 16.10.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы включить горячую перезагрузку для css с помощью ExtractTextWebpackPlugin, необходимо выполнить несколько шагов.

<сильный>1. Настроить webpack-dev-сервер

devServer: {
  host: '0.0.0.0',
  port: 8080,
  hot: true
}

<сильный>2. Добавьте плагин HotModuleReplacementPlugin

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

<сильный>3. Добавьте точку входа для сервера разработки

entry: [
  'webpack-dev-server/client?http://0.0.0.0:8080',
  // your other entry points
]

<сильный>4. Используйте css-горячий загрузчик

Пожалуйста, обратитесь к документации, так как первый пример содержит ExtractTextPlugin. Просмотрите его здесь.

<сильный>5. Настройте скрипт горячего модуля в точке входа .js

Внутри вашей точки входа .js вы должны реализовать следующий скрипт:

if (module.hot) {
  module.hot.accept();
}

Эти шаги должны предоставить вам горячую перезагрузку как JS, так и CSS. Дайте мне знать, если есть какие-либо проблемы или вопросы.

person Rico Herwig    schedule 19.10.2017
comment
Я изменил свой файл конфигурации Webpack, как указано выше, и я получаю непредвиденную ошибку токена в закрывающей скобке для функции concat, используемой для css-hot-loader, как указано в документации. Конкретный фрагмент кода, вызывающий ошибку, — ['css-hot-loader'].concat(..rest of configuration). - person iknowhtml; 21.10.2017

arrow_upward
0
arrow_downward

Вам не нужно использовать ExtractTextPlugin для разработки приложения. Используйте загрузчик для css и отдельный конфиг для webpack.prod

Вы включили devServer в webpack.config вместе с модулем?

devServer: {
    hot: true,
    contentBase: ENTRY_DIR
  },

И вы должны запустить свое приложение с помощью webpack-dev-server.

person Sridhar Sg    schedule 17.10.2017
comment
Я использую ExtractTextPlugin, поэтому таблица стилей отделена от пакета JS, и я хотел бы сохранить ее таким образом, чтобы я мог изменять свой CSS в браузере. Я уже использую загрузчик для CSS. У меня нет отдельного рабочего файла конфигурации Webpack, но я не думаю, что это необходимо для моего варианта использования. Наконец, DevServer уже есть в моем файле конфигурации Webpack. - person iknowhtml; 19.10.2017
comment
Было бы полезно увидеть остальную часть моего файла конфигурации? - person iknowhtml; 19.10.2017
comment
@iknowhtml ExtractTextPlugin не поддерживает HMR. капиш. - person atilkan; 12.07.2018