Vue.jsとVue Routerをwebpackにまとめる
Vue.jsとVue Routerをwebpackにまとめる方法についてまとめました。
まず、Vue.jsとwebpackのインストールについては、前回の記事を参考にしました。
次にnpmコマンドでVue Routerをインストール。
npm install vue-router
完了後、Vue Routerの参考ページをもとに以下のscriptを作成
// src/app.js import Vue from "vue"; import VueRouter from 'vue-router'; import "core-js/stable"; import "regenerator-runtime/rumtime"; Vue.use(VueRouter); const Foo = { template: '<div>foo</div>' }; const Bar = { template: '<div>bar</div>' }; const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ]; const router = new VueRouter({ routes // `routes: routes` の短縮表記 }); const app = new Vue({ router }).$mount('#app')
まず、ターミナルでjsのトランスフォームを行います。
regenerator src lib
最後に、webpackコマンドを叩けば完了です。
npx webpack --config webpack.config.js
//webpack.config.js const path = require('path'); module.exports = { mode: 'production' , entry: path.resolve(__dirname, 'lib/app.js'), output: { filename: 'app.min.js', path: path.resolve(__dirname, 'dist') }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } } }