I start learning webpack , node , and react and I am bit confused about some basic staff.
Does webpack bundle whole react.js + my javascript files into one output file, so when deploying to production I don't need to install node packages used in project (assuming that they are added to webpack.config.js file) ?
If above is right:
On my server I just need to place index.html + output from
webpack ( bundle.js) ? ( In simple scenario) ?
package.json will be used only on development side ?
You only need index.html and the bundle.js (or any name you gave the file) for the app to work, provided that you are not using any local assets. You don't need to include node modules. Package.json should tell you what to include in your project so that you don't have to include node modules whenever you want to upload your project along with few other decalarations.
The way Webpack works is that you specify one or more entry points and one or more output files. Webpack then reads the entry point and also traverses through the import / require statements recursively. It then generates final bundle file(s) which includes all the traversed files.
Yes, Webpack outputs everything in the the bundle.js file(s). You can configure multiple output bundles. So, you just need HTML and output bundle to deploy the app.
The package.json specifies the packages upon which the app depends, apart from several other things. While traversing through the entry points, webpack will also include the packages specified in import / require. Function of package.json is to tell npm to install those packages.
Related
I use webpack 4 and electron-builder to bundle and build my Electron app. I noticed that native node modules inside the node_modules directory of the app.asar bundle still contain their C++ source files.
Is there a way to exclude certain file extensions from the build step?
electron-builder can exclude files in the files section of your package.json.
Default pattern / is not added to your custom if some of your patterns is not ignore (i.e. not starts with !). package.json and /node_modules// (only production dependencies will be copied) is added to your custom in any case. All default ignores are added in any case — you don’t need to repeat it if you configure own patterns.
Example
"!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme}",
When building a React (with usual react-scripts/create-creact-app etc.) app via npm build, I always get the entry file in build/index.html.
I've tried moving the src into a subfolder, but the index.js is required to be there in src/index.js.
So how can I change the output path of the index.html?
I.e. e.g. I want to rename it to index.htm, because I am have a pedantic quirk, or I want to change the output path to build/srv/www/index.html?
(These are just examples.)
To change the output path you need to change the webpack config, and in create-react-path is not possible unless you run the eject script.
This way:
npm run eject
After running it, you will be able to access to any project configuration (webpack config in your case), but you must know, once the project is ejected, you can't go back.
More information here:
create-react-app
I've created a React project with create-react-app command, it uses webpack.
In order to use SASS I needed to eject with npm run eject command and to manually add SCSS loader inside loaders array, as explained here.
This is my first time with React and I'm using a per comonent style approach which consist in importing a .scss file per component.
I have a global variables file in ~/my-project-folder/src/assets/styles/_variables.scss and I want to import it from ~/my-project-folder/src/scenes/Auth/Login/styles/login.scss, of course I don't want to do something like #import '../../../assets/styles/_variables.scss'.
I've seen that I can refer to SASS files inside node_modules folder this way: #import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; so I'm wondering what is the way to refer to my project's root directory, i.e. ~/my-project-folder.
When you do this #import "~bootstrap-sass/assets/stylesheets/bootstrap/variables"; it will look for the bootstrap-sass in node_modules but when you want to import your global sass file in your other files then you have to give the relative path otherwise webpack will not able to resolve it for your. You can try to give public path in your webpack
I put some common code in this local module called 'client-common'. In one of the app project using this common module, I add this to package.json dependencies:
"client-common": "../client-common"
After npm install the module gets copied to node_modules. When I run (it's an Ionic project) ionic serve, it builds all fine, but at runtime in the browser I get
Runtime Error
Cannot find module "client-common"
I'm assuming this is a webpack issue? The question is why is the local module treated differently and not bundled at all?
It seems that I was supposed to supply an index.js in the common module. After adding an index.js duplicated from the existing index.d.ts, exporting everything, it just works now.
I have a project in which I use node-webkit. node-webkit allows npm packages to be used for developing desktop applications. I make use of grunt to build my application.
My folder structure looks like this at the moment:
project root
node_modules/ (1)
package.json (1)
App/
node_modules/ (2)
package.json (2)
bower.json
bower_components/
...
controllers/
filters/
...
app.js
The npm dependencies for the application itself are kept within the App folder, but the dev dependencies for building the project are not related to the application source code, so i keep them in node_modules (1) inside the root folder. I also know that in a package.json file one can express dependencies and dev dependencies, exactly for this reason. I would rather have one package.json file in the root expressing ALL dependencies, including dev dependencies, but i would rather have a separation of those dependencies on folder level.
Two questions arise:
Is this a good way to organize my npm dependencies? If yes, awesome? If no, which I expect:
What is a better way to organize my dependencies? Is it possible to specify that dev dependencies go into folder a, and 'regular' dependencies go into folder b? If so, how do I do this?
In case anyone is wondering, this is the project i am talking about:
https://github.com/michahell/pinbored-webkit
[updated folder structure to include app.js for clarity]
It is perfectly fine to keep more than one package.json file and multiple node_module directories for a project. If you consider the parts as separate components.
An example might be if, you have one directory containing a node server, another containing a react app, and a third containing some kind of deployment script written in javascript.
#Michael package.json file contains all the dependencies related to that project.There is no need for multiple package files and multiple node_modules folders..
But you need to check where is your App.js file!!
your App.js , package.json must be in same folder unless configured.