带有 sass 和 babel 的 Webpack 4 生产设置

Question

所以我想为我的应用设置一个生产构建脚本。

我的文件夹结构是这样的：

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 配置允许我启动一个开发服务器，并将 --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'],
    }
};

我现在想要实现的是一个 webpack 构建，它将我的所有资产捆绑在构建文件夹中，以便我可以 gzip 并部署它。也许是这样的：

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

通过这个设置，我可以部署它并将 nginx 指向该文件夹，应用程序就可以运行了。 我不知道如何实现这一点。目前所有的 webpack -p 都会在我的构建文件夹中放置一个 bundle.js。我读过“extract-text-webpack-plugin”，但它对我抛出错误不起作用（可能是因为不支持 webpack 4？）

目前 webpack 真的很混乱，因为大多数教程都是针对 webpack 2 甚至 1 的，我找不到一个简单干净配置的好指南。我不想为此安装另外 10 个 npm 包...

Answer 1

extract-text-webpack-plugin 确实是您正在寻找的东西，正如您所猜测的，它目前在 Webpack 4 中不受支持。最好的选择是推迟到它被更新、分叉或替换，或者自己分叉并为它的发展做出贡献。

编辑：虽然 extract-text-webpack-plugin 已更新为与 Webpack 4 一起使用，但它不应再用于捆绑 CSS 文件。请改用mini-css-extract-plugin。