最简单的方法使用Webpack Dev中间件热重新加载Webpack中的CSS文件

我有一个用TypeScript编写的项目，我可以利用Webpack Hot Reload，在我的Node.js服务器中同时使用webpack-hot-middleware和webpack-dev-middleware库。最简单的方法使用Webpack Dev中间件热重新加载Webpack中的CSS文件

此外，我已经为我的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热中间件和开发的WebPack中间件这样的：

const webpackConfig = require('../webpack.config'); 
const compiler = webpack(webpackConfig); 
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: webpackConfig.output.publicPath })); 
app.use(webpackHotMiddleware(compiler));

来源

2016-05-13 Buzinas

我不认为你需要做的除了已有的配置之外，HMR专门用于处理css文件。但是Webpack需要将你的css视为你的应用程序的依赖。你可以在你的javascript中需要（或者导入）一个或多个css文件，这样它就成为应用程序依赖关系树的一部分。

在一个标准的设置中，您可以匹配.css文件来使用css-loader，并在发送到输出之前将其转换，但由于您不想让Webpack触摸您的css，因此可以使用file-loader代替。 Webpack仍然会将文件作为依赖项提取，但只需将其复制到输出目录而不触及其内容。

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

来源

2016-05-27 17:25:05

最简单的方法使用Webpack Dev中间件热重新加载Webpack中的CSS文件

回答

相关问题