webpack+react+babel環境搭建第一步——webpack 4 + mockjs

時間 2019-12-08

標籤 webpack+react+babel webpack react babel 環境搭建第一步 mockjs 欄目 React 简体版

原文原文鏈接

1、建立項目目錄

2、添加開發依賴( html-webpack-plugin、webpack、webpack-cli、webpack-dev-server、webpack-api-mocker)

以下所示位於package.json文件中css

...
"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 (推薦，緣由你懂的)html

3、建立 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’文件react

 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

　　webpack.config.js中的entry.ejs文件web

 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文件npm

 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 運行下試試吧。json

效果圖以下：api

思惟重構：以上方式多個mock文件時不就須要改動webpack.config.js文件？這種事情我是毫不容許的。各位看客請看：app

　　解決方法：編寫webpack.mocker.js文件爲全部mock文件的總成，啓動時自動包裝mock(話很少說直接上代碼)webpack-dev-server

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;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。