Can I use Angular 6 without Webpack? - javascript

I want to compile my angular 6 codes and pack them myself.
Can I use Angular 6 without Webpack?
And Does packing .html and .css into a .js WebPack's Job or Angular CLI's Job??

Webpack is a JavaScript module bundler. Angular cli uses it to pack and build the Angular app.
If you want to use Angular cli then you're stuck with Webpack for now.
Otherwise if you create your own architecture to bundle and build your app (which is harder) then you can use other Javascript module bundlers such as Rollup and Browserify

Webpack is a powerful module bundler. A bundle is a JavaScript file that incorporates assets that belong together and should be served to the client in a response to a single file request. A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file.
Webpack roams over your application source code, looking for import statements, building a dependency graph, and emitting one or more bundles. With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files.

Related

How to add Webpack to a project for strictly minification?

I am a dev on a web application that consists of Java Server Pages which act as the HTML, a Java backend, and Javascript front-end files. I have been tasked with looking into adding Webpack to the project, with the goal of only using it to minify Javascript files at first (eventually we will use more of Webpack's features of course). I have tried doing research via Google into Webpack minification, but I am having trouble finding anything detailing how to use it for just minification, instead of bundling the project files.
Does anyone know how to use Webpack for strictly Javscript minification?
Webpack out of the box is anticipating on processing JS and will run minification on production builds by default.
https://webpack.js.org/configuration/mode/ (different build modes)
Assuming you are already past configuring a JS entry file to consume all your JS files:
https://webpack.js.org/configuration/entry-context/#entry
AND configured a loader on how to handle each JS file imported in your entry file appropriately.
(Feels like you want asset/resource. Pay close attention to asset modules type and generator options)
https://webpack.js.org/guides/asset-modules/
The settings for minification on a production build are what is known as the optimization.minimize configuration of your webpack.
https://webpack.js.org/configuration/optimization/#optimizationminimize
With Webpack5, further options around the minification engine has been exposed and is known as optimization.minimizer configuration options:
https://webpack.js.org/configuration/optimization/#optimizationminimizer

Compiling an Angular 1.x project

So I've been handed an Angular 1.5.6 project that has source files and compiled files but nothing to instruct how to compile the source files. Is there a standard approach I'm missing to do this? There's no buildfile, package.json, angular.json file in the src directory.
Question is quite general.
Not sure about any 3rd party libs may be present and require some additional transformation, but angular app source files probably may be just be joined altogether(maybe after transpiling with Babel) and injected into HTML with <script> right after angular.js itself.
Also if you see something like strange "ngInject"; strings or comments you will probably need ng-annotate module to autogenerate dependencies for modules. It may be run in combination with gulp or Babel.

Migration from grunt to webpack in angular 1.6

I have an existing application in Angular 1.6.
We are currently using grunt and bower to build the application. Now the requirement came to migrate the existing application to webpack and removing grunt and bower. Anyone can give me the right suggestion, how to approach for the same. I am struggling with entry point, bundle path and the loader I am supposed to put in webpack config. The index.html, which script tags to remove and how to include the bundle file. Any guidance would be appreciated.

Webpack and wordpress only to manage sass

I'm trying to use webpack only to parse my scss files to css in development environement and I was wondering if there were a way to avoid .js file generation ?
I'm new to webpack and I don't know if this is a way of using webpack that is desirable.

Angular 2 Bundling and Minification

I watch a lot of tutorials of angular 2, and I couldn't some questions:
1- Should I use webpack for minification and bundleling?
2- Should I minify and bundle the js of the components itselfs.
3- Should I minify and bundle the js services that the components expose e.g.
personService.js is used in person.ts?
4- What happens with the path
of the service I provide inside the component, now it will be in one
file located in another place? Should I change the path of the
service called in the component depending on if I'm in development o
production?
How are you currently handling module loading for your applications? I'm not as familiar with webpack, but SystemJS offers a builder/bundler that will do all of this for you then all you need to include in your html is the script for your bundled/built file.
I haven't used Webpack but SystemJS worked well for me. Gulp can be used to build, minify, and bundle all your code using a system.config.js to worry about the file locations of your source and dependencies.
Here is an example of Tour of Heroes where all the Typescript source is bundled into one JS file.
Angular CLI now makes all of this really easy, supporting bundling and minification (using WebPack underneath, but without any need to set it up), and Ahead-of-Time template compilation, which massively reduced the bundle size.
See: Angular 2: Reduce app size (in addition to bundling/minification)
It also sets up development and production environments, which you can import into components if you have different settings in dev vs. prod, and you can make your own custom environments and use those too.

Categories

Resources