ttadeoo / webpack_package Goto Github PK

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