在 create-react-app 应用程序中构建 bundle.js答案

【问题标题】：Build bundle.js in create-react-app application在 create-react-app 应用程序中构建 bundle.js
【发布时间】：2019-06-24 05:52:22
【问题描述】：

做了一个项目。现在我们需要将所有内容收集到一个 bundle.js 中，而不是像 create-react-app 那样。

执行eject 命令，出现配置。但是我如何获得bundle.js？

将项目中的所有内容（样式、图片等）收集到一个文件中非常重要。

## 我的解决方案

webpack.config.js：

const path = require("path");
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    context: __dirname,
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        publicPath: '',
        filename: "widget.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(gif|png|jpe?g|svg|woff(2)?|ttf|eot)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            publicPath: 'img',
                            outputPath: 'img',
                            name: '[name].[ext]',
                        },
                    },
                ],
            }
        ]
    },
    optimization: {
        minimizer: [new UglifyJsPlugin({
            uglifyOptions: {
                warnings: false,
                parse: {},
                compress: {},
                mangle: true,
                output: {
                    comments: false,
                },
                toplevel: false,
                nameCache: null,
                ie8: true,
                keep_fnames: false,
            },
        })],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
};

【问题讨论】：

不清楚。您是否尝试运行npm run build？这就是它的构建方式。不需要弹射。您如何使用这些样式和图像？如果您不import 他们，您将无法捆绑他们。如果您导入它们，它们应该已经在一个包中。
@estus 是的，我尝试运行npm run build 命令，但我得到chunk 文件、静态文件夹等。但我需要一个文件。导入所有样式、图片。
静态文件不会变魔术。您需要导入它们。无论如何，这都是值得怀疑的举动，因为它效率不高。
@estus 现在将所有css 编译到一个chunk.css 文件中。但是我在导入 js 时使用的这些文件。为什么？我导入所有文件：css、图像。
@IamMashed 是的。我更新了问题。

标签： reactjs webpack build create-react-app

【解决方案1】：

弹出是一个非常糟糕的解决方案，而是使用 rewire npm install react-app-rewired 并添加自定义构建脚本。

请在此处查看我的答案 How to build a production version of React without minification?

【讨论】：