使用webpack以及其loader/插件实现前端自动化构建工具。 区别于网上各种webpack多页面的妖艳工具。以我做多页面时候的思想为准。大约有以下几个特点。
- 自定义css/js引用、输出。想输出几个文件就输出几个文件。打包输出自己掌控。不用webpack多管闲事。目前几乎所有webpack多页面方案的打包都是用的webpack的
splitChunks。大声的喊出来。我不喜欢！懂得自然懂。详见自定义css/js引用、输出
- 自定义css/js引入顺序。既然都可以自定义输出文件了。当然也可以自定义引入顺序了。自定义css/js引用、输出
- 开发、打包入口过滤支持。我只想改个首页。不需要你把其他所有的都打包一遍。我想在一个项目下多活动页也能轻松做到。详见开发、打包入口过滤支持
- 自动css sprite支持。无需配置。按照指定目录放置即可。引用也很方便哟。详见自动css sprite支持
- img、js、css等资源支持多层级目录输出。不要一股脑都放在一个文件夹里吼不吼？吼呀吼呀。详见资源文件支持多层级目录输出
- 等等。
- 静态文件拷贝
- 图片、字体、视频等alias引入、多层级目录输出。自动转base64
- scss/less转为css。sourcemaps。自动添加浏览器前缀。支持url通过alias引入。自动转base64
- 支持babel编译js、webpack实现js模块加载
- 自动生成sprite图。根据配置生成多个sprite img and scss
- ejs/html->html。支持alias引入模版传参。支持ejs语法。
- eslint/stylelint支持
- 压缩css/js/html
- 静态资源添加hash值
- 开发模式增量编译、静态资源热更新
- 远程接口代理
- 支持命令行快速创建页面。生成目录及基础文件等
- 以及上面提到的一堆
- ......
# 克隆至本地
git clone https://github.com/nostarsnow/webpack-seed.git <your project>
# 进入文件夹
cd <your project>
# 安装依赖
npm install
# 启动开发模式
npm run dev# 打包
npm run build
# 带依赖大小可视化分析的打包
npm run build --report
# 以打包目录为根目录开启静态服务器以便测试
npm run server# 创建 src/pages/test目录
npm run c test
# 创建 src/pages/test/login目录
npm run c test/login假如要创建/index.html的文件。有两种方法。
通过命令行创建或手动创建
npm run c index会自动生成如下目录
└── index # src/pages/index
├── index.html # html文件
├── index.js # 页面的js
└── index.scss # 页面的css。默认import 'config'
└── _assets # 页面引用的资源
虽然html源文件目录是/index/index.html。但会被保存为/index.html。子目录同理。如/index/about/index.html会被保存为/index/about.html
html或ejs文件默认使用 underscore-template-loader 来编译。可查看文档。支持ejs语法。支持嵌套模板。注意此嵌套非ejs语法。支持webpack别名引入。
页面引用的css/js需要使用inject来写入。只能写在当前html中。不能写在引用的模版内。详见自定义css/js引用、输出
<!-- inject:common/common.scss -->
<!-- inject:./index.scss -->
<!-- inject:common/common.js -->
<!-- inject:./index.js -->html中的标签属性src/data-src/href支持webpack别名引入资源。
所有默认别名参见build/webpack.base.conf.js中的resolve.alias
html中可使用常量(基于正则匹配)。可见build/config.js中的htmlReplace。基于html-replace-webpack-plugin
默认也最好使用scss。支持别名引入资源。
因为资源顺序写在了html内。所以无需也不能在css中重复import css文件。例如上面的index.scss中就不能够再写@import 'common/common.scss'这种
使用babel处理es6。使用webpack处理import。
资源顺序等同于css后半段。因此在页面index.js中。需要直接使用全局变量来使用。如$/common等。也就是说这些都需要输出在全局变量中。嗯。。。
js中可使用常量。可见build/config.js中的globals。基于Webpack.DefinePlugin
html的公共模板页建议放置于src/common/tpls下。页面html的小模板页建议放置于./_assets/tpls/下
公共css和js的小模块建议放置于src/common/{css|js}/中的子文件夹内。然后在公共文件中通过import引入
页面css和js的小模块建议放置于./_assets/{css|js}/下。然后在页面文件中通过import引入
多页面图片建议放置于src/img下。本页面图片建议放置于./_assets/img下。
字体和视频音频等文件建议放置于src/fonts和src/medias目录下
此类资源放置于src/static/目录下。该目录下所有内容会自动复制到dist/目录。
如果通过~static/img/test.png来引入资源。会被当作编译资源处理
├── dist # 打包生成的目录
├── build # 编译设置目录
│ ├── loaders # 自定义的loader
│ │ └── inject-loader # 开发时将html中的css/js添加到index.js中
│ ├── plugins # 自定义的plugin
│ │ ├── CssEntryPlugin # 支持css作为入口文件
│ │ └── HtmlEntryInject # 打包时将html中的css/js替换为对应资源
│ ├── docs # 部分文档说明
│ ├── config.js # 用户开发、打包等配置
│ ├── create.js # 快速创建目录的命令
│ ├── utils.js # 自动根据目录获取开发、打包入口
│ ├── webpack.*.conf.js # webpack基础、开发、打包配置文件
│ └── webpack.rules.js # 生成webpack loader
├── src # 开发源文件
│ ├── common # 通用文件
│ │ ├── css # 通用css文件。仅读取目录下文件。子目录仅供引入。
│ │ │ ├── import # 引入的scss文件
│ │ │ │ ├── config # scss变量配置等
│ │ │ │ ├── keys # 动画
│ │ │ │ ├── mixin # scss函数
│ │ │ │ └── index # 快速引入。import了mixin和config
│ │ ├── js # 通用js文件。仅读取目录下文件。子目录仅供引入。
│ │ ├── plugins # 通用插件。
│ │ └── tpls # 通用html/ejs模版文件
│ ├── fonts # 字体文件夹
│ ├── img # 图片资源
│ │ └── _sprite # sprite图。仅支持子目录生成该目录下子文件。
│ ├── pages # 页面文件
│ │ └── user # 举例。如pages/user文件夹。每个层级的一个文件夹都是一个新的页面。
│ │ │ ├── index.html # html文件。生成的路径为pages/user/index.html => /user.html
│ │ │ ├── index.js # 开发时入口文件。打包时只是普通js文件pages/user/index.js => /js/user/index.js
│ │ │ ├── *.js # 其他js。可在html中引入。会被打包成pages/user/*.js => /js/user/*.js
│ │ │ ├── *.scss # 样式文件。可在html中引入。会被打包成pages/user/*.scss => /js/user/*.scss
│ │ │ └── _assets # /user.html页面的资源文件。可以放置img、css、js、tpl等。
│ │ │ └── img # img文件。引用打包为/img/user/*.*
│ └── static # 静态资源文件。不编译。直接拷贝
└── README.md # This's me, Mario!