基于组件化开发的webpack脚手架。
##安装步骤
npm install webpack_package
cd webpack_package
npm install
dist/pages/widgetsList/index.html是项目的所有组件列表
对它们进行操作,会在页面中显示返回数据
##怎么用
- 目录形式
页面对于项目之于组件对于页面。
对于项目,它是由各个页面组成。由pages里的文件夹组成,每个文件夹就是这个页面的所有资源。
对于页面,它是由组件组成。由widgets里的所有文件夹组成,每个文件夹就是这个组件的所有资源。
pages和widgets里的文件夹都是由js、ejs、less组成这个文件的所有资源,其中js是必须的。
- 前端组件的引用
PACKAGE * as 组件名 from 'widgets文件夹中你要引用的组件文件夹名'
组件引用和es6的模块引用import语法一致。不同点在将“import”改为“PACKAGE”,以及不需要写组件的详细路径,只需要写widgets目录下要引用的文件夹名即可。用的是widgets-loader这个插件。
例如:pages/widgetsList/index.js要引用checkBox组件
- 初始化开发文件夹
npm run init
用的是plugin-package-init这个插件
大概的使用是这样:
回答下面问题
生成对应开发文件夹
- 监听页面更新
npm run w
- 上线前压缩混淆打包
npm run p