1. 建立一個資料夾webpack，webpack底下有src/index.js檔案作為入口檔案

2. 安裝webpack

npm init

npm install webpack --save-dev

3. 建立webpack.config.js

var path = require('path'); // require: node 裡面載入依賴包的方式

module.exports = {
  // 入口 模組化
  entry: './src/index.js',
  // 出口 打包的檔案目錄在哪裡
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 
 
'dist'), // __dirname 當前目錄下建立dist檔案
    publicPath: '/' // 資源路徑
  }
}

4. 配置package.json的script/dev，相關外掛配置好

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server
 
"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.17.2",
    "html-webpack-plugin": "3.2.0",
    "webpack": "4.20.0",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.9"
  }
}

5. npm run dev 執行前端程式碼。

6. 建立server.js檔案，作為後端服務

let express = require('express')
let app 
 
= express();

app.get('/user', (req, res) => {
  res.json({name: 'jack'})
})

app.listen(3000, function() {
  console.log('服務啟動，埠3000');
})

node server.js 跑一下後端服務

7. src/index.js 前端呼叫後端服務介面

// 通過import找到所有模組，然後依次打包
console.log('入口');
// ajax 請求
let xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/user', true);
xhr.onload = function() {
  console.log(xhr.response);
}
xhr.send();

8. 然後會報跨域，解決方案後端服務檔案server.js配置cors

let express = require('express')
let app = express();

// cors
var allowCrossDomain = function(req, res, next) {
  // 限制
  // 請求源  允許所有請求源 ajax http://localhost:8080/
  res.header('Access-Control-Allow-Origin', '*');
  // 請求頭  允許所有請求頭 攜帶請求限制  x-token
  res.header('Access-Control-Allow-Headers', '*');
  // 請求的方法  允許所有請求的方法 post get put delete
  res.header('Access-Control-Allow-Methods', '*');
  next(); // 下一步
}
app.use(allowCrossDomain);

app.get('/user', (req, res) => {
  res.json({name: 'jack'})
})

app.listen(3000, function() {
  console.log('服務啟動，埠3000');
})

9. 最後目錄展示

10. 會出現的問題

webpack和webpack-dev-server還有webpack-cli版本過高導致[email protected] dev script.報錯。