Webpack 4使用sass和babel进行生产设置

因此,我想为我的应用程序设置一个生产构建脚本。

我的文件夹结构如下:

public
  - index.html
  - images
      - some_image.png
build
  - bundle.js
  - bundle.map.js
src
  - index.jsx (Entrypoint)
  - js
      - JSX files
  - scss
      - app.scss (imports others)
      - modules, base, ...

我当前的webpack配置允许我启动一个dev服务器,将--content-base设置为public。这是配置:

const path = require("path");

const SRC_DIR = path.resolve(__dirname, 'src');
const BUILD_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: './src/index.jsx',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js',
        publicPath: "/",
    },
    devtool: "sourcemap",
    module: {
        rules: [
            {
                test: /\.jsx$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.s?css$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader", options: {
                        sourceMap: true
                    }
                }, {
                    loader: "sass-loader", options: {
                        sourceMap: true
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    }
};

我现在想要实现的是一个网页包构建,它将我的所有资产捆绑在构建文件夹中,这样我就可以gzip并部署它。可能是这样的:

build
  - index.html
  - bundle.js
  - bundle.css
  - images

有了这个设置,我可以部署它并将nginx指向文件夹,应用程序就可以运行了。 但我不知道如何做到这一点。目前所有的webpack-p都将其放在一个捆绑包中。我的构建文件夹中的js。我读过关于“提取文本webpack插件”的文章,但它对我抛出错误不起作用(可能是因为webpack 4不受支持?)

目前,webpack非常令人困惑,因为大多数教程都是针对webpack 2,甚至可能是1的,我找不到一个简单的干净配置的好指南。我不想再安装10个npm软件包来让它工作。。。