皆さんこんにちは！底辺プログラマーのヤスです！
今回は仕事で使用しているvue.jsについて記事を作成しようと思います。
他に参考になる記事がなかったので記事として残しておきます！
vueのプロジェクトを作成する際、時間短縮のためにvue-cliを使用して環境構築をする記事はたくさんあります。
しかし、vue-cliで作成したプロジェクトには不要なパッケージもたくさん含まれてしまっているので必要最低限の構成を目指していきます。
Contents
プロジェクト用のフォルダを作成
まずは環境構築を行うためのフォルダを作成します。
ここではsimpleというフォルダを作成し、その中に環境を作成します。
コマンドプロンプトを起動して、先ほど作成したsimpleというフォルダに移動し
必要なパッケージをインストールしていきます。
インストールには下記のコマンドを実行してください。
|
1 |
npm init |
コマンド実行後、いくつか質問されますが、全てEnterを押していきましょう。
細かく設定する場合はそれぞれ入力を行って下さい。
ココでは解説は行いません。
simpleフォルダにpackage.jsonが作成されていると思います。
|
1 |
npm i -D vue webpack webpack-cli |
simpleフォルダ配下にnode_modulesフォルダと
package-lock.jsonファイルが作成できていれば成功です。
webpack.config.jsを作成
webpack.config.jsを先ほどのpackage.jsonを作成したディレクトリに作成します。
ファイルの中身は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const path = require('path') module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js' }, resolve: { extensions: ['.js', '.vue', '.json' ] }, module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' } ] } } |
index.htmlを作成する
index.htmlはプロジェクトを起動した際にブラウザ上で表示されるファイルです。
ファイルの中身は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Simple Vue</title> </head> <body> <div id="app"></div> <script src="dist/bundle.js"></script> </body> </html> |
エントリーポイントであるindex.jsを作成する
|
1 2 3 4 5 6 |
import Vue from 'vue' new Vue({ el: '#app', render: (h)=>h('p', 'Hello world!') }); |
package.jsonを編集する
package.jsonにwebpackでビルドするように編集を行います。
scriptの部分にbuildにwebpackを使用するように追記します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "webpack", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "dependencies": { "vue": "^2.6.10" } } |
index.jsをbuildしてbundle.jsを作成する
先ほどindex.jsを作成したディレクトリまで移動して下記のコマンドを実行します。
|
1 |
npm run build |
webpack.config.jsに記載したディレクトリであるdistディレクトリ直下にbundle.jsファイルが作成されます。
ディレクトリやファイル名はwebpack.config.jsで変更可能です。
自分の好みに合わせて設定を行って下さい。
index.htmlをブラウザで表示する
先ほどbuildを行ったbundle.jsがindex.htmlに表示されるようになっています。
Hello world!が表示されていれば成功です！
ファイルサイズの比較
vue-cliにてwebpackテンプレートを使用して作成した場合、プロジェクトのファイルサイズは130Mになります。
しかし、今回の記事の手法を使えば30M以下に抑えられます。
実際はここからvueファイルを読み込めるようにしたりするとさらに容量は増えていきます。
まとめ
次の記事ではvueファイルを読み込むところまで実際にやってみようと思います。
今回の記事は以上となります。
最後まで読んで頂きありがとうございます。
