Webpack實現的功能

• 打包和輸出html
• 打包，分離，壓縮和輸出css檔案
• vue模板解析
• 自定義輸出js檔案路徑和名稱等

demo的基本功能

• 使用vue-router模擬登陸和跳轉
• vue-router巢狀路由模擬登陸後切換頁面

package.json配置

{
  "name": "sntdata2",
  "version": "1.0.0",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.0",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17"
  },
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.2",
    "optimize-css-assets-webpack-plugin": "^5.0.0",
    "style-loader": "^0.22.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --config=config/webpack.dev.js"
  },
  "author": "",
  "license": "ISC",
  "keywords": [],
  "description": ""
}

專案執行

npm install
npm run dev

執行環境

• 需要單獨配置伺服器執行

效果圖