一、创建项目目录
二、添加开发依赖( 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-mocker13 ????????// 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: [ //利用模板文件生成.html27 ????????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
原文地址：https://www.cnblogs.com/xiqinfanqie/p/8972258.html