Angular-cli 1.6.7 构建应用

webpack的一些配置

使用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