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放在我的build文件夹中。我读过＆＃34; extract-text-webpack-plugin＆＃34;但它不会给我带来错误（可能是因为不支持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。

Webpack 4生产设置与sass和babel

1 个答案: