webpack dev服務器忽略scss變化

Question

我設法用webpack壓縮/編譯我的js和scss文件。 scss文件被'extract-text-webpack-plugin'提取到外部css文件中。下面是代碼：

var path = require('path'); 
var webpack = require('webpack'); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
require('es6-promise').polyfill(); 

module.exports = { 
    entry: ['./js/app'], 
    output: { 
    path: path.join(__dirname, 'js'), 
    publicPath: 'js', 
    filename: 'app.min.js' 
    }, 
plugins: [ 
    new webpack.optimize.UglifyJsPlugin({ 
    compressor: { 
    warnings: false, 
    }, 
    }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new ExtractTextPlugin("../css/styles.min.css", {allChunks: false}) 
], 
module: { 
    loaders: [{ 
    test: /\.scss$/, 
    loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") 
    }] 
} 
} 

當我運行現在「的WebPack-DEV-服務器的js/app.js」 - 它得到我在js文件的變化本身（警報例如），但不改變此話在css文件中。

這是app.js：

var $ = require('jquery'); 
require('../css/styles.scss'); 

alert('Hi'); 

我想這個問題被連接到ExtractTextPlugin。然後我再也不知道如何解決方法。任何提示或想法？

Answer 1

好的，我明白了。當啓動的WebPack-dev的服務器，我只是問我們是否是在生產環境：

const live = process.env.NODE_ENV === "production"; 

if(live) { 
... 
} else { 
... 
} 

如果我們不在生產，它忽略了ExtractTextPlugin出來。

最後部署我的變化I型：

NODE_ENV=production webpack -p 

你也可以使用一個NPM腳本來縮短這個。