I have a react application that I created with create-react-app. I'd like to run npm run build so that it compiles the javascript files into one file.
I've performed the following actions:
- created webpack.config.js
- installed webpack and loaders
- updated package.json for build
- created .babelrc
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require("webpack");
module.exports = {
entry: path.resolve(__dirname, 'src') + '/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js',
},
module:{
rules:[
{
exclude: /node_modules/,
test: /\.js$/,
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
{
plugins: ["@babel/plugin-proposal-class-properties"]
}
]
}
},
{
test: /\.csv$/,
loader: 'csv-loader',
options: {
dynamicTyping: true,
header: true,
skipEmptyLines: true
}
},
{
test: /\.(eot|woff|woff2|svg|ttf|txt)([\?]?.*)$/,
use: ['file-loader']
},
{
test: /\.css$/,
use: ["css-loader"]
},
{
test: /\.(eot|woff|woff2|svg|ttf|txt)([\?]?.*)$/,
use: ["file-loader"]
},
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
'resolve-url-loader',
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}
]
},
plugins:[
new webpack.IgnorePlugin(/^pg-native$/),
new webpack.DefinePlugin({
"process.env.BROWSER": false,
__DEV__: process.env.NODE_ENV !== "production"
}),
new HtmlWebpackPlugin({template:path.join(__dirname, '/public/index.html')})
]
};
.babelrc
{
"presets": [
"@babel/react",
[
"@babel/preset-env",
{
"targets": {
"node": "8.10"
}
}
]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"test": "react-scripts test",
"eject": "react-scripts eject",
"build": "npm run build:react && npm run build:bundle",
"build:react": "react-scripts build",
"build:bundle": "webpack --config webpack.config.js"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"csv-loader": "^3.0.3",
"gulp": "^4.0.2",
"gulp-inline-source": "^4.0.0",
"gulp-replace": "^1.1.3",
"terser-webpack-plugin": "^5.2.4",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack-cli": "^4.9.1"
}
}
After I run npm run build, I get the following response:
chriscruz@Chriss-MBP my-app % npm run build
> my-app@0.1.0 build /Users/chriscruz/Documents/Github/my-app
> npm run build:react && npm run build:bundle
> my-app@0.1.0 build:react /Users/chriscruz/Documents/Github/my-app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.3 KB build/static/js/2.8833cd6e.chunk.js
1.58 KB build/static/js/3.ff0311e9.chunk.js
1.13 KB build/static/js/runtime-main.1c420381.js
552 B build/static/js/main.6bc689e0.chunk.js
488 B build/static/css/main.31c5b48e.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build
Find out more about deployment here:
https://cra.link/deployment
> my-app@0.1.0 build:bundle /Users/chriscruz/Documents/Github/my-app
> webpack --config webpack.config.js
Hash: 174baac1d25f7aab50ff
Version: webpack 4.44.2
Time: 2257ms
Built at: 11/07/2021 6:41:10 PM
Asset Size Chunks Chunk Names
1.index_bundle.js 4.22 KiB 1
8aac2c49b5a00c8791fc06344c901ca9.svg 80 bytes [immutable]
c7bed1a84b6012b82ac5d9a1aca2ea06.svg 3.47 KiB [immutable]
index_bundle.js 131 KiB 0 main
Entrypoint main = index_bundle.js
[0] ./node_modules/react/index.js 190 bytes {0} [built]
[1] ./node_modules/object-assign/index.js 2.06 KiB {0} [built]
[2] ./node_modules/react-dom/index.js 1.33 KiB {0} [built]
[3] ./node_modules/react/cjs/react.production.min.js 6.3 KiB {0} [built]
[4] ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB {0} [built]
[5] ./node_modules/scheduler/index.js 198 bytes {0} [built]
[6] ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB {0} [built]
[7] ./src/index.css 240 bytes {0} [built] [failed] [1 error]
[8] ./src/App.css 240 bytes {0} [built] [failed] [1 error]
[9] ./src/index.js + 3 modules 1.78 KiB {0} [built]
| ./src/index.js 542 bytes [built]
| ./src/App.js 668 bytes [built]
| ./src/reportWebVitals.js 511 bytes [built]
| ./src/logo.svg 80 bytes [built]
[10] ./node_modules/web-vitals/dist/web-vitals.js 4 KiB {1} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
ERROR in ./src/index.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Users/chriscruz/Documents/Github/my-app/node_modules/css-loader/dist/index.js:31:27)
@ ./src/index.js 3:0-21
ERROR in ./src/App.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
at Object.loader (/Users/chriscruz/Documents/Github/my-app/node_modules/css-loader/dist/index.js:31:27)
@ ./src/App.js 2:0-19
@ ./src/index.js
Child HtmlWebpackCompiler:
Asset Size Chunks Chunk Names
__child-HtmlWebpackPlugin_0 5.55 KiB 0 HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
[0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 1.96 KiB {0} [built]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build:bundle: `webpack --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build:bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chriscruz/.npm/_logs/2021-11-07T23_41_10_300Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-app@0.1.0 build: `npm run build:react && npm run build:bundle`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-app@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/chriscruz/.npm/_logs/2021-11-07T23_41_10_336Z-debug.log
chriscruz@Chriss-MBP my-app %
