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"
})
]
};
npm run build? This is how it's built. No ejection needed. How do you use that styles and images? If you don'timportthem, you won't be able to bundle them. If you import them, they should be already in a bundle.npm run buildcommand, but i getchunkfiles, static folder e.t.c. But i need one file. All styles, images imported.csscompiled in onechunk.cssfile. But this files i use in imports into js. why?I import all files: css, images.