如何指定webpack中的目標文件夾進行sass預處理？

Question

我有以下的WebPack配置：

var webpack = require('webpack'); 


var config = { 
    devtool: 'eval-source-map', 
    entry: __dirname + "/my-app/assets/javascripts/app.jsx", 
    output: { 
    path: __dirname + "/my-app/assets/javascripts/compiled", 
    filename: "bundle.js" 
    }, 
    module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['es2015','react'] 
     } 
    }, 
    { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     loaders: ["style", "css?sourceMap", "sass?sourceMap"] 
    }] 
    } 
} 

我想的WebPack在我的應用程序內/資產/ SCSS文件夾預處理SCSS文件和子文件夾，並生成CSS文件必須到這個文件夾我的應用程序內/資產/此文件夾的樣式表或子文件夾與源文件夾的子文件夾模式相匹配。

我使用的WebPack-dev的服務器來觀看和在源文件中的更改自動重新加載瀏覽器。這適用於jsx文件。

第二個相關的問題我怎麼指定（基於Java），也看在後端的變化，如JSP GSP或Java類時，Java文件被更改，並自動重載瀏覽器正在生成？

Answer 1

首先，我會嘗試分開的開發和生產的WebPack配置。爲了提取你的CSS，你將不得不使用Extract Text Plugin for webpack。只要做

npm i extract-text-webpack-plugin -D 

在您的終端。通常我會提取用於生產的CSS。

你必須讓你的WebPack像這樣的例子：

var ExtractTextPlugin = require("extract-text-webpack-plugin"); 
module.exports = { 
    module: { 
     loaders: [ 
      { test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader", "sass-loader") } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin("styles.css") 
    ] 
} 

來源：https://github.com/webpack/extract-text-webpack-plugin

而且，我看你有CSS和青菜sourcemap。你應該只有一個sass。