Как указать папку назначения в 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.

Вторые связанные вопросы, как я могу указать, чтобы также следить за изменениями в backend (на основе java), такими как JSP GSP или класс java, сгенерированные при изменении файлов java и автоматический перезарядка браузера?

Answer 1

Во-первых, я бы попытался отделить конфигурацию веб-пакетов разработки и производства. Чтобы извлечь ваш css, вам нужно будет использовать Extract Text Plugin для 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

Кроме того, я вижу, у вас есть sourcemap как для CSS и дерзости. У тебя должен быть только один.