I am currently looking into React, React-habitat, and Webpack.
My question is does Webpack also bundle the index.html file where I reference the bundle or is this kept separate? Is it possible to exclude this without specifically stating this in the Webpack config file?
this is the current structure am envisioning.
https://imgur.com/a/98or9
I know that all the dependencies found in my entry file for Webpack are bundled. The reason I would like to know this is because I am doing some research on how a CMS can be built around the three topics I mentioned above. I need to know if the index.html file is also bundled or not because I would like to edit the original index file(if it is not bundled) instead of repackaging everything for every change.
Hope someone understands what am looking for.
Related
I am new to Electron, and I have been having some trouble trying to do something simple in an Electron + React application. All I want to do is: Load a 3D model (.glb) located in my src/assets directory from a React component. I created the project using this guide. In a typical React project, I can just import the file directly in my JS module and reference the path in my code. However, with the default Webpack config, the file can't be found. There's obviously a gap in my understanding on how React + Webpack work when loading assets. What am I missing? Any help is greatly appreciated.
Thanks!
Turns out, the Webpack documentation spells out the answer clearly. Who knew? I found a lot of similar questions/answers for older versions of Webpack, so I'll post one here for Webpack 5. It requires a trivial two-line addition to the webpack.rules.js file:
{
test: /\.(png|jpg|gif|svg|glb)$/,
type: 'asset/resource'
}
The key is the asset/resource line. It's new to Webpack 5 and allows the bundling of assets without needing any additional loaders. With that, assets can be included as Javascript modules and Webpack will take care of the rest.
So, one can do:
import modelSrc from "../assets/some_awesome_model.glb";
And that's that. Webpack will spit out a URL such as /9feee593dc369764dd8c.glb, meaning Webpack has located and processed the asset.
I have created a fresh app using Vue CLI (PWA is enabled). I want to generate an asset-manifest.json file but with the exact same structure like what Create React App generates.
For example, the asset-manifest.json file of a fresh app created by CRA, looks like this:
But Vue doesn't generate such a file and I had to install webpack-assets-manifest and then by adding the following configuration to vue.config.js file:
I was able to make the app generate this file for me. But obviously the output looks like this:
The question here is that how I can configure my Vue app to generate this file with the exact structure of React app (generating chunks automatically, categorizing by entrypoints and files keys, as well as generating the main.chunk.js, bundle.js files, etc.)?
I am not professional at Vue and I am used to React. So, any suggestions or thoughts from experts are welcome.
I wanted to have files key, so I used the transform option like this. I also renamed app.js to main.js. This customization were enough for me, for now.
I want this to be generated during development build as well and generate bundle.js, but it doesn't generate this file till I run yarn build which I have to research on. Let me know if you have any ideas.
You can use the entrypoints: true to generate entrypoints key.
The generated file was like this
I'm using React JS and when I build my app to deploy, I use react-scripts as follow below:
react-scripts build
And my chunk files are something like:
0.cebdafcf.chunk.js
1.fa48de00.chunk.js
2.98b9bea7.chunk.js
...
52.9ca2408d.chunk.js
App.7b21e172.chunk.js
dashboards.f6142b89.chunk.js
user-forgot-password.06d87a22.chunk.js
views.16dc12b2.chunk.js
...
But every time I build, the hash suffix are the same, for example, I'd like every build change the hash for App..chunk.js
Is there any way to do it?
I've tried the option described here: Github Renamer Answer, using the lib renamer, but it didn't work to update the hash name for all chunk files.
Thank you in advance for helping
What I've done to solve was: First of all, I had to eject react so on this way I had access to change the webpack.config and after I've changed on webpack.config everything with
[contenthash:8]
to
[contenthash]
So, on this way, everytime we have a change on the file, the hash config chunk will be different. And for me, it's enough.
I don't know if someone has another solution, better or simpler. If yes, post to help other people.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
This is an XY problem; answering any part would do.
X: I want to generate multiple bundles out of a single source tree. I'm aware of webpack supporting this, but I'm afraid, I can't use it. For example, my Router gets fed by one or more maps mapping a route (string) to a page (component). I'm storing these maps in separate files and comment importing and using them out as needed (I wrote a simple script doing this for me).
Is there a better solution?
Y: So when building the admin bundle, the user pages are not reachable from the index.tsx. Nonetheless, I'm getting typescript errors for them. The same happens even when I create a new unused file containing an error.
How can I avoid compiling unused files?
I'm not posting here all my config files as I hope, there's a simple setting for this somewhere. I'll do it when needed. Alone the list makes me depressed:
.babelrc
.env
.eslintrc
.gitignore
config-overrides.js
package.json
tsconfig.json
tslint-imports.json
This is a partial answer, but hopefully it will take you in the right direction. Typescript looks at tsconfig.json. Assuming your initiation is from an npm script, you can specify which tsconfig to use with the --project flag, like tsc --project tsconfig-1.json.
In your tsconfig.json file, only include the entry file, like
include: [
"src/app/index.ts"
]
If you have something like "src/**/*", then it will process all files. But it you specify only the entry file, then it will process only the files in that import tree. The tree is defined by the import/import() statements.
For reference: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
If you want to create multiple bundles, then you'll need to run multiple npm scripts and have multiple tsconfig files or else specify the files from the command line.