I'm trying to migrate to webpack from grunt and trying to figure out the best way to bundle less files during development .
Is there a way to configure webpack to build less files into a bundle without having to use imports ?
The issue here is that the project is based on es5 Javascript.
Related
I'm creating a new reactjs project using the create-react-app. Currently the application should support only modern browsers, However the file generated by the webpack / build process is using ES5. After eject I have fully access to webpack.config and tsconfig file, but I didn`t find the cofiguration to achieve this.
I am using React with Webpack for my project. My project is very very huge. It consists of 10-12 modules and bundling of one module related JS files is taking 460KB file size. I am worried that it may take up to 5MB bundle size after I wrote code for all the modules in my project.
How can I reduce the bundle size or any suggestions to bundle for large scalable project with React and Webpack.
Thanks in advance!
You could use tree shaking of your project after you finish it.
Take a look at the official webpack docs for this: https://webpack.js.org/guides/tree-shaking/
Things you can do to keep the bundle size at minimum.
Code splitting
Production configuration optimization e.g webpack --mode production
gZip compression
minify (uglify) code
This will reduce your bundle size drastically.
My case is that we have application with stack: AngularJS and ES5 and we want to use webpack. Migration of all of the .js files (rewrite it to ES6 Classes etc.) is a big problem because of the size of the project. Is there any way to migrate it to webpack without making full refactor? The situation that we use webpack with new modules and the other modules are only plugged to webpack (somehow) with old dependency injection etc. would be satisfactory. Do you have any idea how to do it?
Here is my project structure
My goal is to generate stylus files into css, compile the jade files into HTML and image optimization. There is nothing much happening in the js folder, the js files need to be minified and in some instances, need to be combined into a single js file into dist/js folder. However I intend to use AngularJS, KendoUI and BrowserSync onto this project. I usually use Gulp to achieve the task. I would like to know if Webpack can make my life easier. Can I achieve the same using Webpack instead of Gulp. Is it worth the effort?
Yes you can use webpack!
Webpack can do much more then gulp, gulp is a only task runner on the other hand webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
I used gulp before webpack and i have to admit it did the job but was very complicated for with all those tasks and now i let webpack to do the hard job :-)
Learn more about webpack
Simple configuration from my seed
I'm trying to use webpack with my angular-meteor application. Unfortunately the meteor build fails with the following error:
While determining active plugins:
error: conflict: two packages included in the app (pbastowski:angular-babel and webpack:webpack) are both trying to handle *.js
The angular-meteor package has a dependency on pbastowski:angular-babel for ES2015 support, while webpack uses the babel-loader. Any idea how I can avoid this conflict?
This is a Meteor message that will appear when two Meteor packages try to add a Meteor compiler plugin for the same file extension, in this case ".js".
Option 1
Remove webpack:webpack from your project. Do you really need webpack in your Meteor project? Meteor bundles everything for you, so, there is no need to use webpack, as such. If you want to use ES6 modules then consider using pbastowski:systemjs.
meteor remove webpack:webpack
I don't know your reasons for using webpack, but I thought I'd mention this option.
Option 2
You can configure pbastowski:angular-babel to not compile ".js" files by adding the line below to babel.json in your Meteor project's root folder. However, if you do this, Babel will only compile ".es6.js" files and not ".js" files.
babel.json
{
"extensions": ["es6.js"]
}
Some people here are trying to say that Webpack is useless but they really don't know much about it.
It can helps you bundle a lot better your assets.
You can bundle better your CSS and even have local CSS (css that is not applied globally but only in a section of your page)
You can do code splitting and not serve your entire app on the first page load
You can have hot-reloading with no page refresh (at least with React ;))
You can use angular and Webpack together without any problem. Here is what you need to do:
meteor remove angular
meteor add angular-meteor-data
meteor add angular-templates
The only missing piece then is ng-annotate and luckily, there is a few ways. You can use the ng-annotate-loader or ng-annotate-webpack-plugin in your Webpack config file.