webpack4 + angular6 + ng-zorro-antd的脚手架

2019年9月4日 275次阅读 来源: heheda

项目已经上线很久了，差不多一年的时间了，使用自己开发的脚手架。

最开始是使用webpack3 + angular4 + ng-zorro-antd(刚发布版本:0.5.0-rc.2)开发的，为公司开发的一套cms。后来由于种种原因，没有继续使用。被我拿来当做自己的后台管理系统，用着感觉还不错(虽然antd升级变化较大，坑也大，当然也包括rxjs)。

angular的组件形式，路由使用，代码分割，组件二次发开等在项目中均有体现。

新升级的webpack4 + angular6 + ng-zorro-antd(1.4.0，刚刚瞄了一眼，好像又到1.6.0了…)，项目的脚手架是自己写的，可能还有些不完善，继续优化中。

项目中还使用到了其他的一些技术：websocket，echarts图表，quill编辑器等。

《webpack4 + angular6 + ng-zorro-antd的脚手架》

项目目录简介：

conf目录(打包配置)
dist目录(编译后的静态资源)
src目录为项目源码目录，下面分为：
    app(项目功能模块)
    assets(静态资源)
    components(公共组件)
    template(webpack打包html文件模板)
    uitls(项目插件及工具)
    app.ts(项目入口文件)
    index.ts(webpack打包入口文件)
    polyfills.ts(folyfill)
    vendor.ts(这里主要是angular6)

webpack中的配置：

ts文件的loader
    awesome-typescript-loader
    angular2-template-loader
    angular-router-loader

webpack4中变化较大的两个地方：

1. css代码提取的插件
MiniCssExtractPlugin(以前是ExtractTextWebpackPlugin)

2. js代码提取及切割插件
SplitChunksPlugin(以前是CommonsChunkPlugin)

详细情况请翻阅webpack官方文档：[webpack文档](https://webpack.js.org/plugins/)

从目前的情况来看，angular的相关资料还是比较少的，虽然已经比当初写这个项目的时候多了不少(遥想当时硬着头皮各种找资料…)。喜欢angular的人中，java开发者和国外的开发者感兴趣的比较多。

欢迎star项目，希望能给angular开发者一些帮助和理解，指出项目中的不足之处，感谢~

项目地址：https://github.com/xpioneer/c…

    原文作者：heheda
    原文地址: https://segmentfault.com/a/1190000016655736
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