更改sass時熱備份webpac-dev-server

Question

我用webpack-dev-server構建了簡單的webpack。這是工作，當我改變.js文件的自動更新在瀏覽器。但是，當我changhing .sass沒有任何反應。這裏是我的webpack.confing

const { resolve } = require('path'); 

const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const OpenBrowserPlugin = require('open-browser-webpack-plugin'); 

const config = { 
    devtool: 'cheap-module-eval-source-map', 

    entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    './main.js', 
    './assets/sass/main.sass', 
    ], 

    output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'dist'), 
    publicPath: '/', 
    }, 

    context: resolve(__dirname, 'app'), 

    devServer: { 
    hot: true, 
    contentBase: resolve(__dirname, 'dist'), 
    publicPath: '/', 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     loaders: [ 
      'babel-loader', 
     ], 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.sass$/, 
     exclude: /node_modules/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      'css-loader', 
      { 
       loader: 'sass-loader', 
       query: { 
       sourceMap: false, 
       }, 
      }, 
      ], 
     }), 
     }, 
     { test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' }, 
     { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' }, 
     { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }, 
    ] 
    }, 

    plugins: [ 
    new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }), 
    new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]), 
    new OpenBrowserPlugin({ url: 'http://localhost:8080' }), 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
}; 

module.exports = config; 

另外，請告訴我如何使文件在生成過程中獲得正確的文件夾（的CSS到dist/CSS，JS到dist/JS），「因爲現在分辯他們都去到dest文件夾的根目錄。

Answer 1

熱重裝不適用於extract-text-webpack-plugin。您不應該在開發中使用它，您可以通過在開發中將disable選項設置爲true來輕鬆禁用它。您可以使用環境變量，像這樣：

new ExtractTextPlugin({ 
    filename: 'style.css', 
    disable: process.env.NODE_ENV !== 'production', 
    allChunks: true 
}), 

這隻會提取生產模式的CSS，所以你需要在你的生產與建設：

NODE_ENV=production webpack [options] 

或者，如果你是在窗戶：

set NODE_ENV=production && webpack [options] 

還有cross-env，如果你找一個跨平臺的解決方案。

---

爲了得到JavaScript文件到dist/js和CSS文件dist/css你可以設置output.path到dist/js，然後告訴extract-text-webpack-plugin生成文件到../css/style.css。

output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'dist/js'), 
    publicPath: '/', 
}, 
plugins: [ 
    new ExtractTextPlugin({ 
    filename: '../css/style.css', 
    disable: process.env.NODE_ENV !== 'production', 
    allChunks: true 
    }), 
    // other plugins 
]