gpt4 book ai didi

webpack - 使用 Webpack 开发中间件在 Webpack 中热重载 CSS 文件的最简单方法

转载 作者:行者123 更新时间:2023-12-04 08:51:28 26 4
gpt4 key购买 nike

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

此外,我已经为我的 Stylus 代码配置了所有构建步骤(使用 Gulp 进行增量构建),它会在我的公共(public)目录中生成一个 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));

最佳答案

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

在标准设置中,您将匹配 .css 文件以使用 css-loader 并在将其发送到输出之前对其进行转译,但由于您不希望 Webpack 接触您的 css,因此您可以使用 file-loader 代替。 Webpack 仍然会选择该文件作为依赖项,但只需将其复制到输出目录而不触及其内容。

输入类似:require("file!./styles.css");在您的应用程序主文件中。这将指示它在 css 文件上使用文件加载器。您需要安装 file-loader使用 NPM,因为它不是 Webpack 的一部分。

关于webpack - 使用 Webpack 开发中间件在 Webpack 中热重载 CSS 文件的最简单方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37203909/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com