My folder structure looks like this:
- src/internal-logic.js
- src/header.js
- src/footer.js
- package.json
Here is a section of my package.json
"scripts": {
"start": "npx babel --watch src --out-dir dist --presets react-app/prod",
"build": "npx babel src --out-dir dist --presets react-app/prod",
"minify": "npx terser -c -m -o dist/common.min.js -- dist/header.js dist/footer.js dist/internal-logic.js"
},
When deploying this code I run the following commands
npm run build
npm run minify
This generates a file called common.min.js which I use in a few projects.
What I would like to do is to make a single build command by using webpack. How can I go about doing that?
UPDATE
I have created the following webpack.config.js
const path = require('path');
module.exports = {
entry: {
'common.js': [
path.resolve(__dirname, 'src/internal-logic.js'),
path.resolve(__dirname, 'src/footer.js'),
path.resolve(__dirname, 'src/header.js')
]
},
output: {
filename: '[name]',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['#babel/preset-react']
}
}
}
]
},
};
This works
Related
"start": "node index.js",
How do I add -r #cypress/instrument-cra in "start"?
According to the documents given here we need react-scripts but in my use case I don't have it.
If you have a webpack.config.js file (webpack v5) this is how you would add the babel-plugin-istanbul plugin.
Note, I only show the relevant section of module.rules which you will have to carefully find in your config.
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: ['babel-plugin-istanbul'],
},
},
},
],
},
}
Of course, you will need to install babel-plugin-istanbul
npm install --save-dev babel-plugin-istanbul
If you have .babelrc, add it to that file
{
"env": {
"test": {
"plugins": [ "istanbul" ]
}
}
}
EDIT: I have created a minimal repo here https://github.com/kuworking/workspace-test
git clone it
yarn
lerna bootstrap
npm run build
npm run start // this one works,only babel without webpack
npm run build-fail
npm run start-fail // this one fails, with webpack
.
The configuration that works builds the library with babel-preset-gatsby-package or it also works with ["#babel/preset-env", "#babel/preset-react"]
"build": "babel src --out-dir lib"
The configuration that doesn't work uses ["#babel/preset-env", "#babel/preset-react"] and webpack, and it gives a React Minified error (see comments from #Shlang
"build": "webpack --config ./webpack.config.js --mode=production"
// webpack.config.js
module.exports = (env, argv) => {
const mode = argv.mode || 'development'
const config = {
entry: './src/index.js',
output: {
path: `${__dirname}/lib`,
filename: 'index.js',
library: 'test-fail',
libraryTarget: 'umd',
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
],
},
devtool: mode === 'development' ? 'cheap-module-eval-source-map' : false,
}
return config
}
How can it work with webpack?
I have a React project within a Spring project. I want to have a debug environment, where React files are watched, and are compiled & copied to the Spring project (different directory). I am using Webpack 4.8.
Currently I have to run npm run build:dev every time I make changes to the React code, correct bundle.js is created and is moved to the correct location. But running it every time is a hassle.
I've tried appending the script with --watch, and although it does create a new build, it isn't copied to the final location.
My package.json script
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node_modules\\.bin\\webpack-dev-server --config .\\webpack.dev.js",
"dev": "webpack --config .\\webpack.dev.js",
"build": "webpack --config .\\webpack.prod.js",
"copy:prod": "copy .\\dist\\bundle.js ..\\xxx\\src\\main\\resources\\static\\ /Y",
"copy:dev": "copy .\\dist\\bundle.js ..\\xxx\\build\\resources\\main\\static\\ /Y",
"build:dev": "npm run dev && npm run copy:dev",
"build:prod": "npm run build && npm run copy"
},
For anyone interested, this is my webpack.dev.js
const path = require("path");
const { resolve } = require("path")
const config = {
mode: "development",
entry: "./src/index.js",
stats: {
colors: true
},
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
}
};
module.exports = config;
Ideally, I'd like any changes to the React code to trigger a build, and copy the build to a different location. The current situation is that I am able to get the correct build using --watch but it's not being copied to the specified location.
Okay, so I used a library called copy-webpack-plugin.
And the updated webpack.dev.js file now looks like
const path = require("path");
const { resolve } = require("path");
const CopyPlugin = require('copy-webpack-plugin');
const config = {
mode: "development",
entry: "./src/index.js",
stats: {
colors: true
},
devtool: "inline-source-map",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["#babel/preset-env", "#babel/preset-react"]
}
}
}
]
},
plugins: [
new CopyPlugin([
{ from: './dist/bundle.js', to: '../../xxx/build/resources/main/static/', force: true},
{ from: './dist/bundle.js.map', to: '../../xxx/build/resources/main/static/', force: true}
], { copyUnmodified: true })
]
};
module.exports = config;
And updated my npm script
"dev": "webpack --config .\\webpack.dev.js --watch",
Now when I run npm run dev I have the updated bundle.js copied in the desired location, and webpack also watches my React files.
Unable to configure webpack with react
below is error :
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry['main'] should not contain the item '—' twice.
-> A non-empty array of non-empty strings
I have configured webpack and tried
below is webpack.config.js
const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
entry: path.join(__dirname, '/src/index.js'),
output: {
filename: 'build.js',
path: path.join(__dirname, '/dist')},
module:{
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins:[
new HWP(
{template: path.join(__dirname,'/src/index.html')}
)
]
}
I solve this adding "--live-reload false" to my start command.
"scripts": {
"ng": "ng",
"start": "ng serve --live-reload false",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"build:single-spa:mf-test2": "ng build mf-test2 --prod",
"serve:single-spa:mf-test2": "ng s --project mf-test2 --disable-host-check --port NaN --live-reload false" },
i think this will work
const path = require('path');
const HWP = require('html-webpack-plugin');
module.exports = {
entry: ['./src/index.js'],
output: {
filename: 'build.js',
path: path.join(__dirname, 'dist')},
module:{
rules:[{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}]
},
plugins:[
new HWP(
{template: path.join(__dirname,'src/index.html')}
)
]
}
changing scripts start command in package.json as below made it working,
"start": "webpack-dev-server --config webpack.config.js --port 3000",
If I use this to run:
webpack-dev-server --progress webpack.config.js
There are many errors like this:
ERROR in ./~/chokidar/lib/nodefs-handler.js
Module not found: Error: Cannot resolve module 'fs' in E:\study\s-webpack\node_modules\chokidar\lib
# ./~/chokidar/lib/nodefs-handler.js 3:9-22
However, if I use these to run:
webpack-dev-server --progress
webpack-dev-server --progress --color webpack.config.js
There is no error.
Here is the code repo: https://github.com/qlqllu/react-webpack-simple/tree/test
It's a very simple react and webpack project.
Please use:
npm run good
npm run good2
npm run bad
to test.
Just add this to your webpack config
node: {
fs: "empty"
}
Read more about webpack configuration here
Then it'll be like
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
node: {
fs: "empty"
}
};