我有一个用TypeScript编写的项目,我可以利用Webpack Hot Reload,在我的Node.js服务器中使用webpack-hot-middleware和webpack-dev-middleware库.
此外,我已经为我的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));
解决方法
除了你已经拥有的配置之外,我认为你不需要为HMR做任何特别的事情来处理css文件.但Webpack需要将您的css视为应用程序的依赖项.您可以在javascript中要求(或导入)一个或多个css文件,通过这样做,它将成为应用程序依赖关系树的一部分.
在标准设置中,您将匹配.css文件以使用css-loader并在将其发送到输出之前进行转换,但由于您不希望Webpack触及您的CSS,您可以使用文件加载器. Webpack仍然会将文件作为依赖项获取,但只需将其复制到输出目录而不触及其内容.
把类似的东西：require(“file！./ styles.css”);在您的应用程序主文件中.这将指示它在css文件上使用文件加载器.您需要使用NPM安装文件加载器,因为它不是Webpack的一部分.
