webpackを利用しVue.jsのビルド環境を作成する
webpackを利用し、シンプルなVue.jsファイルのビルド環境を作成します。ここでは、自分でwebpackをインストールし実行していきますが、素早く開発環境を作成する場合は、Vue CLIを利用してください。
※この記事は、過去の記事を最新の環境に合わせて書き直したものです。
環境
- webpack : 5.45.1
- webpack-cli : 4.7.2
- vue.js : 3.1.5
インストール
npmを使用して、webpackとvueをインストールしていきます。
最終的なフォルダ構成は以下のようになります。
1root 2 ┣ node_modules/ 3 ┣ dist/ 4 ┃ ┣ index.js 5 ┃ ┗ index.html 6 ┣ src/ 7 ┃ ┗ index.js 8 ┣ package.json 9 ┗ webpack.config.js
webpackのインストール
npmを使用してwebpackとwebpack-cliをインストールします。
1> npm i -D webpack webpack-cli
空のwebpack.config.jsファイルを作成します。./src/index.jsをビルドし./dist/index.jsファイルを作成するためには、以下のように記述します。
webpack.config.js1module.exports = { 2 mode: 'production', 3 entry: './src/index.js', 4 output: { 5 path: __dirname + '/dist', 6 filename: 'index.js', 7 }, 8}
Vue.jsのインストール
npmを使用してvueをインストールします。最新のvueをインストールするために@nextを指定します。
1> npm i -D vue@next
インストールされるvueは、そのままではランタイム限定ビルドとなり、templateオプションをサポートしていません。そのためtemplateを使用するためには完全ビルドが必要になるため、webpack.config.jsを編集し、以下の内容を追記します。
webpack.config.js1module.exports = { 2+ resolve: { 3+ alias: { 4+ vue$: 'vue/dist/vue.esm-bundler.js', 5+ } 6+ } 7}
ビルドと実行
webpackを使用して、vueをビルドし、実行ファイルを作成していきます。
webpackによるビルド
まず、エントリポイントとなるsrc/index.jsを作成します。テンプレートのmessageにHello Vue!と表示するだけの単純なものを作成します。
src/index.js1import { createApp } from 'vue'; 2 3const App = { 4 data() { 5 return { 6 message: 'Hello Vue!', 7 }; 8 }, 9}; 10 11createApp(App).mount('#app');
次に、以下のコマンドを実行しファイルをビルドします。
1> npx webpack
正常にビルドされた場合は dist/フォルダにindex.jsファイルが作成されます。
実行
実際にindex.jsを読み込んで実行するためのindex.htmlを作成します。
index.html1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Vue Test</title> 6</head> 7<body> 8<div id="app">{{message}}</div> 9<script src="index.js"></script> 10</body> 11</html>
index.htmlをブラウザで開き、画面にHello Vue!と表示されれば成功です。
おわりに
webpackを利用してvueをビルドする方法について書きました。
実際に複雑な処理をする場合はVue CLIを利用した方がいいですが、何をしているかを理解するには少しずつ環境を作成していってもいいのではないでしょうか。