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

关键词：

【中文标题】使用 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 的一部分。

【讨论】：

webpack-dev-middleware 通过所有路由

】webpack-dev-middleware通过所有路由【英文标题】：webpack-dev-middlewarepassthroughforallroutes【发布时间】：2017-10-1019:57:15【问题描述】：我正在使用webpack-dev-middleware以及客户端上使用react-router的react应用程序。如果我在根/输入应用程序... 查看详情

用 express + webpack-dev-middleware/webpack-hot-middleware 替换 webpack-dev-server

】用express+webpack-dev-middleware/webpack-hot-middleware替换webpack-dev-server【英文标题】：Replacingwebpack-dev-serverwithexpress+webpack-dev-middleware/webpack-hot-middleware【发布时间】：2016-05-2504:21:12【问题描述】：我目前正在尝试将使用webpack-dev- 查看详情

使用 webpack-dev-middleware 时是不是可以显示进度，例如 webpack-dev-server 中的 --progress 选项？

】使用webpack-dev-middleware时是不是可以显示进度，例如webpack-dev-server中的--progress选项？【英文标题】：Isitpossibletohavetheprogressdisplayedwhenusingwebpack-dev-middlewarelikethe--progressoptionfromwebpack-dev-server?使用webpack-dev-middleware时是否 查看详情

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

】使用WebpackDevMiddleware在Webpack中热重载CSS文件的最简单方法【英文标题】：SimplestwaytohotreloadaCSSfileinWebpackusingWebpackDevMiddleware【发布时间】：2016-09-0906:59:04【问题描述】：我有一个用TypeScript编写的项目，我可以利用我的Node.js服务... 查看详情

带有 create-react-app 的 webpack-dev-middleware

】带有create-react-app的webpack-dev-middleware【英文标题】：webpack-dev-middlewarewithcreate-react-app【发布时间】：2018-01-2513:17:30【问题描述】：在我的react\\node应用程序中，我在节点端使用webpack-dev-middleware和webpack-hot-middleware以便在客户端中... 查看详情

我的 webpack-dev-middleware 设置无法获取 / 错误

】我的webpack-dev-middleware设置无法获取/错误【英文标题】：CannotGET/errorwithmywebpack-dev-middlewaresetup【发布时间】：2017-10-2905:53:36【问题描述】：首先，我在这里发现了许多类似的主题，但即使参考了它们，我仍然无法让它发挥作用... 查看详情

React Routing with Express, Webpack dev middleware, React router dom

】ReactRoutingwithExpress,Webpackdevmiddleware,Reactrouterdom【英文标题】：【发布时间】：2021-08-0708:17:44【问题描述】：我在使用react-router-dom和使用express、webpack-dev-middleware、webpack-hot-middleware的自定义开发服务器进行路由时遇到问题。这是... 查看详情

javascript使用webpack-dev-middleware对express.js配置示例，以允许后端身份验证。(代码片段)

查看详情

webpack-dev-server怎么配置，实现实时自动刷新

1、webpack-hot-middleware（版本2.0以上），配置方法在插件的readme.md有写。2、webpack-dev-server和webpack-hot-middleware，配置方法在插件的readme.md有写。参考技术A实现修改代码自动刷新浏览器，需要添加相关插件，webpack提供了2种热更新的... 查看详情

npmrundev遇到报错(代码片段)

...信息"webpack":"^3.8.0","webpack-bundle-analyzer":"^2.9.0","webpack-dev-middleware":"^1.10.0","webpack-dev-server":"^2.9.7","webpack-hot-middleware":"^2.16.1","webpack-merge":"^4.1.0","yaml-loader":"^0.4.0"（2）Error:Cannotfindmodule‘extract-text-webpack-plugin‘缺少就通过npminstal 查看详情

webpack热重载的3种方式

...上相当于启用了一个express的Http服务器＋调用了webpack-dev-middleware【简单的web服务器和实时重载】。这个Http服务器和client使用了websocket通讯协议，原始文件做出改动后，webpack-dev-server会用webpack实时的编译，再用webpack-dev-middleware将... 查看详情

webpack-dev-server启动后,localhost:8080返回index.html的原理

...一个采用Node.jsExpress实现的微型服务器,内部使用webpack-dev-middleware来响应发送到服务器监听单口的HTTP请求。webpack-dev-server主要用于前端项目的本地开发和调试。具体使用，只需要在package.json的devDependencies里添加它的依赖即可。同... 查看详情

使用 webpack-hot-middleware 配置环境时，Jest 测试失败

】使用webpack-hot-middleware配置环境时，Jest测试失败【英文标题】：Jesttestfailswhenenvironmentisconfiguredwithwebpack-hot-middleware【发布时间】：2017-05-2907:13:55【问题描述】：所以我正在运行一个非常基本的Jest测试来测试我的一条路线是否返... 查看详情

ik分词器热更新原理

...口交互，而在这一步，主要是dev-server的中间件webpack-dev-middleware和webpack之间的交互，webpack-dev-middleware调用webpack暴露的API对代码变化进行监控，并且告诉webpack，将代码打包到内存中。3.第三步是webpack-dev-server对文件变化的一个监... 查看详情

Webpack 开发中间件反应热重载太慢

...Webpack开发中间件反应热重载太慢【英文标题】：Webpackdevmiddlewarereacthotreloadtooslow【发布时间】：2016-08-1800:11:13【问题描述】：我有一个带有webpack-dev-middleware和webpack-hot-middleware的简单配置，它使用热重载(HMR)和反应。一切正常，... 查看详情

如何在 Express 中使用带有 Firebase 功能的 webpack-hot-server-middleware

】如何在Express中使用带有Firebase功能的webpack-hot-server-middleware【英文标题】：Howtousewebpack-hot-server-middlewarewithFirebasefunctionsinexpress【发布时间】：2018-06-2306:06:27【问题描述】：我正在尝试在服务器端渲染React项目中为Firebase使用云... 查看详情

webpack4知识汇总2(代码片段)

...t:3000‘,pathRewrite:‘/api‘:‘‘也可以使用中间件webpack-dev-middlewareletwebpack=require("webpack")letmiddle=require("webpack-dev-middleware");letcompiler=webpack(config);app.use(middle(complier));resolve解析第三方包resolve:modules:[path.resolve(‘node_modue... 查看详情

如何在 express 应用中设置 webpack-hot-middleware？

】如何在express应用中设置webpack-hot-middleware？【英文标题】：Howtosetupwebpack-hot-middlewareinanexpressapp?【发布时间】：2020-05-1523:19:36【问题描述】：我正在尝试在我的express应用中启用webpackHMR。它不是一个SPA应用程序。对于视图方面，... 查看详情