webpack 4 + mockjs
Posted 西芹番茄
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack 4 + mockjs相关的知识，希望对你有一定的参考价值。
一、创建项目目录
二、添加开发依赖( html-webpack-plugin、webpack、webpack-cli、webpack-dev-server、webpack-api-mocker)
如下所示位于package.json文件中
... "devDependencies": { "html-webpack-plugin": "^3.2.0", "webpack": "^4.6.0", "webpack-cli": "^2.0.15", "webpack-dev-server": "^3.1.3", "webpack-api-mocker": "^1.4.3" }, ...
使用npm install 或者 yarn install (推荐，原因你懂的)
三、创建 webpack.config.js 文件，编写相关配置
1 const path = require(\'path\'); 2 const HtmlWebpackPlugin = require(\'html-webpack-plugin\'); 3 const apiMocker = require(\'webpack-api-mocker\'); 4 5 module.exports = { 6 mode: \'development\', //当前环境 7 entry: { //程序的启动入口 8 app: \'./src/index.js\' 9 }, 10 devServer: { 11 /****************此处星星多，注意看此处****************************/ 12 //利用webpack-dev-server 的before 方法调用webpack-api-mocker 13 // path.resolve(\'./mocker/index.js\') 中的\'./mocker/index.js\'为mock文件的相对路径 14 /***************以上只是个人的浅显理解罢了（有不同理解请交流）******************/ 15 before(app) { 16 apiMocker(app, path.resolve(\'./mocker/index.js\'), { 17 // \'GET /api/users/list\': \'http://localhost:3000\', 18 // \'GET /api/userinfo/:id\': \'http://localhost:3000\', 19 }) 20 } 21 }, 22 output: { //配置文件输出路径 23 filename: \'[name].bundle.js\', 24 path: path.resolve(__dirname, \'dist\') 25 }, 26 plugins: [ //利用模板文件生成.html 27 new HtmlWebpackPlugin({ 28 title: \'webpack+react\', 29 template: "./src/entry.ejs", 30 filename: "./index.html", 31 }), 32 ] 33 };
话不多说直接上‘./mocker/index.js’文件
1 module.exports = { 2 [`GET /api/user`]: (req, res) => { 3 console.log(\'---->\', req.params); 4 return res.json({ 5 id: 1, 6 username: \'kenny\', 7 sex: 6 8 }); 9 } 10 }
附录1.
webpack.config.js中的entry.ejs文件
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 6 <!--看这里，看这里，请看我这里--> 7 <title> 8 <%= htmlWebpackPlugin.options.title %> 9 </title> 10 <!-- 如果不这这样写 html-webpack-plugin 中的title是不生效的哦--> 11 <link rel="stylesheet" href="/favicon.png" type="text/css" /> 12 </head> 13 14 <body> 15 <!-- <div id="root"></div> --> 16 Visit :/mocker/index.js to customize the API Try it? 17 <hr> 18 <div>name: 19 <span id="name"></span> 20 </div> 21 <div>age: 22 <span id="age"></span> 23 </div> 24 </body> 25 26 </html>
webpack.config.js 配置文件中的 entry下app对应值的index.js文件
1 fetch(\'/api/user\', { 2 \'Accept\': \'application/json\', 3 \'Content-Type\': \'application/x-www-form-urlencoded\', 4 }) 5 .then((response) => response.json()) 6 .then(data => { 7 console.log(\'data:\', data); 8 document.getElementById(\'name\').innerHTML = data.username; 9 document.getElementById(\'age\').innerHTML = data.sex; 10 })
OK！接下来npm start 或者 yarn install 运行下试试吧。
效果图如下：
思维重构：以上方式多个mock文件时不就需要改动webpack.config.js文件？这种事情我是绝不允许的。各位看客请看：
解决方法：编写webpack.mocker.js文件为所有mock文件的总成，启动时自动包装mock(话不多说直接上代码)
1 const mock = {}; 2 3 require(\'fs\').readdirSync(require(\'path\').join(__dirname + \'/mocker\')).forEach(function (file) { 4 Object.assign(mock, require(\'./mocker/\' + file)) 5 }); 6 module.exports = mock;
以上是关于webpack 4 + mockjs的主要内容，如果未能解决你的问题，请参考以下文章
改造vue-cli,使用mockjs搭建mock server