在 Visual Studio 中使用 WebPack 來編譯 Vue.js

筆記使用 Webpack 來編譯 Vue.js Single File Components (.vue) 紀錄著使用 webpack 來編譯 .vue 檔案的做法，而我平常主要還是使用 Visual Studio 開發，所以還是得將 WebPack 及 Visual Studio 做個整合，來看看該如何設定吧

基本設定

安裝 vue
- 專案上按右鍵 –> Quick Install Package…
- 選擇安裝工具 –> 輸入 vue –> 預設會加上 --save-dev
- 工具有其他選擇
- 預設 --save-dev 可以編輯修改的
安裝其他相關套件
- 專案上按右鍵 –> Quick Install Package…
- 選擇安裝工具 –> 輸入 webpack babel-loader babel-core css-loader vue-loader vue-template-compiler

安裝 WebPack Task Runner

Visual Studio 主選單 Tools –> Extensions and Updates…
Online tab –> 搜尋 WebPack Task Runner –> 安裝

加入網頁及 js

HomeController –> index

@{
    Layout = null;
}
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js webpack .vue</title>
</head>
<body>
<div id="app">
    <msg></msg>
</div>
<script src="~/Scripts/dist/build.js"></script>
</body>
</html>

在 Scripts/src 資料夾中加入 msg.vue

<template lang="html">
    <div class="message">
        {{ message }}
    </div>
</template>
            
<script>
export default {
data () {
    return {
    message: 'Helo, .vue file'
    }
}
}
</script>
    
<style lang="css">
    .message {
        color: blue;
    }
</style>

在 Scripts/src 資料夾中加入 index.js

import Vue from 'vue'
import Msg from './msg.vue'
new Vue({
    el: '#app',
    components: { Msg }
})

設定 WebPack

在網站根目錄加入 webpack.config.js
- 專案上按右鍵 –> Add –> New Item…
- Web –> 選擇 WebPack Configuration File

設定 webpack.config.js 編譯內容

"use strict";
    
module.exports = {
    entry: "./Scripts/src/index.js",
    output: {
        filename: "./Scripts/dist/build.js"
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                loader: "babel-loader"
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
            'vue': 'vue/dist/vue.js',
        }
    }
};

執行編譯

開啟 Task Runner Explorer
- Visual Studio 主選單 View –> Other Windows –> Task Runner Explorer
Run - Development 上按右鍵 –> Run
編譯成功
code 0 為成功

心得

經過之前筆記使用 Webpack 來編譯 Vue.js Single File Components (.vue) 的經驗，在 Visual Studio 上的設定並沒有遇到太多問題，對於前端框架及工具的支援度很好，只是網路上相對介紹文章略少，如果沒有之前使用 Webpack 來編譯 Vue.js Single File Components (.vue) 的經驗，我想一定又少不了一番折騰

另外 Task Runner Explorer 還有一些設定可以調整，就待日後用到再紀錄囉

文章目錄