的WebPack提取CSS進行生產，內聯發展

我修改了React Hot Loader Boilerplatewebpack.config.js，使其CSS導出到一個單獨的文件中通過添加模塊：的WebPack提取CSS進行生產，內聯發展

{ 
    test: /\.scss$/, 
    include: /src/, 
    loader: ExtractTextPlugin.extract(
     'style', 
     'css!postcss!sass' 
    ) 
}

除了插件：

new ExtractTextPlugin('app.css')

以下是完整的webpack.config file供參考。雖然這在我運行webpack時正確地輸出app.css，但它殺死了用於開發的熱重載功能。如果我將模塊還原爲：

{ 
    test: /\.scss$/, 
    include: /src/, 
    loaders: [ 
     'style', 
     'css', 
     'postcss-loader', 
     'sass' 
    ] 
}

熱加載正常工作（adjusted webpack.config）。

當我正在開發與導出生產就緒代碼時，什麼是在這兩者之間輕鬆切換的最佳設置？在我看來，如果我可以使用npm start（它只是調用node server.js）自動使用開發模式，然後運行webpack或webpack -p來自動使用生產，那將是理想的。

來源

2016-03-08 dougmacklin

使用process.env.NODE_ENV就像典型的React應用程序通常使用的那樣。像，

"scripts": { 
    "start": "NODE_ENV=development node server.js", 
    ...

，並在配置文件中：

var cssLoader; 
if (process.env.NODE_ENV === 'production') { 
    cssLoader = { <... your production-use loader setup> } 
} else { 
    cssLoader = { <... your development-use loader setup> } 
} 
... 
loaders: [cssLoader, <...other loaders>]

來源

2016-03-08 02:34:52

謝謝！我發現，如果我使用'process.env.NODE_ENV ==='development''，那麼運行'webpack'默認爲非開發（我的產品）會更好。我相信你在條件中包含了一個不必要的'！'，你能刪除它嗎？這裏是我修改後的[webpack.config.js]（http://codepen.io/dougmacklin/pen/KzVrQP?editors=0010） – dougmacklin

@dougmacklin謝謝！這是一個愚蠢的錯誤。 :) –

的WebPack提取CSS進行生產，內聯發展

回答

相關問題