why the webpack 5 server did not generate the build folder - javascript

I am using webpack 5 to package the project, when I start the project using this command in package.json:
"start": "rm -rf build && webpack serve --mode development --config config/webpack.dev.config.js",
To my surprise the project folder did not generate the build folder. It is inconvenience because sometimes I want to check the build folder files. But now I could not found any output file of the project after start. is it possible to make the webpack server generate the distination files when developing? BTW, when using the build command, it could generate the build folder success:
"build": "webpack --mode production --config config/webpack.build.config.js",

Related

How to debug a script - "webpack serve --config webpack.config.js"

I have just started working on webpack. Needed to know how do I add a debugger for the start script in package.json
"scripts": {
"start": "webpack serve --config webpack.config.js",
}
I had used
node --inspect earlier. But, not sure how do we debug a webpack.
I tried to search for resources online, but most of them have only told about
webpack --debug <node_modules_path>
How do we debug while serving the webpack?

Esri JS Api 4.18 requires ncp copy of node_modles for BUILD and START. what and were do I need to copy assets for working in storybook.js

To use the ES modules for esri JS Api 4.18 requires ncp copy of node_modules for BUILD and START. what and where do I need to copy assets for working in storybook.js?
Copy assets
You will need to copy the API’s assets, which includes styles, images, fonts, and localization files, from the #arcgis/core/assets folder to your build folder. A simple way to accomplish this is to configure an NPM script that runs during your build process. For example, use npm to install ncp and configure a script in package.json to copy the folder. Here’s a React example:
// package.json
{
"script": {
"start": "npm run copy && react-scripts start",
"build": "npm run copy && react-scripts build",
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://developers.arcgis.com/javascript/latest/es-modules/

ok so turns out it is pretty easy. You need to ncp copy your asset files to a common directory in your project and you need to reference it in your storybook script.
{
"scripts": {
"start-storybook": "npm run copy && start-storybook -s ./public -p 9001"
"copy": "ncp ./node_modules/#arcgis/core/assets ./public/assets"
}
}
https://storybook.js.org/docs/react/configure/images-and-assets

Nodejs: How to prepare code for production environment

I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:

The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.

You need to serve your index.html file. You can use serve to host the HTML file.

Apply changes from linked npm modules without rebuilding

My webapp consists of two modules from separate git repos, with the following directory structure:
webapp/module1
webapp/module2
module1 depends on module2, so I've added the link:
cd webapp/module1
npm link ../module2
The module1 is main module, so I'm running webapp using npm start from there:
cd webapp/module1
npm start
start is configured in module1's package.json as follows:
{
"scripts": {
...
"start": "webpack-dev-server --open --progress --colors & npm run build:css -- -w",
"build:css": "node-sass src/style/main.scss dist/webpage.min.css --output-style compressed"
}
}
The problem is when I make a change to module2 source code editing its javascript sources - the change is not applied immediately to the running webapp instance. I need to execute npm run build manually:
cd webapp/module2
npm run build
build is configured in module2's package.json as follows:
"build": "cross-env WEBPACK_ENV=prod && npm run v:patch && webpack"
Only after this step the changes are applied to the webapp. Is there a way to get such changes to be applied automatically? I'm using npm version 5.6.0.

How to have different .env file for Grunt for staging/production?

How can I have a different .env file in my project when compiling my project with Grunt?

npm install --save cross-env
In your package.json
"scripts": {
"start": "cross-env PROJECT_ENV=production grunt",
"dev": "cross-env PROJECT_ENV=development grunt"
}
In your grunt file you can use process.env.PROJECT_ENV to verify the current environment depending on which script you run.

Categories