0

I would like webpack.config.js to convert scss to css and start dev server. I can do them individually its works perfectly. 

    "use strict";

const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin");


const extractSass = new ExtractTextPlugin({
    filename: "master.css",
    disable: process.env.NODE_ENV === "development"
});

module.exports = {
    //  entry: require.resolve("../scss/language.scss"),
    entry: path.resolve(__dirname, "./scss/master.scss"),
    output: {
        path: path.resolve(__dirname, "./output"),
        filename: "bundle.extractText.js"
    },
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                    options: {
                        includePaths: [
                            path.resolve(__dirname, "./scss/master.scss")
                        ]
                    }
                }],
                fallbackLoader: "style-loader"
            })
        },
            {
                test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
                use: [{
                    loader: "file-loader"
                }]
            }
        ]
    },
    plugins: [
        extractSass
    ],
    devServer:{
        port:"8085"
    }
};
  1. webpack - this is successfully converting scss to css
  2. webpack-dev-server - this is successfully starting dev server on 8085

How to to start both together

Github link for entire code github repo

Naresh217
  • 410
  • 1
  • 6
  • 19
  • What do you mean start them both together? Here's what I understand though. `webpack-dev-server` is using `webpack` to run compile your code. Then still, the `webpack-dev-server` will run and you'll have a running server on your `localhost:8085` port. Just go visit the port on your browser and you'll see your code running. – ickyrr Feb 10 '17 at 03:50
  • Yes iam expecting wepack-dev-server to compile my code and run from specified port. But it only simply runs from the provided port but never compiles my code. I see output folder only if I specifically use webpack – Naresh217 Feb 20 '17 at 19:53
  • if you're using webpack-dev-server, you won't see an output folder because it's only compiling it on memory and not on anywhere on the disk, that's the reason you won't see any output folder. – ickyrr Feb 21 '17 at 08:52

0 Answers0