本文不介绍原理,只安利我在公司中使用的webpack4搭建的多页面脚手架,拿来即用。
多页面,可以是传统的jq,zepto写的页面,也可以是vue,react写的,可扩展性较高。本gituhub仓库只针对.js做处理,没有对.vue,.jsx做处理,如需要,请自行添加。代码仓库
下面针对覆盖的做简单介绍,对需要注意对做重点介绍。(项目目录不是最优,因为都是老的项目,由于一些页面地址已经在客户端写死,没有处理目录结构)
目录结构
源码目录结构
重点目录说明
config下是关于开发环境代理接口,及入口函数和开发服务器配置
script下是开发环境webpack打包的入口配置文件
mock下是mock服务的相关配置和接口的文件,如拦截到mock下有接口直接请求mock下的接口。没有相应接口,直接走代理服务器接口
src下是源码
webpack.plguins.js是关于webpack插件的配置
webpack.rules.js是关于loader的相关配置
其他文件应该一目了然了
其他
1.webpack4打包注意点
webpack已js为入口,我们传统页面是在src下建.html文件,这里面就做了个已src/*.html 遍历,存入数组,然后在src/js下必须要有相应的文件名.js 即使是一个简单的html没有js,也需要新建相应js文件。
也可以在遍历时候,如果有ts,不拼接.js,
entryObj[item] = path.resolve(__dirname, 'src/js', item)
在resolve 增加extensions: ['.ts', '.tsx', '.js'],
如果是开发环境,则入口多加mock服务,和一个渲染src/*.html列表的入口
if (devMode) { config.entry.mock = path.resolve(__dirname, 'mock/index.js') config.entry.index = path.resolve(__dirname, 'config/indexEntry.js')}
plugin相关配置
html相关处理
使用,开发环境...htmpConf(['mock', 'rem']),生产...htmpConf([ 'rem'])
css分离插件老的extract-text-webpack-plugin已经不兼容webpack4,需使用mini-css-extract-plugin,而且可以打包出contenthash,性能较好
命令中传参数使用了个插件cross-env
loader处理没特殊的,css开发环境不分离,生产分离
dev环境服务器配置
dev环境用node去启用,需用到require('webpack-dev-server').addDevServerEntrypoints方法。
lib下和asset下存放copy文件。我们项目zepto不作为公用,所以在html文件中需手动引入(考虑到有的纯静态页)
其他不清楚,详见源码。
2.代理服务
代理其实很简单就webpack-dev-server配置proxy,还可以注入相关token,header等等
onProxyReq: function (proxyReq, req, res) { proxyReq.setHeader('cookie', proxyConfig.config[PROXY_ENV]['cookie']) }
3.mock服务
当命令行配置IS_MOCK=true时候开启,然后在dev环境多注入入口,在html插件中也加入相关chunk即可,手动更改插入chunk顺序设置chunksSortMode: 'manual',然后编写mock服务即可,详细使用可以参考官网,简单到使用可以参照为我的readme
4.eslint规范
{ test: /\.js$/, use: [ 'babel-loader', { loader: 'eslint-loader', options: { formatter: require('eslint-friendly-formatter') // 默认的错误提示方式 } } ], exclude: '/node_modules/' },
详细配置在.eslintrc.js,本仓库参照standard标准。一些关于全局到jq,$,可以配置true,eslint则不抛错
"globals":{ $: true, Zepto: true, IS_MOCK: true, INDEX_LIST: true },
一些exlint命令
eslint --fix src // 修正src下面的.js文件格式错误(会自动调整文件)
5.git提交信息规范化
推荐commitizen插件,可以规范项目中每个人的使用规范,本仓库也配置了,只需要npm i commitizen -g,在代码提交时候,git commit -'xxx'替换为git cz,则可以按照插件规范,交互式的提交。
关于commitizen快速使用,详细参照相关文档
step1:npm i commitizen -g
step2:commitizen init cz-conventional-changelog --save --save-exact