4

Made a project. Now we need to collect everything in one bundle.js, and not in the way create-react-app does.

Executed the eject command, configs appeared. But how do i get bundle.js?

It is important that everything that is in the project (styles, pictures, etc.) be gathered into one file.

## My Solution

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"
        })
    ]
};
8
  • It's unclear. Did you try to run npm run build? This is how it's built. No ejection needed. How do you use that styles and images? If you don't import them, you won't be able to bundle them. If you import them, they should be already in a bundle. Commented Jan 30, 2019 at 20:46
  • @estus Yes, i tried to run npm run build command, but i get chunk files, static folder e.t.c. But i need one file. All styles, images imported. Commented Jan 30, 2019 at 20:49
  • Static files won't become JS bundle by magic. You need to import them. And that's questionable move any way because it's not efficient. Commented Jan 30, 2019 at 20:58
  • @estus now all css compiled in one chunk.css file. But this files i use in imports into js. why?I import all files: css, images. Commented Jan 30, 2019 at 21:04
  • 1
    @IamMashed Yes. I updated the question. Commented Aug 28, 2019 at 22:13

1 Answer 1

2

Ejecting is a real bad solution, instead use rewire npm install react-app-rewired and add a customized build script.

please checkout my answer here How to build a production version of React without minification?

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.