Angular-cli 1.6.7 构建应用

webpack的一些配置

标签： Angular

使用ng new my-app初始化的项目并不包含webpack配置文件，需要ng eject命令来加入webpack.config.js配置文件。

此时这个文件里已经有了较为完善的配置。但是还缺少一些其它的需求。

1. uglifyjs-webpack-plugin js压缩插件

将js文件压缩，减小打包后文件的体积。

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-plugin 生成gzip文件插件

进一步减小打包文件体积。

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

...

new CompressionWebpackPlugin()

这个需要服务器开启gzip on;，以nginx为例，需要为服务器进行以下配置：

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;

    # 开启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;
        }
    }
}

经过以上两步压缩后我的测试部署文件从3.xMB到了224KB。

3. clean-webpack-plugin 清除打包文件工具

每次npm run build后都会生成新的打包文件(文件名添加hash)，这个插件可以在打包后删除之前旧的文件。

const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

...

new CleanWebpackPlugin([‘dist‘], {
    root: projectRoot,
    verbose:  true,
    dry:      false
})

可能还需要单独打包css文件，但是目前没有找到好的解决方案(extract-text-webpack-plugin)。

我的环境
Angular CLI: 1.6.7 (e)
Node: 9.2.0
OS: win32 x64
Angular: 5.2.3

The end...    Last updated by: Jehorn, Mar 14, 2018, 03:40 PM