ANGULAR-CLI 1.6.7 Building Applications about webpack some configurations

ANGULAR-CLI 1.6.7 Build Some configuration of application Webpack

Tags: Angular

ng new my-appa project that uses initialization does not contain a Webpack configuration file and requires a ng eject command to add a webpack.config.js configuration file.

In this case, the file already has a more complete configuration. But some other needs are missing.

1. uglifyjs-webpack-pluginJS Compression Plug-in

Compress the JS file to reduce the volume of the file after packaging.

const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);...new UglifyJsPlugin({  "test": /\.js$/i,  "extractComments": false,  "sourceMap": true,  "cache": false,  "parallel": false,  "uglifyOptions": {    "output": {      "ascii_only": true,      "comments": false    },    "ecma": 5,    "warnings": false,    "ie8": false,    "mangle": {      properties: {      regex: /^my_[^_]{1}/,      reserved: ["$", "_"]      }    },    "compress": {}  }})

2. compression-webpack-pluginGenerate gzip file plug-ins

Further reduce the volume of packaged files.

const CompressionWebpackPlugin = require(‘compression-webpack-plugin‘);...new CompressionWebpackPlugin()

This requires the server to open gzip on; , in Nginx, for example, the server needs to be configured as follows:

conf/nginx.conf:

  http {include mime.types;    Default_type Application/octet-stream;  #log_format Main ' $remote _addr-$remote _user [$time _local] "$request" ' # ' $status $body _bytes_sent    "$http _referer" ' # ' "$http _user_agent" "$http _x_forwarded_for";    #access_log Logs/access.log Main;    Sendfile on;    #tcp_nopush on;    #keepalive_timeout 0;    Keepalive_timeout 65;    # Open gzip gzip on;    Gzip_static on;    Gzip_min_length 1k;    Gzip_buffers 4 16k;    Gzip_comp_level 2; Gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript    application/x-httpd-php image/jpeg image/gif image/png;    Gzip_vary on;    Gzip_disable "MSIE [1-6]\.";        server {Listen 8088;        server_name localhost;            Location/{root website/angular;        Index index.html; }    }}

After two steps of compression, my test deployment files are from 3.xMB to 224KB.

3. clean-webpack-pluginClear the Package Files tool

A npm run build new packaged file (file name added hash) is generated each time, and the plugin can delete the old file before it is packaged.

const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);...new CleanWebpackPlugin([‘dist‘], {    root: projectRoot,    verbose:  true,    dry:      false})

You may also need to package the CSS files separately, but there is no good solution ( extract-text-webpack-plugin ).

My environment
Angular cli:1.6.7 (E)
node:9.2.0
Os:win32 x64
angular:5.2.3

The end ... Last updated By:jehorn, Mar, 2018, 03:40 PM

ANGULAR-CLI 1.6.7 Building Applications about webpack some configurations