Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I use webpack on the client side without nodejs server?

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?

like image 544
LoveProgramming Avatar asked Sep 09 '15 23:09

LoveProgramming


People also ask

Does webpack require Nodejs?

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.

Can you use webpack without NPM?

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.

Is Node js only for server-side?

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.

Do you need webpack for server-side?

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.


1 Answers

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.

like image 183
dotcs Avatar answered Oct 12 '22 23:10

dotcs