Webpack Bundler | Concepts Library

How To Install The Webpack Bundler In Mac Os Sierra

Welcome! This is the Installing the Webpack Bundler page of the MMINAIL.

Note. This page has explicit access to the local jQuery library as well as a local complimentary working (.js) file.

Installing The Webpack Bundler

To install the Webpack Bundler, or WPB onto your development machine, first install both node and the Node Package Manager, or NPM.

After the developer has installed both node and and the Node Package Manager, or NPM onto his or her development machine, the WPB may then be installed globally using npm, as follows:

From the global Terminal prompt $ ...

npm install -g webpack

Updating The WPB

Hey! The Web Pack Bundler Team just came out with a new, updated version of the Webpack Bundler WPB.

How do I upgrade the WPB?

To upgrade the WPB, you must first counter-intuitively uninstall the old version of the WPB and then cleanse the cache!

As follows:

From the global Terminal prompt $ ...

npm uninstall -g webpack cache clean

Once the old version of the WPB has been removed from your development machine ...

And, the cache has been cleansed ...

You may simply next re-install the WPB, first globally as above, and then next within your local app(s), for either development purposes, as follows:

From the Integrated Terminal prompt $ in Visual Studio Code representing the root directory of the targeted project ...

npm install --save-dev webpack

Or, as a distributed app without the development flag.

From the Integrated Terminal prompt $ in Visual Studio Code representing the root directory of the targeted project ...

npm install --save webpack

Decisions, Decisions!

So, now that you have been shown two flag configurations to the solution, which one do you use?

Respuesta

That all depends upon where in the package dot json file you wish to house your dependency.

Your choices are simple 'dependencies' or 'dev' Dependencies.

Which of the above two choices correlates to the install flag --save-dev and which one correlates to the install flag --save?

If you guessed 'dev' Dependencies correlate with the install flag --save-dev you are correct!

Therefore, by extension, simple 'dependencies' correlates to the install flag --save.

Each flag directs traffic to a specifc spot in the package dot json file.

As the following excerpt shows, it's the simple 'dependencies' first, the 'dev' Dependencies second when installing a dependency ( separate app ) to your Angular 4 project.

From the package.json file ...

"dependencies": {
    "@angular/common": "4.0.1",
    "@angular/compiler": "4.0.1",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.0.3",
    "@angular/http": "4.0.3",
    "@angular/platform-browser": "4.0.3",
    "@angular/platform-browser-dynamic": "4.0.3",
    "@angular/router": "4.0.3",
    "bootstrap": "3.3.7",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.2.1",
    "jquery-mobile": "1.5.0-alpha.1",
    "rxjs": "5.3.0",
    "tether": "1.4.0",
    "zone.js": "0.8.9"
  },
  "devDependencies": {
    "@angular/cli": "1.0.1",
    "@angular/compiler-cli": "4.0.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.70",
    "codelyzer": "2.0.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.3",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.1",
    "ts-node": "2.0.0",
    "tslint": "4.5.1",
    "typescript": "2.2.2",
    "webpack": "2.4.1",
    "webpack-dev-server": "~2.4.2",
    "autoprefixer": "^6.5.3",
    "css-loader": "^0.27.3",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.6.3",
    "file-loader": "^0.10.0",
    "json-loader": "^0.5.4",
    "karma-sourcemap-loader": "^0.3.7",
    "less-loader": "^4.0.2",
    "postcss-loader": "^1.3.3",
    "postcss-url": "^5.1.2",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.3",
    "script-loader": "^0.7.0",
    "source-map-loader": "^0.1.5",
    "istanbul-instrumenter-loader": "^2.0.0",
    "style-loader": "^0.13.1",
    "stylus-loader": "^3.0.1",
    "url-loader": "^0.5.7"
  }

What you may ask is a 'simple' dependency as opposed to a 'dev' Dependency?

Well, as the title suggests, the 'dev' Dependency points to a separate app or dependency in your Angular 4 project that is required to compile itself during development.

Yet, the separate app, or dependency gets tossed aside never making it into the final output dist of your ng build --prod command.

Whereas, the separate app(s) tag'd with 'simple' dependencies get bundled at the end with the production copy.

So, which dependency is what type?

Da Rule

Rule. If the dependency in question is required to render a component within the production copy of your Angular 4 project ...

Then, include the separate app as a 'simple' dependency and use the simple install --save flag configuration.

If, on the other hand, the dependency in question is required only for the mechanical final building of your Angular 4 production project ...

