webpack sass-loader和webpack-dev-server

Question

我希望webpack.config.js将scss转换为css并启动dev服务器。 我可以完美地将它们的作品单独完成。

    "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 - 这是成功将scss转换为css
2. webpack-dev-server - 这是在8085
上成功启动dev服务器

如何一起开始

整个代码github repo

的Github链接