webpack 多页/单页 脚手架
该项目为日常项目开发中抽离的一个脚手架,目的是为了方便后续开发。脚手架默认配置es6-7-8+cssnext+vue开发环境,但并不仅限于用vue做开发。并对webpack打包流程做了优化处理。支持单页/多页面开发,支持代码切割异步加载
JavaScript 脚手架/样板
共158Star
详细介绍
vue-multiple-page
简介
该项目为日常项目开发中抽离的一个脚手架,目的是为了方便后续开发。脚手架默认配置es6-7-8+cssnext+vue开发环境,但并不仅限于用vue做开发。并对webpack打包流程做了优化处理。支持单页/多页面开发,支持代码切割异步加载,有兴趣者请参阅webpack中文文档#代码分离。
对新语法不熟悉的同学请参阅:
使用
git clone https://github.com/Mrminfive/vue-multiple-page.git
cd vue-multiple-page
npm install
npm run dev
打包
项目默认配置三种代码环境,分别为 production(正式环境)
、production-d(测试环境)
以及 development(开发)
。
测试环境与正式环境打包方式一致,主要用于正式版与测试版的代码微调。开发版本相对简单,取消代码压缩及其它不必要的优化,支持开发热更新。
脚手架使用 DllPlugin + DllReferencePlugin 打包外部资源包,优化打包速度,manifest
及打包后的文件包均放置在 static/libs/js
目录下,也可进入脚本自行配置路径。
dev
npm run dev
build
npm run build
build:d
npm run build:d
dll(打包外部资源库)
npm run build:vendors
如果需要打包外部资源库,应先跑
build:vendors
命令进行打包外部资源包,再执行编译。
项目结构
.
├── README.md
├── build
│ ├── build-d.js
│ ├── build.js
│ ├── dev-client.js
│ ├── dev.js
│ ├── util.js
│ ├── webpack.base.config.js
│ ├── webpack.dev.config.js
│ ├── webpack.dll.config.js
│ └── webpack.prod.config.js
├── config
│ ├── base.js
│ ├── dev.env.js
│ ├── index.js
│ ├── prod-d.env.js
│ ├── prod.env.js
│ └── util.js
├── package-lock.json
├── package.json
└── src
├── pages
│ ├── common
│ │ └── js
│ │ └── common.js
│ ├── index (页面1,单页模式将默认将index文件夹作为页面)
│ │ ├── index.html
│ │ ├── js
│ │ │ ├── index.js
│ │ └── style
│ └── page2 (页面2)
│ ├── index.html
│ ├── js
│ │ └── index.js
│ └── style
└── static (静态资源文件夹)
├── libs
│ └── js (js文件夹下的)
│ ├── manifest_vendors.json
│ └── vendors.js
└── test.txt
注意: 开启多页功能的情况下,脚本默认获取
src/pages
文件夹下除common
文件夹外的所有满足!(_)*/!(_)*.html
条件的html文件作为html页面,并将满足条件的文件夹下的js
文件夹下的index.js
作为 webpack 打包入口。
每个页面项目的基本格式
.my-page (页面名称)
├── index.html (页面渲染的html模版)
├── js
│ └── index.js (页面脚本入口)
└── style (页面的样式文件)
编译后的项目结构
.
├── css
│ ├── index.3f05035e.css
│ ├── index.3f05035e.css.map
│ ├── page2.3f05035e.css
│ └── page2.3f05035e.css.map
├── js
│ ├── index.3f05035ea26e8a6c3eb8.js
│ ├── index.3f05035ea26e8a6c3eb8.js.gz
│ ├── index.3f05035ea26e8a6c3eb8.js.map
│ ├── page2.3f05035ea26e8a6c3eb8.js
│ └── page2.3f05035ea26e8a6c3eb8.js.map
├── static ()
│ ├── libs
│ │ └── js
│ │ ├── manifest_vendors.json
│ │ └── vendors.js
│ └── test.txt
├── index.html
└── page2.html
配置
脚手架的基本配置为 config/base.js
文件。修改配置文件将影响打包效果。
默认配置项
{
isMultiplePage: true,
// 是否启用异步加载功能
isOpenSyncImport: true,
// 最小chunk的大小
minChunkSize: 10000,
// dev模式下是否自动打开页面
autoOpenBrowser: true,
// 文件目录
assetsRoot: path.resolve(__dirname, '../src'),
// 生成目录
buildRoot: path.resolve(__dirname, '../dist'),
// 静态资源根目录
staticAssets: 'static',
// 生成路径
publicPath: '/',
// 公用别名
commonAlias: {
Static: 'static',
'@': 'pages'
},
// 外部扩展
externals: {
// '$': 'JQuery'
},
// 公众模块(默认情况下common/js文件下的文件作为`commons chunk`打包)
commons: {
// demo: path.resolve(__dirname, '../src/pages/index/js/demo.js')
},
// 要打包的外部资源库
library: [
'axios',
'vue',
'vue-router'
],
// 要引进外部资源库的页面(为空则全部引入)
libraryEntry: [
// 'index',
// 'page2'
],
// 本地开发端口
port: 8009,
// 本地开发代理
proxy: {
// '/api': {
// target: "http://*.com",
// changeOrigin: true,
// pathRewrite: {
// '^/api': ''
// },
// logLevel: 'error'
// }
}
}
isMultiplePage
是否多入口打包isOpenSyncImport
是否启用异步加载功能(启用的状态下,commons
参数将失效)minChunkSize
最小chunk的大小 (isOpenSyncImport
参数为true
是生效)autoOpenBrowser
dev模式下是否自动打开页面assetsRoot
资源文件目录 URL(参照webpack官方文档)buildRoot
打包后的文件目录 URL(参照webpack官方文档)staticAssets
在资源文件目录下的静态资源目录publicPath
打包后的文件目录对应的公开 URL(参照webpack官方文档)commonAlias
公用别名(参照webpack官方文档)externals
外部扩展(参照webpack官方文档)commons
公众模块(默认情况下common/js文件下的文件作为commons chunk
打包,在isOpenSyncImport
参数启用的情况下将失效)library
要打包的外部资源库(填写模块名或引用路径)libraryEntry
要引进外部资源库的页面(为空则全部引入,填写页面名称,即入口文件夹名称)port
本地开发端口(默认为8009
)proxy
本地代理(参照http-proxy-middleware文档)备注
如果遇到脚本语法兼容问题,请升级
node
版本。其它问题请提交问题(issue)