Webpack 4.编译scss分离css文件

我试图将 scss 编译成一个单独的 css 文件，但没有成功。现在，css 与所有 js 代码一起进入到bundle.js 中。 我怎样才能将我的CSS分离到它自己的文件中？

这是我的配置的样子：

var path = require("path");

module.exports = {
    entry: "./js/main.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath: "/dist"
    },
    watch:true,
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: "babel-loader",
                    options: { presets: ["es2015"] }
                }
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }
};

其他答案让我很头痛，因为它们不起作用。我做了很多谷歌搜索，我意识到你可以编译scss分成单独的css文件而不使用任何额外的插件

webpack.config.js

    const path = require('path');

    module.exports = {
        entry: [
            __dirname + '/src/js/app.js',
            __dirname + '/src/scss/app.scss'
        ],
        output: {
            path: path.resolve(__dirname, 'dist'), 
            filename: 'js/app.min.js',
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: [],
                }, {
                    test: /\.scss$/,
                    exclude: /node_modules/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: { outputPath: 'css/', name: '[name].min.css'}
                        },
                        'sass-loader'
                    ]
                }
            ]
        }
    };

包.json

    {
      "name": "...",
      "version": "1.0.0",
      "description": "...",
      "private": true,
      "dependencies": {},
      "devDependencies": {
        "file-loader": "^5.0.2",
        "node-sass": "^4.13.1",
        "sass-loader": "^8.0.2",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10"
      },
      "scripts": {
        "build": "webpack --config webpack.config.js --mode='production'"
      },
      "keywords": [],
      "author": "...",
      "license": "ISC"
    }

依赖项：

npm install --save-dev webpack webpack-cli file-loader node-sass sass-loader

如何运行JS和SCSS编译

npm run build