Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xianjie-li/launch-template-webpack-v4
webpack4config
https://github.com/xianjie-li/launch-template-webpack-v4
Last synced: 6 days ago
JSON representation
webpack4config
- Host: GitHub
- URL: https://github.com/xianjie-li/launch-template-webpack-v4
- Owner: xianjie-li
- Created: 2019-07-04T17:52:26.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T21:24:20.000Z (about 2 years ago)
- Last Synced: 2023-03-07T21:19:46.594Z (almost 2 years ago)
- Language: HTML
- Homepage:
- Size: 8.33 MB
- Stars: 7
- Watchers: 0
- Forks: 0
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[TOC]
## 说明
用于日常开发的webpack4配置，除了基本配置外添加了多页面支持、使用pug替代默认的ejs模板、基本包含所有常用的功能配置。对vue、react提供开箱即用的支持，同时提供了一套library的打包配置。
## repo
## 使用
通过[launch-cli](https://github.com/Iixianjie/launch-cli)安装
### 简单安装示例
```js
yarn global add @lxjx/launch-cli
// 查看可用配置列表
launch list
// 选择模板并创建项目文件
launch create
```
### 配置
通过/build/config.js导出了很多常用配置，合理使用的话基本上不需要再触及其他配置文件
```js
module.exports = {
publicPath: './', // 资源访问路径
publicDirName: 'public', // 集中存放静态资源的目录名
gizp: true,
analyzer: true, // 包分析
hash: true, // 文件hash
htmlAssetsHash: false, // 打包时给html的引用资源打上hash
dropConsole: true, // 移除console
sassOption: {
data: '@import "@/style/_base/index.scss";',
precision: 3
},
proxy: {},
extensions: ['.js', '.vue', '.jsx'],
alias: {
'@': path.resolve(__dirname, '../src'),
// vue: 'vue/dist/vue.js' // 当需要在html中使用模板语法时，开启此项替换默认的runtime版本
},
page: {
loadAll: true, // 是否使用所有匹配到的页面作为入口，当页面过多时建议关闭以提升性能
pageList: [] // loadAll为false时，手动指定需要作为入口的文件(不带后缀)
},
env: {
dev: {
BASE_URL: '/api/dev'
},
prod: {
BASE_URL: '/api/prod'
},
test: {
BASE_URL: '/api/test'
}
}
};
```
## 开箱即用的vue、react配置
* 基于vueloader和@vue/babel-preset-app插件的vue配置，对vue文件的处理方式与vue-cli完全一致。
## 分块规则
一共会生成四种类型的包：
1. webpack的运行时 runtime.js
2. vendors, 从node_modules中导入的模块，两次以上会被打到vendor中
3. 项目中被引入两次以上的本地模块，会被添加到commons.js中
4. 页面包，进行多页面开发时，会根据页面名生成对应的js
## TODO
- [x] 选择是否一次载入所有页面
- [x] ~~dll~~
- [x] pug
- [x] vue
- [x] 支持vue、普通lib、多出口的library打包配置
- [x] 配置时给模板传递一些额外信息
- [ ] 添加新的html后自动重启服务
- [ ] mock