今さら聞けないwebpackを使ってVue.jsを始める

今さらwebpackを使ってVue.jsを初めてみた。

まずは、npm経由でVue.jsをインストール

npm install vue

importを使ってVueをインクルードさせた上で、JavaScriptの実装をする。

import Vue from 'vue';
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});

webpack.config.jsの設定を行う。

const path = require('path');

module.exports = {
  mode: "production",
  entry: path.resolve(__dirname, 'app.js'),
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname)
  },
  resolve: {
    alias: {
      vue$: 'vue/dist/vue.esm.js'
    },
  },
  watch: true
};

最後はお決まりの、configコマンドを打って終了！

npx webpack --config webpack.config.js

babel.jsを使わない分導入までの敷居が低くていいかも！