webpack4多页面打包脚手架配置

2,077 阅读3分钟

本文不介绍原理,只安利我在公司中使用的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 src //扫描src目录下的.js文件
eslint --ext .js,.vue src // 扫描src下的.js与.vue后缀文件(默认只扫描.js文件)

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

本文结束