I am trying to build a web app where I want to store all html, js and css files on amazon s3, and communicate with a restful server through api.
I am trying to achieve lazy loading and maybe routing with react router. It seems that webpack has this feature code splitting that would work similarly as lazy loading.
However, all of the tutorial and examples I found involves webpack-dev-server, which is a small node express server. Is there anyway I could generate bundle at build time and upload everything to amazon s3 and achieve something similar to Angular's ocLazyLoading?
Installing WebpackTo install the webpack module bundler, you must first have npm, the Node. js package manager, installed. Type the following command to install the webpack CLI and JavaScript module.
Practically speaking: no. Webpack is a Node-based application, and to install and run it you need both Node and NPM. Not only that, but for Webpack to do anything meaningful, it requires "loaders" that are Node modules which should be installed with NPM as well.
Node. js is a server-side JavaScript run-time environment. It's open-source, including Google's V8 engine, libuv for cross-platform compatibility, and a core library.
If you're trying to server-side render a frontend component that isn't in JavaScript, you'll need Webpack and plugins like vue-loader to compile the specialized syntax into JavaScript.
It's definitely possible to create a static bundle js file, which you can use in your production code that does not include webpack-dev-server
.
See this example as a reference (note: I am the owner of this repo). webpack.prod.config.js
does create a production ready bundle file using webpack via node.js which itself does not require node.js anymore. Because of that you can simply serve it as a simple static file (which is done in the live example).
The key difference is how the entry points are written in the dev- and production environments. For development webpack-dev-server
is being used
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index'
],
// ...
}
In the production environment you skip the webpack-dev-server
and the hot reloading part
module.exports = {
entry: [
'./src/index'
],
// ...
}
If you want to split your code into more than one bundle, you might want to have a look at how to define multiple entry points and link the files accordingly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With