使用`ng new my-app`初始化的項目並不包含webpack配置文件，需要`ng eject`命令來加入`webpack.config.js`配置文件。 ...
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
