Using Webpack in angular

Recently, in the development of the company project, due to too many components, too many requests, resulting in the site is too slow, so we have a strong demand, that is, the development of JS packaging. After comparing the various packaging tools, we finally selected the Webpack. Therefore, in this week, in addition to the study of how cross-domain requests, the most important time to study webpack, although not to achieve the ideal state, but the basic needs should be satisfied, and now share out, I hope to learn from you angular helpful.

Before the text, let me say, I would like to share the following:

· Webpack used in angular

· Establish development environment and production environment

· Optimize packaging performance, separating third-party libraries from developed code

· To compress the code

· Integration of some third-party frameworks

· Webpack solve the cache problem, automatically use the latest JS file after online

First, clone the demo project and install the dependent

git clone Https://github.com/liuchungui/angularWebpackDemo.gitcd Angularwebpackdemo

Git checkout-f step0

NPM Install

Then, write the Webpack configuration file

Create the Webpack.config.js file, and write the following:

Const WEBPACK = require ("Webpack");

Module.exports = {

Entry file

Entry: "./demoapp.js",

The resulting file configuration

Output: {

The path to the generated file, __dirname is the current project path, and the Webpack.config.js sibling

Path: __dirname,

Filename

FileName: "Bundle.js"

},

Module: {

Package the CSS file in

Loaders: [

{test:/\.css$/, Loader: "Style!css"}

]

},

Plugins: [

/**

* This plugin will automatically load jquery to resolve issues that jquery cannot reference

*/

New Webpack. Provideplugin ({

$: "jquery",

jquery: "jquery"

})

]

};

The configuration options used above probably say:

· Entry: Import file, you can pass a string, that means the portal file only one, you can also pass an array or object, specify multiple portal files

· Output: Generates the configuration of the packaged file, you can specify the path, and when there are multiple portal files, you can also use [name], [hash], [chunkhash] equivalent, to correspond to the configuration of the file replaced with the portal.

· Loaders: It can convert a resource file in a project, for example, the CSS style file is converted to a style tag inserted into the HTML.

· Plugins: plugin, it can do a lot of things, very powerful, the official provides a lot of plugins, third parties can also write plugins. The role of the Provideplugin plugin above is to automatically load the jquery module, which means that jquery becomes the global module, and of course we need to use the Script tag import in index.html.

Subsequently, the import uses

First, we import the bundle.js in index.html:

<script src= "Bundle.js" >script>

Then, we do not need to import JS files in the index.html, only need to import the module using require, Webpack will solve their own dependencies. For example, we import angular and bootstrap in the Demoapp.js in the demo project.

' Use strict '; require ("angular"); require ("Bootstrap");

var demoApp = angular.module (' demoApp ', []);

Of course, the above require ("angular") import is node_modules in the angular module, if we want to import the local JS file, how to do? As follows:

Require ("./test");

Another use of this approach is that we can write a shared third-party library, components to a file, and then the other files just need to import the file once.

For example, above we can create a common.js file and then import the angular and bootstrap,common.js content as follows:

Require ("angular"); require ("Bootstrap");

Then use it in the demoapp.js:

' Use strict '; require ('./common ');

var demoApp = angular.module (' demoApp ', []);

The effect is the same, but this way to solve the very good, solved I once a pain point, that is, we project sub-role has a lot of side, each side has a common content, when writing a component, we need each end in index.html to import again, very inconvenient.

Note: Since jquery does not have a modular concept and does not fit webpack, we need to import it in index.html when using jquery, and then use the Provideplugin plugin to load it automatically.

Finally, packaging runs

Packaging only needs to run in the project root directory:

Webpack--progress--color

It uses the Webpack.config.js configuration file in the current directory by default, and after it runs successfully, it generates a Bundle.js packaged file.

We can access the browser, we can see the effect, which means OK.

Of course, when we develop, we need to see the effect of changing the code in real time, and it's too cumbersome to pack and build every time. Then you can use the debug commands that webpack specifically prepared for us:

Webpack-dev-server

Then enter http://localhost:8080/in the browser to see the effect.

In fact, in addition to this, there is another one can also be debugged, that is, the listening mode:

Webpack--progress--color--watch

In the listening mode, when our JS file changes, it will be heard and then repackaged.

In addition, multiple clients, configuring multiple portal Files

In our company project, there are many clients, I configure them as a number of portal files, then how to configure multiple portal files? As follows:

Const WEBPACK = require ("Webpack");

Module.exports = {

Entry file

Entry: {

DEMOAPP: "./demoapp.js",

Vendor: "./vendor.js"

},

The resulting file configuration

Output: {

The path to the generated file, __dirname is the current project path, and the Webpack.config.js sibling

Path: __dirname,

Filename

FileName: "[name].bundle.js"

}

};

They will generate DemoApp.bundle.js and vendor.bundle.js two packaged files.

View Final effects

If you want to see the final effect of the demo, run the command as follows:

Git checkout-f step1

NPM Install

Webpack--progress--color

Summarize

When I first started reading the official documentation, I felt that I would use it, but I didn't know how to use it on angular. After looking at someone else's code, I found that similar to react-native, all using the Require syntax (COMMONJS syntax), enlightened. Later, found that a lot of third-party frameworks are suitable for webpack, but jquery does not, find the stackoverflow above solutions to smooth solution. So toss down, and then produced an article, I hope to be helpful to everyone. Of course, something more than that, and then update it later. Also, I will continue until the entire webpack configuration reaches my desired state.

Source: Liuchungui ' s Blog

Using Webpack in angular