Then, be sure to use the install --save-dep flag to continue to segregate within the package dot json file those dependencies that are deemed 'user friendly' and those 'dev' Dependencies that are deemed 'machine friendly'.

The Angular CLI

Usually, but not always, the pertinent instructional data page for any separate app house'd at the Node Package Manager, or NPM should include which flavor of flag to be used at npm install.

But, not always!

As a guide, when tweaking the Angular Command Line Interface, or CLI, for example ... First venture into the package dot json file to see how the original install of the Angular CLI for your project did indeed segregate at the respective time of install.

	Finito!

Supporting Content

Welcome! This is the Supporting Content section for the Webpack Bundler page of the MMINAIL.

The Concept Library of the MMINAIL is a static informational website.

As such, a Supporting Content section is placed below each (.html) page in the flow of the default layout to grant the end-user additional pertinent information when navigating this site.

E Books

With today's explosion of modern devices ...

Some consumers like to read their articles on their Kindles or iPads.

Therefore, a method to convert any page of this website into an eBook ...

Is auto-built into the top of the Navigation <aside> ...

As well as in the <footer> of every page.

Dot ePub

Simply click the following eBook icon = eBook icon to render the current page as an Overdrive (.epub) or a FB Reader (.mobi) .

Apple iBooks

The Apple iBooks platform also reads and displays the (.epub) format, as well.

When navigating the menu at the Navigation <aside> ...

Look for the book icon to download the offered eBook directly to your machine.

Then, simply right-click over the newly downloaded (.epub) and open up the file in the new Book app for Mac devices.

Secure Hyperlinks

The A's Have It!

In today's complicated world of coding, even the use of the standard hyperlink ...

<a href="" title="" target=""></a>

Is placed into question by the standards of newer, more modern browsers such as Google's V8 powered Chrome browser.

Safe Internal Links

Therefore, to make life easy for the end-user ...

The MMINAIL will show safe, internal links in the bootstrap default color of light dodger blue.

Safe External Links

In addition, safe external links ...

When designated https secure ie.) https://.

Will also be shown in the color of light dodger blue.

Standard External Links

All other external links ...

If designated with standard http ie.) http:// ...

Will be shown in the color of indian red.

How To Navigate This Website

At this website ...

We have the <html> hub for the Benefit Corp aka our Concepts Library.

You (Usted), as a current visitor to our Concepts Library, are now at the Webpack Bundler page.

Navigation Aside

In the Navigation <aside> section of this website ... ...

The end-user will find a Stack of Topics.

Or, for you smartphone users ... the Navigation <aside> section is up! ...

There, the smartphone user will find the same Stack of Topics for the Concepts Library at MMINAIL.

Stack O Topics

The Navigation <aside> section to your right ... ... If you are viewing this page from the traditional landscape style of your laptop.

Or, the Navigation <aside> section from above ... ... If you are viewing this page from the modern portrait style of your smartphone ...

Both house the same Stack of Topics available for selection at the Concepts Library of the MMINAIL.

Instruction Set

To access one of the Articles or Lessons available for your preferred Topic of Interest ...

Simply scroll through the tabs of Topics above, or to the side ...

And, click on one that you may have an interest in.

Back Home

Note. At each Topic of Interest, the end-user will find a hyperlink back to the Home page of the Concepts Library.

By clicking on the Home icon the end-user will be returned to the Home page of the Concepts Library.

Subtopics

When an end-user clicks on a Topic of Interest ...

Either above ...

Or, over at ...

The Stack of Topics in the Navigation <aside> section ...

The menu explodes vertically to reveal several subtopical choices.

To select any other Topic of Interest, or any of the many subtitles ...

Simply click on the corresponding glyphicon to open up the referenced file.

Unstuck

If you get stuck ...

Simply click on the Home icon to be hyperlinked back to the Home page of the Concepts Library.

Screen Responsiveness

The pages of the Concept Library have been tested for mobile responsiveness.

The authors have determined the accuracies of the page renderings at both a portrait width of 360px and a landscape width of 640px.

Devices

Testing devices have included selections from the following list of devices ...

Amazon Kindle Fire HDX 7, 3rd Generation tablet

Virtual Galaxy S5 smartphone emulator

Kindle Tablets

On the Kindle tablet, both portrait and landscape renderings appear accurate.

Amazon Fire Phones

And, on the Amazon Fire phone, using automatic screen rotation, both portrait and landscape renderings appear accurate.

Foreign Language

The foreign language expression ¡Finito! can hold a translation from Spanish-To-English ...

