I am currently using require.js for development so I can iterate quickly (change a file, refresh page, no build step in between), but I use webpack as a build tool since it is superior to r.js. I would like to get rid of require.js entirely and use webpack as a script loader in development. I know that's exactly what webpack dev server is for, but I specifically don't want to use it.
Ideally I would just include some kind of webpack loader in <script>, point it to my webpack.js build config, and let it do the job.
If you don't want to use webpack-dev-server, you could use webpack's watch functionality to keep building your script as you make changes. That will give you the workflow you're looking for. In the index.html, you'll be including your bundle only and no loader.
http://webpack.github.io/docs/tutorials/getting-started/#watch-mode
Related
What is the need for bundle.js for Node.js/Angular/React applications? What if its not used while building and deploying the application?
Where bundling comes from?
We started bundling our assets because of performance reasons.
HTTP1 supports limited requests on a single connection. Creating connections for each asset was killing the performance.
We started bundling things page by page to increase performance with more effective caching.
We were able to add the fingerprint to it and upload it to a CDN. (home-page.231434.js). So we were able to deploy our application by dockerizing it.
Bundling also helps us reduce the page size more because the bundler knows the full system. This means it can remove unused things and minify things easier. You can't do it without a bundler easily.
Also, bundlers are using transpilers. Browsers can't always be able to run the codes that we write like Typescript, and CoffeeScript. Bundlers can transpile these codes easily into bundles.
Do we still need it?
Nowadays things are changed a lot about bundling our assets.
First of all, almost every browser now supports HTTP/2. So we can request multiple files on the same connection. Bundling is not needed because of this anymore. Also, we have http/2 server push.
Libraries like React, Angular, and Vue are a lot more effective in size. They can be easily downloaded to a page from a gzip supporting source.
These are the reasons we don't need bundling anymore.
But based on your project we may still need bundling. This is the real truth.
I would still go with bundling.
In my company, we are using a container orchestration system to control our dockerized applications. We may run more than a version same time. Creating fingerprints for files while bundling and uploading them to CDN is still more effective for us. And also we are trying to get use of prefetching and preloading. CDN helps us reduce the loading times of other country visitors.
And also we are getting support from the service worker to change assets when we need it by page.
So actually nowadays it is just based on your project. There are not many performance reasons anymore.
how to create bundle.js
Nowadays,we usually use pack tools like webpack to pack js、css or other files.With proper loaders, webpack will pack the files into many bundle files and the browser will understand them.
the need for bundle.js
The module bundler will analysis the project ,find the dependency relationship and only fetch the necessary package when loading the web page.
And with module bundler, it will compiler some lanuages that browser can't read, like typescript 、less and so on.
What if its not used
Module bundler is not necessary for web project, but it will improving the performance of web pages.If not using the module bundler, web can't only fetch necessary bundle when loading.So the loading time will be longer.
I often see browser-focused javascript libraries with an option to install over npm.
Is there a reason to install it using npm instead of just using <script src="cdn-url"></script>?
I am loading many libraries, so I guess it might be a good idea to fetch these files, so I don't make so many url requests (even though all the requests are targeting CDNs).
I could potentially install via npm and then use <script src='/node_modules/...'></script>, but then I need to make these paths public accessible using express.static() or something like that.
I know that I could use webpack, browserify, etc., but they seem overly complicated when I just want to bundle a few external libraries into 1 file automatically.
The point of using npm in this case is so you get the updates automatically. You bundle to reduce the number of requests and include only 1 script tag.
but they seem overly complicated when I just want to bundle a few external libraries into 1 file automatically.
This is complicated unfortunately. It would be nice if it wasn't. Also, you need to think about things like browser caching when you update a library. If you have a vendor libraries bundle, you will have to manually cachebust with a query string when you update. So to simplify the process, webpack does it all for you.
I would move to Webpack and use the CommonsChunkPlugin to create a vendor build. See this example.
To fully automate everything, combine this with Html Webpack Plugin to automatically add the script tags and cache-bust with hashing.
If I install a module via npm, what is the proper way to use the code in my website? I mean simply making node_modules static seems ridiculous, but I can't figure out how to easily create a static folder with the few pieces of JS I want to use in it.
Of course there are symbolic links and a lot of hacks I can think of off the top of my head, but I was just curious if there is a known workflow/way to solve this problem that I simply haven't read about yet.
Browserify and Webpack are the tools usually chosen to bundle up modules managed through npm for deployment to be used client side.
You want webpack
webpack supports pre-processing files via loaders. This allows you to
bundle any static resource not only javascript. You can easily write
your own loaders running in node.js.
In my web app I was using RequireJS to asynchronously load my javascript files on demand. This worked well for dev - when debugging my app I could see which script is dependent on which and order in which they were loaded. This simplified debugging.
Later I switched to Webpack as it is much easier in configuration and easier to maintain. So Webpack now generates for me nice bundles containing my javascript code. This works perfectly well but what I'd like to have is an imitation of my previous RequireJS configuration for dev time.
When I am developing my app I want Webpack to generate some simple entry point (just like in RequireJS) which would load my javascript files one by one through their "require" references.
At the same time I still want that Webpack performed normal bundling when I deploy my app to a server.
Is this possible to achieve?
Enable Devtools in webpack.config.js to control and generate source maps (Source Maps enhance debugging process).
webpack.config.js
devtool: "#inline-source-map",
Chrome Debugger View
Nope, that's not possible. But have you tried the devtool-option? It maps back your original files in your devtools so you should see no difference whether the modules were in different files or just all in one.
I am writing desktop app with Electron from Github, and I am using React with it. One thing I notice is that because Electron uses io.js, I no longer need webpack to build my code like when I dev for client-side web app. However, I still need something that can load JSX. I am using Babel request hook, but it seems a little slow. I don't really need the ES6 features in Babel since they are supported in io.js.
Is there another way I can use JSX with Electron?
Thanks
Webpack is actually designed with Electron development in mind. What I need to do is to to specify in the webpack.config.js file is config target: 'atom'. Webpack will know that it is packaging an Atom (now known as Electron) app, and will not attempt to bundle packages such as fs, or any modules in node_modules. With webpack, I can configure babel to my heart desire, and I also get minification.
Update
As #eduludi has mentioned, the value for target is now electron.