2017-11-13

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

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


基本設定

  1. 安裝 vue

    • 專案上按右鍵 --> Quick Install Package...

      1quickinstall

    • 選擇安裝工具 --> 輸入 vue --> 預設會加上 --save-dev

      2installvue

      • 工具有其他選擇

        3othertool

      • 預設 --save-dev 可以編輯修改的

        4change

  2. 安裝其他相關套件

    • 專案上按右鍵 --> Quick Install Package...

      1quickinstall

    • 選擇安裝工具 --> 輸入 webpack babel-loader babel-core css-loader vue-loader vue-template-compiler

      5otherpackage

安裝 WebPack Task Runner

  1. Visual Studio 主選單 Tools --> Extensions and Updates...

    6extension

  2. Online tab --> 搜尋 WebPack Task Runner --> 安裝

    7webpackrunner

加入網頁及 js

  1. 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>
    
    
  2. 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>
    
  3. Scripts/src 資料夾中加入 index.js
    import Vue from 'vue'
    import Msg from './msg.vue'
    new Vue({
        el: '#app',
        components: { Msg }
    })
    

設定 WebPack

  1. 在網站根目錄加入 webpack.config.js
    • 專案上按右鍵 --> Add --> New Item...

      8newitem

    • Web --> 選擇 WebPack Configuration File

      9addwebpackconfig

  2. 設定 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',
            }
        }
    };
    

執行編譯

  1. 開啟 Task Runner Explorer

    • Visual Studio 主選單 View --> Other Windows --> Task Runner Explorer

      10taskrunner

  2. Run - Development 上按右鍵 --> Run

    11run

  3. 編譯成功

    code 0 為成功

    12buildpass

心得

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

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

參考資訊

  1. How To Integrate Webpack Into Visual Studio 2015
  2. 使用 Webpack 來編譯 Vue.js Single File Components (.vue)
  3. Visual Studio 2015 工作執行器 (Task Runners) 簡介

沒有留言:

張貼留言