使用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構建，它將我的所有資產捆綁在build文件夾中，以便我可以對其進行gzip壓縮並進行部署。 也許是這樣的：

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

通過此設置，我可以部署它並將nginx指向該文件夾，然后該應用程序就可以開始使用了。 我不知道如何實現這一目標。 目前，所有webpack -p都將bundle.js放入我的build文件夾中。 我已經閱讀過有關“ 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 。