I'm new to angular cli and webpack. In my project I have a webpack config file which among other configurations, it indicates that a merge file plugin (MergeJsonWebpackPlugin) should run for merging certain files and putting them on an output file somewhere else.
My problem is that when running webpack this is done, but those output files are stored somewhere in virtual memory. For what I've read, this is the normal behavior until you properly build you app for production in which case those outfile will be written in disk.
My app of course, tries to find those output files on the assets folder for using them inside the app itself. I've used another plugin (WriteFilePlugin) so as to been able to write the files in disk while running the webpack dev server, and this works great.
Now, For been able to handle this now I have a dedicated angular cli script in my package.json file
....
"scripts": {
"ng": "ng",
"start": "ng serve --port 9978",
"build": "ng build",
....
"custom": "webpack-dev-server --inline --progress --colors"
}
...
So, I have to run "npm custom" in order to have my files written in disk. Then I have to run "npm start" to serve my application and use those files. If for some reason I update my source files which should be merged, then I have to stop my start script and run the custom script for the webpack dev server all over again
Is there a way to include this automatically when running the start script via angular cli?
I've been reading that when you run "ng serve" what happens behind the scenes is:
Angular CLI loads its configuration from .angular-cli.json
Angular CLI runs Webpack to build and bundle all JavaScript and CSS code
Angular CLI starts Webpack dev server to preview the result on localhost:4200.
...because it includes LiveReload support, the process actively watches your src directory for file changes. When a file change is detected, step 2 is repeated and a notification is sent to your browser so it can refresh automatically.
On point 3 I would expect my merged files to be generated and store inside the assets folder but this is not happening (as it does when running "npm custom"), neither the update of this merged files whenever I update them.
Am I missing something? Would this be possible to do? Thanks in advance!
Related
I have a project that has 3 html files namely index.html, about.html and resource.html.
It has two css files, style.css and style1.css. It has two javascript files, script.js and script1.js. Index.html uses style.css and script.js. about.html uses style1.css and script1.js. resource.js also uses style1.css and script1.js. I wanted tried initializing a NPM project, but it asks for an entry point. What do I do?
I want to use webpack to bundle my project, and for that I need to use NPM. This project is fully vanilla.
Your question seems to be specifically related to the entrypoint question asked when you run npm init. The value you specify there will be set to th property main, in package.json.
That property specifies what file/module will be loaded when someone imports or requires you package. As it doesn't look like you are creating an npm package that will be imported and simply wants to use npm to install dependencies, you don't need to care about it. You can use the default value provided: index.js, even if it doesn't exist.
You can read about it here: https://docs.npmjs.com/cli/v9/configuring-npm/package-json#main
As it mentioned in the comments, you should download Node.js first.
Node js come with its package manager called npm.
In my opinion for your project, the webpack bundler could be confusing at first, so I think you should use Parcel instead.
Steps for your project:
step1
After you installed node with npm in your project directory folder run the following script in a terminal:
npm init -y
It will create a package.json file int the root directory of your project.
step2
run the following script in the terminal which will install parcel bundler
npm install --save-dev parcel
step3
in the package.json file you will find a line with"scripts".
add the following lines to it:
"scripts": {
"start": "parcel ./*.html",
"build": "parcel build ./*.html"
},
After you done it, you should just run the following script in your terminal, which will start a dev server on your local machine with automate reload on localhost:1234
npm run start
If you want to bundle your html project, then just run the following script:
npm run build
For better understanding how Parcel works, here is the tools documentation.
Hope it will helps!
The entry point is usually the JavaScript file that is responsible for loading and executing the rest of your code.
In your case, you can use any js script you use or create a main script to which you will attach all the necessary scripts. This will also be helpful when building applications with webpack.
{
"name": "your-project-name",
"version": "1.0.0",
"description": "Your project description",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Your Name",
"license": "MIT"
}
After specifying the entry point in your package.json file, you can then install and configure Webpack to bundle your project.
Say, we've a scenario with project of 10 commits. To be able to show changes over time, we can use "Github Desktop" too see LineChanges but can we also do it visually?
Manually, you can go back to each commit,
show all commit with "git log --oneline"
navigate to a commit with "git checkout COMMIT_ID"
make a production example with "yarn build", - create a new folder.
save that folder in a production folder ".prod", as "build-1"
go into directory .prod "cd .prod"
serve the folder "npx serve -s build-1 -p 3001"
But you have to repeat this process for every commit.
You could write a Script - to create & move build folder for each commit.
But before I make this Script, is there an easier way of handle this request?
Attempting to create a build folder for each commit - so I can serve them all at once and get a visual feedback over the progression of the project.
First of all, I am really new to NPM stuffs. But I do know React and PHP. So I have figured myself to create a CMS system using PHP as a backend and React as a frontend with the help of CDNs from Babel and React(And ofc axios to make data requests and sends). However, I do want to get into more proper way with webpack with the actual website. So, I have followed along the tutorial from this article. He has explained quite extraordinarily. However, he uses HTML whilst in my case, I have a PHP. So since I am not fully aware of what I am doing. I have redirected the HTMLWebPlugin to my PHP File in webpack.config.js.
plugins: [
new HtmlWebPackPlugin({
template: "./../index.php",
filename: "./index.php"
})
However, when I make changes the code and refreshes it, the webpage will not adapt to the changes unless I run "npm run build" for the next time. I do know I am running it from the built app. And this is because I am rather making changes on the entry files (index.js) when the webpage is rendering the output files (dist/main.js). But is this okay to connect these two and is there a way to automatically adapt to changes I make in the entry files?
So finally, I have found my solution. When you want to re-run "npm run build" every time a file changes. You need to install watch via npm. It checks all the files inside a directory and when you change something or on-save, it will re-run all the scripts inside package.json. So steps -
Install watch by "npm install watch"
When watch is installed, add "watch": "watch 'npm run build' ./directory-you-want-to-track"
Run "npm run watch"
Use this command:
tsc src/index.ts --watch --outDir ./lib
ref: https://www.youtube.com/watch?v=F6aHIh5NglQ
Yes, there is a way to solve this issue. You can use webpack's Hot Module Replacement feature. It's is just running webpack in development mode with proper set of config which you should find in webpack official documentation.
If you are using Vite Laravel plugin open package.json
install watch
npm install watch
and on scripts change it to
"build": "vite build --watch"
It should automatically update when you make changes
I'm wondering how to generate source maps in create-react-app? are they done implicitly? and do they live in the build folder
I've read quite a lot about them being generated with webpack but my app is not using it, so I was wondering how I do this without webpack?
I also don't want to eject
According to CRA documentation, source maps are generated by default in production mode.
However, you can disable this behavior (generating source maps in production mode) by running GENERATE_SOURCEMAP=false ./node_modules/.bin/react-scripts build or if you want this behavior to be permanent, do one of the following solutions:
Set GENERATE_SOURCEMAP=false in your .env file.
Modify the scripts in your package.json and replace "build": "react-scripts build" with "build": "GENERATE_SOURCEMAP=false react-scripts build"
https://facebook.github.io/create-react-app/docs/advanced-configuration
You can truly set GENERATE_SOURCEMAP=false for windows, like #3b3ziz said. However, to run the script across different OS, its better follow the Advanced Configuration Chapter in official document.
Here's what's needed:
Create a .env file in the root of the project. (same folder as your package.json)
Write GENERATE_SOURCEMAP=false in this file.
Rerun whatever you need. react-scripts doesn't detect change in .env.
I'd like to be able to run a custom command when webpack detects that my files have changed. The command is to run a middleman build command that is based on rails, and not a simple js build/include.
How would I go about this?
You can use any application that is built on top of fsnotify library. From ruby world you can use guard or nodemon from Javascript world.
You'd want to watch your generated files.
Whenever any of the two files changes, it will execute the command.
nodemon --watch webpack.config.js --watch webpack.parts.js --exec \"webpack-dev-server --env development\"