webpack4 前端框架脚手架
api
version < 1.1.2-beta
construct init 初始化命令
Options:
- -s, 创建目录地址
- -p, --port 端口
- mido-construct init -p 8989 -s 目录
version > 1.1.2-beta
mido init 初始化命令
Options:
- -s, 创建目录地址
- -p, --port 端口
- mido-construct init -p 8989 -s 目录
mido dev 开发模式
scripts: { "dev": "mido dev mock=dev --port 9001", // 开发环境本地mock数据 "test": "mido dev mock=test --port 9001", // 测试环境,测试服务器数据 "pre": "mido dev mock=pre --port 9001", // 线上环境,线上服务器}
mido build 打包
scripts: { "build": "mido build"}
自定义配置项
目录根路径 config/config.js
version > 1.1.5
export default { babel: { }, webpack: { }, proxy: { }}
proxy
exports.proxy = { dev: { '/api': { target: 'http://localhost' // target为空默认为localhost }, '/some': { target: 'http://localhost' } }, test: { '/api': { target: 'http://xxx.xxx.com' }, '/some': { target: 'http://xxx.xxx:9002' } }, pre: { '/api': { target: 'https://www.alipay.com' } }}
-
服务器地址配置:
- dev 为本地mock数据,数据取自mock文件下的**.mock.js
- test 为开发环境服务器数据,由框架代理。
- pre 为线上环境服务器数据,由框架代理。
-
Dev下mock数据配置:
- 根目录下创建mock文件夹
- mock文件必须为*.mock.js文件
- 根目录下创建mock文件夹
-
可以是数据返回
const some = { stat: 'fail'} module.exports = { 'GET /some.json': some, }
- 也可以是函数
const init = { stat: 'ok'} module.exports = { 'GET /init.json': function(req, res) { res.json({ stat: 'ok' }) }}
.babelrc
exports.babel = { presets: [], plugins: []}
- babel使用8以上版本
- 框架内集成:
- presets
- @babel/preset-env
- @babel/preset-react
- plugins
- @babel/plugin-transform-runtime
- babel-plugin-syntax-jsx
- babel-plugin-transform-vue-jsx
- presets
webpack
exports.webpack = { optimization: { splitChunks: { cacheGroups: { vendor: { // node_modules内的依赖库 chunks: "all", test: /[\\/]node_modules[\\/]/, name: "vendor", minChunks: 1, // 被不同entry引用次数(import),1次的话没必要提取 maxInitialRequests: 5, minSize: 0, priority: 100, // enforce: true? }, common: { // ‘src/js’ 下的js文件 chunks: "all", test: /[\\/]src[\\/]js[\\/]/, // 也可以值文件/[\\/]src[\\/]js[\\/].*\.js/, name: "common", // 生成文件名,依据output规则 minChunks: 2, maxInitialRequests: 5, minSize: 0, priority: 1 } } } }}
- webpack 配置项类似于webpack.config.js