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

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了webpack4 + angular6 + ng-zorro-antd的脚手架脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

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

开始是使用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...

脚本宝典总结

以上是脚本宝典为你收集整理的webpack4 + angular6 + ng-zorro-antd的脚手架全部内容,希望文章能够帮你解决webpack4 + angular6 + ng-zorro-antd的脚手架所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。