最簡單的方法使用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文件

回答

相關問題