I am in the process of splitting up an Angular application, so the service layer can be re-used. I know it's possible to preprocess coffee files in webpack modules, but what about bower packages? If so, how can I achieve this?
Use the coffee loader - https://github.com/webpack/coffee-loader and provide the path:
require("coffee!./bower_components/strawberry_module/src/tasty.coffee")
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.
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 want to automate the injection of new js/css files to my ionic project. So, I found this really useful article, which shows how to do it using gulp inject, but just with my own js/css files (those in js/css folders).
If I now install another external library using bower, for example:
bower install angular-google-maps --save
That library is not automatically injected, because it's installed in lib folder, outside js folder, as it's a library from an external vendor.
I guess I should have another gulp task to minimize the external libraries installed with bower, and put them into js folder to make them injectable. Am I right?
Yes, you are right.
Quoting your article:
There is all of kinds of additional functionality that you can perform with gulp such as minifying of css and javascript files, running npm/bower commands, or running sass compile commands. The gulp-inject is just one module.
You can use a module like main-bower-files to retrieve these files and do whatever you want with them.
You can also have a look at this answer to get a starting point.
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