Angular-cli 1.6.7 构建应用关于webpack的一些配置

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

原文地址:https://www.cnblogs.com/jehorn/p/8568109.html

时间: 2024-11-11 07:13:06

Angular-cli 1.6.7 构建应用关于webpack的一些配置的相关文章

@angular/cli项目构建--组件

环境:nodeJS,git,angular/cli npm install -g cnpm cnpm install -g @angular/cli ng new angularDemo ng -v ng set --global packageManager=cnpm npm install jquery --save npm install bootstrap --save npm install @type/jquery --save-dev npm install @type/boots

.Net Core + Angular Cli 开发环境搭建

一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

angular CLI 快速搭建angular 项目

1. 首先确保你的电脑上安装了Node.js®和npm 2.打开终端/或命令窗,安装全局 angular CLI npm install -g @angular/cli 3. 创建新项目 //运行下列命令来生成一个新项目以及应用的骨架代码: ng new project-name // 请耐心等待. 创建新项目需要花费很多时间,大多数时候都是在安装那些npm包. 4. 启动开发服务器 // 进入项目目录 cd my-app //启动服务 ng serve --open 5. 文件结构如下 src

.Net Core+Angular Cli/Angular4开发环境搭建教程

一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm 一.基础环境配置 1.安装VS 2017 v15.3或以上版本2.安装VS Code最新版本3.安装Node.js v6.9以上版本4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taob

Angular CLI 环境准备

前记:好的工具能让开发更加简单快捷. Angular CLI是一个命令行界面工具,它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 主要内容: 设置开发环境. 创建新项目以及应用的骨架. 启动开发服务器. 步骤1. 开发环境准备 如果还没有Node.js和npm,请先安装好它们: 在终端/控制台窗口中运行命令 node -v 和 npm -v, 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本. 然后全局安装 Angular CLI . npm

Angular CLI 使用教程指南参考

Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Angular CLI你需要先安装node和npm,然后运行以下命令来安装最新的Angular CLI: 注意:Angular CLI 需要Node 4.X 和 NPM 3.X 以上的版本支持. npm install -g angular-cli 在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装: sudo npm

Angular CLI 升级 6.0 之后遇到的问题

Angular CLI 1.7.4 在使用 ng build --prod 会构建失败,而 ng build 是正常的.比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license. 最近将 Angular CLI 升级到 6.X 之后,直接 ng build 会报以下错误,ng serve 也是如此. 95% emitting LicenseWebpackPlugin(no

Angular Cli 设置 淘宝的NPM 镜像

Angular CLI 是 构建angular2 项目的 脚手架工具. 安装Angular-Cli  需要先安装 Node.js. 大家可以去 node.js 官网下载. 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常.所以我们需要适用淘宝的镜像. http://registry.npm.taobao.org/ 设置方法如下:npm install -g cnpm  --registry=https://registry.npm.taobao.org 然后使用 cnpm 

Angular CLI 安装和使用

1.背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 官方文档:https://github.com/angular/angular-cli 2.安装Angular CLI