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.
Related
I tried to install below mentioned details for install sass on react js but not working
https://github.com/webpack-contrib/sass-loader
Thanks,
In the long term, you would want to configure your Webpack and use it to preprocess your saas files. If you can please share your Webpack config and the error message maybe some one can help.
Right now you can use a tool like Koala, which will watch and spit out CSS files. Now you can use this css file in your project without making any changes to the webpack config.
I generally use it for light html/css websites.
I am new to npm, react and webpack but I have a question. In npm how do you prevent a library from being included production package file?
For example, I am just building a very small component in react and on the site where I am going to place my small component. The problem is Jquery library and bootstrap is already being called in the masterpage of the site and I didn't want to call the same library again in my small application production build but I still want to use them during development(because I am only testing it on local and jquery is not called there). TIA
Appreciate your time ready this and hope I got to learn more from you. By the way I created the app using create-react-app but I already 'ejected' it, so its using the webpack 3
Take a look at Webpack externals
You can have two webpack configs, on the dev config you include the package as normal, but for your production config add externals for jquery, so it uses the global one already on the page
The ability you're looking for is named Code splitting
React loadable may be a good option for you as well
I am attempting to publish a small library of react UI components. These components have dependencies: Matarial UI, React Rotuer, etc;
When I build my code I get a warning about exceeding the recommended bundle size. I am at 451Kib. When I analyze my bundle I notice that 96.1% of it is dependencies that have been added to the bundle from node_modules.
Since I am only going to be publishing a handfull of components that are also going to be imported with webpack, is there a way to exclude the dependencies from my bundle and have them packaged in the bundle of any app that uses my components?
I think I need to use code-splitting, or lazy-loading, or something, but I am not sure of the proper way to get started.
Pieces of Advice I can give you:
Use webpack-node-externals to exclude node_modules from bundle. If your code depends on packages that won't be included in the user app - use whitelist to bundle them as well.
Also mark Matarial UI, React Rotuer (and probably react) as peerDependecies in package.json.
I'm wondering if it is possible to split up bundles using the angular cli based on a component. For instance, I would like to have multiple components in this app that could or could not exist on the same page, but reference them through separate bundles. Some kind of set up like this would be desired:
/test-app
.angular-cli.json
package.json
tslint.json
src
app
email-list
*.ts
*.html
email-compose
*.ts
*.html
links-links
*.ts
*.html
After the project is built, I would like to be able to have the following bundles:
poylfills.bundle.js
vendor.bundle.js
email.bundle.js
links.bundle.js
Is this possible?
They've prepared support for multiple apps/entry-points (which is equivalent to what you're asking) in the angular-cli.json, but they havn't gotten around to implement it yet. Here's a link to the issues page
In addition, they've announced that they don't intent to expose the webpack configuration of angular-cli, so you wont be able to use your own custom webpack config to do the separate bundling.
So for now, I guess the conclusion is, that it may not be possible (or worth the effort) to make Angular-cli create multiple separate bundles. So you'll probably have to either wait, or skip using the cli, and do the bundling "manually" (create your own bundling process using grunt, gulp, webpack or similar).
I'm trying to use webpack to refactor a backbone application that uses no modularization at all.
All the models and the views are added through script tags to index.html and are globally available.
I have read a couple of tutorials about refactoring with webpack but they only seem to take into consideration the use of webpack on applications that already use modules.
Do you know if there's a way of adding webpack to an app like mine without having to refactor every single js file?
Thanks
You will have to modify each of your js files some, but Webpack will automatically treat each file as a module for you (similar to wrapping every file in an IIFE http://benalman.com/news/2010/11/immediately-invoked-function-expression/).
What you have to do is define which modules have dependencies on other modules. Module's that have dependencies need to define those. Webpack supports many module syntax's, and comes with Commonjs and AMD out of the box. Commonjs is the recommended syntax for webpack. The best place to start is probably this guide:
https://github.com/petehunt/webpack-howto