Angular + webpack2 example: angularwebpack2

Angular + webpack2 example: angularwebpack2

I have studied webpack before, but I have never used it. This time, the company wants to build an h5 website, which is just used as a trainer. It is said that angular1x is not very friendly to mobile terminals, but it is mainly because angular1x is familiar and easy to use, if development is fast, other front-end mvc frameworks are not considered.

Good webpack out of the Chinese version, for us these English is not very good, it is really great, saying angularjs when also a Chinese document is better, webpack Official Website: https://doc.webpack-china.org/

You can select a language in the upper-right corner.

Let's take a look at the directory file before getting started:

Step 1:

To use webpack, you need to install webpack first. The official website provides several installation methods, so I will not say much about it:

npm install --global webpack

Because I use webpack2, so pay attention to the differences in the configuration of version 1x to 2x, here the official website also gives the detailed difference: https://doc.webpack-china.org/guides/migrating/

Step 2: Configure webpack. config. js in webapck:

Const webpack = require ('webpackage'); // to access built-in pluginsconst path = require ('path '); const HtmlWebpackPlugin = require ('html-webpack-plugin'); const config = {entry :'. /app. js', output: {path: path. resolve (_ dirname, 'dist'), filename: 'bundle-[chunkhash]. js', publicPath: "/mobile/dist/"}, module: {rules: [{test :/\. (js | jsx) $/, use: 'babel-loader'}, {test :/\. css $/, use: ['style- Loader ', 'css-loader']}, {test:/\. (png | jpg | jpeg | gif | woff) $/, use: 'url-loader? Limit = 4192 & name = [name]. [ext] '},]}, plugins: [new HtmlWebpackPlugin ({// automatically generate Html template :'. /app/view/index.html ', filename :'.. /app/index.html ', inject: 'body'})]}; module. exports = config;

Which of the following statements is required?entry: './app/app.js' It is an entry file. All js Code is loaded through the entry file. I only use app. js here, but you can also set multiple entry files.

output: Set the output path and file. Here I compress all js files to bundle. in js, compression can also be set to multiple files. I have set the hash value next to the file to mainly consider the browser cache issue. module: configure the Javascript css html packaging and compression rules, the Writing Method and webpack1x are quite different here.

plugins： Plug-ins: webpack has many built-in plug-ins. HtmlWebpackPlugin is a built-in plug-in for dynamically generating html. Its main function is to dynamically insert JavaScript files with hash values after compression into html.

Now let's talk about the configuration. Then let's look at our portal file, app. js,

Var angular = require ('angular '); // introduce angularvar urlRouterProvider = require ('angular-ui-router '); var uiLoad = require ('angular-ui-load'); var $ jq = require ('jquery '); var animate = require ('angular-animate '); var ngModule = angular. module ('app', ['ui. router ', 'ui. load ', 'nganimate']); // create apprequire ('. /factory. js') (ngModule, $ jq); // encapsulate require ('. /route. js') (ngModule); // introduce the Routing File require ('. /directives. js') (ngModule, $ jq); // component require ('. /controller. js') (ngModule); // controller require ('. /css/style.css '); // introduce a Style File

Here, we mainly introduce js dependent files, and then introduce angular's routing and logic processing js to facilitate front-end Modular programming. It's not much to say if you look at it clearly. A separate js module directly follows the original write. The difference is to writemodule.exports = function(ngModule){}

Code: https://github.com/wangbaogui123/angular-webpack2.git

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.