[day22][前端][實作] 用webpack自架Vue3環境（上）

12th鐵人賽

驢子

2020-10-07 17:15:26

2870 瀏覽

分享至

同步發表到驢形筆記

引入Vue3

前端框架檔案的引入，這邊會分成三篇講解。上篇是Vue3的引入，中篇是routes和Vuex的引入，下篇則是Vue3的運用。

自架webpack編譯Vue3

Vue3已經正式發布了。大部分的情況下也不需要自架webpack來編譯Vue的檔案，畢竟Vue Cli不香嗎？但是想到想想Vue他可能包了很多不知道的套件，而且自己架比較好玩不是嗎=w=

從安裝對應套件開始吧～！這邊為了避免版本錯誤請將直接複製以下"package.json"後使用，當然你也可以一個一個安裝！所以也可以一個一個安裝，但請理解因為他正在轉型所以安裝的指令和出來的版本可能會有各式各樣的不相容（但解這個的過程可以讓你更好的理解webpack設定對於版本相容有多麻煩，和package.json對一個專案為什麼那麼重要）

這邊會先提供"webpack.config.js"的設定檔，在提供"package.json"的安裝套件。可以試著在不複製"package.json"直接"npm i"的情況下自己一步一步安裝對應套件，會是很棒的練習

webpack.config.js

/* webpack.config.js ： Webpack 的設定檔 */
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CopyPlugin = require('copy-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');

const serverConfig = {
  target: 'node',
  entry: {
    'index': './src/www'
  },
  node: {
    __dirname: false,
    __filename: true,
  },
  output: {
    path: path.join(__dirname, 'dist'),
    // 獲取絕對路徑的方法
    filename: '[name].bundle.js'
  },
  externals: [nodeExternals()],
  module: {   //設定你的檔案選項
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: path.join(__dirname, 'src/server/views'), to: path.join(__dirname, 'dist/views') },
        { from: path.join(__dirname, 'src/client/static'), to: path.join(__dirname, 'dist/public') },
      ]
    })
  ],
  resolve: {
    extensions: ['.ts', '.js'],
  },
}

const clientConfig = {
  target: 'web',
  devtool: 'eval-source-map',
  entry: {
    'index': path.join(__dirname, 'src/client/main.js')
  },
  output: {
    path: path.join(__dirname, 'dist/public'),
    filename: './javascripts/[name].bundle.js',
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: [
          {
            loader: 'vue-loader',
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      },
      {
        test: /\.scss|\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader',
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '/images/' + '[name][hash].[ext]'
        },
      },
    ],
  }
}
module.exports = [serverConfig, clientConfig];

好的，依照這份設定！client端設定又多了一個進入點，這邊就是Vue的進入點了。在"client"下新增"main.js"

main.js

import { createApp } from 'vue';

import App from './app.vue';

let dom = document.createElement('div');
dom.id = 'app';
document.getElementsByTagName('body')[0].appendChild(dom);
createApp(App).mount('#app');

接著看到他引入了"app.vue"，終於！在經歷了21天的痛苦終於看到前端的vue檔出現了，接著建立"app.vue"吧

app.vue

<template>
  <div class="container">
    hello {{state.message}}
  </div>
</template>

<script>
import { reactive } from 'vue';
export default {
  setup () {
    const state = reactive({
      message: 'Vue3'
    })
    return {
      state,
    }
  }
}
</script>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;700&display=swap');
  body{
    font-family: 'Noto Sans TC', sans-serif;
  }
</style>
<style lang="scss" scoped>
body {
  .container {
    font-size:  20px 400;
  }
}
</style>

好的，這樣一個hello，Vue3就完成了～！接著請試著跑"npm run webpack"慢慢的測試成是缺少什麼，一步一步探詢缺失的套件。這邊沒有標準答案，因為每個人完成後的版本套件都不一樣會一樣，這邊可以直接複製下面的你們有的套件"npm i "一口氣結束也是可以了！

給各為起個步"npm i vue-loader@next --save-d"可以安裝最心版本，而"npm i vue-loader@16.0.0-beta.5 --save-d"可以安裝這個版本，但是不推薦你一樣使用這個版本。因為可能因為相容問題不得不全部都跟我用一樣的版本，建議使用next一步一步建立屬於你的最新版本（為什麼是next？因為目前最新版Vue3還沒有直接發布在npm套件管理器上，等之後正是正式的在"npm i vue"就是vue3的時候就不用加next了）

package.json

{
  "name": "ithome_30day",
  "version": "1.0.0",
  "description": "IT邦邦忙鐵人賽用git檔案",
  "main": "index.js",
  "scripts": {
    "start": "nodemon dist/index.bundle.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack -d -w"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Frenkieli/ithome_30day.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Frenkieli/ithome_30day/issues"
  },
  "homepage": "https://github.com/Frenkieli/ithome_30day#readme",
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "vue": "^3.0.0-0"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "@types/node": "^14.11.2",
    "@vue/compiler-sfc": "^3.0.0-rc.9",
    "babel-loader": "^8.1.0",
    "copy-webpack-plugin": "^6.2.0",
    "css-loader": "^4.2.2",
    "node-sass": "^4.14.1",
    "nodemon": "^2.0.4",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^10.0.1",
    "style-loader": "^1.2.1",
    "ts-loader": "^8.0.4",
    "typescript": "^4.0.3",
    "vue-loader": "^16.0.0-beta.5",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-node-externals": "^2.5.2"
  }
}

如果你完成了最後階段你應該會看到錯誤"No PostCSS Config found"，這是因為引用的處理css的模組需要有設定檔。請直接新增一個檔案"postcss.config.js"在"package.json"旁邊就可以了

postcss.config.js

module.exports = {
}

完成，webpack不會跳錯了！接著將打包出來的js引入"index.ejs"中

src\server\views\index.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <script src="./javascripts/index.bundle.js"></script>
  </body>
</html>

接著就可以執行伺服器了進網頁了(http://localhost:3000/ )，歷經千辛萬苦終於讓頁面跳出了hello Vue3了...

githubday22