Webpack 5 走起! - Vue(10) - vue-loader

發表於 2021-04-23 更新於 2021-07-08 分類於 Webpack

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

學會基本的 Webpack 之後其實我們也可以自己來試著手動設定 vue。

前言

學會基本的 Webpack 之後其實我們也可以自己來試著手動設定 vue。

Vue

基本上這邊就不再多介紹什麼是 Vue 了，在以往我們使用 Vue Cli 的時候，都會看到檔案是 .vue 官方文件上，而這個檔案名稱其實是必須透過 vue-loader 來編譯的，因此在官方文件上會要求你安裝以下套件

1	npm install -D vue-loader vue-template-compiler

至於其他設定呢？其實官方給的滿詳細的，因此以下擷取官方文件設定

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

接下來你可以試著在 template 中新增一個 *.vue 檔案，內容如下：

<template>
  <div id="app">
    <h1>這是一段話</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {};
  },
}
</script>

<style>
</style>

接下來開啟 main.js 注入該檔案後 import './template/App.vue'; 直接輸入 npm run dev。

基本上不意外你會發生一個錯誤就是「Module not found: Error: Can't resolve 'Vue'」，這個問題其實是因為我前面少安裝了 Vue，因此這邊除了安裝前面 loader 之外也要記得安裝 Vue

1	npm install -save vue

接下來你在輸入 npm run dev 就不會出現錯誤了，但是你應該會覺得很奇怪為什麼 .vue 中的東西沒有出現，因為這邊我們要稍微調整一下 main.js 內容才可以。

當若我們對於如何起手架設一個自己的 Vue Webpack 時，其實有一個很好的參考檔案，也就是 Vue Cli 的注入方式，所以這邊我直接列出應該寫在 main.js 中的重點，並調整後依據我們自己專案後如下：

import Vue from 'vue';
import App from './App';

new Vue({
  el: '#app',
  render: (h) => h(App),
});

接下來當你輸入 npm run dev 開啟瀏覽器時，就可以發現 vue 已經成功渲染到畫面上了囉~

參考文獻

vue-loader