基于组件化开发的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