Via the <title> tag.

Simply hover over the word in Spanish to reveal its English equivalent.

For example ...

Hovering over the Spanish phrase ¡Por ejemplo! reveals the English equivalent of "For Example".

Try it!

Acronyms

For an acronym to be visually effective when reading a line of text ...

The acronym must first be declared.

In addition, the acronym must stand out from the body of information.

To accomplish both of these objectives, the MMINAIL has selected Ashley Gold.

Ashley Gold

Ashley gold is a primary color within the registered Logo Badge of the Benefit corporation.

Whenever the end user spies a designated Acronym of Ashley Gold ...

Simply hover over the Acronym to reveal the underlying meaning embedded in the title element of the <abbr> tag.

Definitions

The <abbr> tag can also be used to house Definitions as well as Acronyms.

As we have seen in the above referenced Ashley Gold definition ...

Whenever the end-user spies a designated Acronym or Definition of Ashley Gold color ...

Simply hover over the Acronym or Definition to reveal the underlying meaning embedded in the title element of the <abbr> tag.

Carriage Return

The carriage return, or ... ➡️

The carriage return is used extensively throughout the working repos of the Concept Library to prevent the overflow of raw code.

By preventing the overflow of raw code when rendering a code block, the view of the end-user avoids the slider effect.

And, by eliminating the slider effect, responsive views using other devices ie.) Kindle Fire HDX will maintain screen boundaries without overflow.

Site Monitoring

Note. The Http Headers of this repo are being monitored by Internet Supervision dot com.

Reproduction In Part

Most authors will allow for the reproduction of their works in part ...

When the case of brief quotations embodied in critical articles or reviews is addressed.

As long as an appropriate citation is presented concurrent with the review, authors are generally receptive.

Therefore, please remember to provide a Link-back to the original author, or to the publisher of the original publication when citing.

Thank you for your consideration.

Got An Idea?

If you have an idea that will spruce this site up even better than it already is ...

Then, you know the drill ...

Simply go ahead and fork this repo, make your changes, and send us a pull request.

Coding Community

If you are an expert in your field of specialty ...

Why not fork our Concept Library and create a new Topic of your choosing, or embellish upon an existing Topic.

Pull Requests

Send us a Pull Request.

Our team of coders will review your contribution and get back to you with a "thumbs up" ( or, "thumbs down" ).

Can You Contribute Code?

As we can now decipher the time spent by our functions at the code block level ...

How much of your coding time are you willing to invest in this project?

As we rely heavily upon contributions from the coding community, your contribution of code will be greatly appreciated.

Thank you for your effort and participation in our program to code the globe!

Can You Contribute Cash?

If you have enjoyed and benefited from this article ...

Then, why not drop a little change in our digital bucket at the Square Up - Cash Me donation portal.

As we can now spend the equivalent of our grandparents' monthly mortgage payment at our local Sunday football games ...

How much of your spare cash are you willing to invest in this project?

Starving Coders

As we rely heavily upon contributions from the coding community, your contribution of cash will be greatly appreciated.

Note. Your donation will help us fund our Starving Coders initiative through our Medcoin™ Crypto Currency Division.

Can You Contribute Ether?

As we have witnessed the exponential growth of Bitcoin (BTC) from 9 cents USD per coin ...

To over $18,000 USD per coin over the past nine (9) years.

Plus, the recent explosion of Ripple (XRP) from less than one-penny to over $2 USD.

How much of your spare Ether ( ETH ) are you willing to invest in this project?

As we rely heavily upon contributions from the coding community, your contribution of ether will be greatly appreciated, as well.

Public Hash

Simply scan the following QR Code to extract our Coinbase public hash address to send Gifts O Wei in support of our Medcoin™ Crypto Currency Project.

Note. The easiest and safest way to extract our public `ETH` hash-address is to point your smartphone at the `QR Code` shown and engage the `Sophos Intercept X QR Code Scanner`. From there you will be able to open the link safely via the `Sophos Intercept X Link Checker`.

No Warranty

Disclaimer. The author of this website has made every effort to ensure accuracy ...

However, the information contained in this website, and in its pages, is offered to the public without any warranty expressed or implied.

Therefore, the author of this website, and by extension its pages and content cannot be held liable for any damages that may be caused indirectly or directly by the software instructions or tutorials contained in the pages of this website.

License

The license and privacy policy pages ...

For further review, please see the License page and the Privacy Policy page of this website to clarify.

The Medical Marijuana Initiative of North America
- International Limited