Vue.js

webpack4+Babel+Vue.jsでの環境構築

  /

こんにちは！ともです(@_tomo_engineer)！

今回はwebpack+Babel+Vue.jsという構成でVue.jsを利用してみます。

CDNでVue.jsを使えるようにして勉強してたんですが、もう少しカッコ良い感じで勉強したいと思って勉強してみました。

目次

  • webpackとは
  • Babelとは
  • 環境構築

webpackとは

webpackとはモジュールバンドラです。

モジュールバンドラとは複数のファイルを１つのファイルにまとめる事ができるツールです。複数のファイル(モジュールたち)を１つにまとめる(バンドルする)事が出来ます。

Vue.jsのようなフレームワークと自分で作成したコードを１つのファイルに纏めてくれます。HTML・CSSもバンドルする事が可能です。

Babelとは

BabelとはES6やそれ以上の次世代JavaScriptをES5に変換(transpiling)してくれるNode.js製のツールです。全てのブラウザが最新のJavaScriptを理解できる訳では無いためBabelのようなツールを用いてES5に変換します。

環境構築

node.jsをインストール

まずはnode.jsをインストールして下さい。webpackやBabelはnode.jsでサポートされているツールですのでnode.jsをインストールする必要があります。

npm init -y

上記のコマンドでローカルにnode_moduleをダウンロードする準備をします。

npmでwebpack関係をダウンロード

npm i webpack webpack-cli --save-dev

上記のコマンドでwebpack4とcliのモジュールをダウンロードします。

package.jsonのscriptを以下のように書きます。

"scripts": {
"build": "webpack  --mode=development"}

そして次のコマンドで実行します。

npm run build

おそらく、このエラーが出ると思います。

ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘

これはwebpack4は./src/index.jsをバンドルするのがデフォルトの設定だからです。よって./src/index.jsを作成します。

#index.js
console.log('Hello world');

index.jsを作成後に再度npm run buildをしてみると./dist/main.jsが作成されます。webpack4のデフォルトのバンドルファイルの出力先は./dist/main.jsだからです。これは設定によって変更できますが割愛します。

またmodeオプションを設定しました。

バンドル後のファイルが改行なしのminifiedなのか改行された見やすいものなのか指定する必要があります。

  • –mode developmentで見やすい形式のバンドルファイルが生成
  • –mode productionでminified形式(１行)のバンドルファイルが生成
  • developmentの場合
  • productionの場合

Babel関係のダウンロードと設定

Babel関係で必要なものは次の３つです。

  • babel core
  • babel loader
  • babel preset env

よって

npm i @babel/core babel-loader @babel/preset-env --save-dev

またBabelの設定をするために.babelrcファイルを作成する必要があります。

# .babelrc
{
    "presets": [
        "@babel/preset-env"
    ]
}

Vue.jsの導入

npmでvueをダウンロードします。

npm i vue

main.jsにVue.js関連を書いてみる。

# index.js
import Vue from 'vue';

new Vue({
    el: '#app',
    data: {
        text: "hello world"
    }
})

そしてbuildしてみる。

いっぱい出て来た。index.htmlを作成しバンドル後のファイルを読み込んでみる。

<!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>Document</title>
</head>
<body>
    <div id="app">
        {{text}}
    </div>
    <script type="text/javascript" src="../dist/main.js"></script>
</body>
</html>

予定としてはHello worldが出力されて欲しいが表示はされない。

package.jsonの修正

下記のように修正する。

# package.json
"scripts": {
    "build": "webpack --mode production --resolve-alias vue=vue/dist/vue.js"
  },

–resolve-alial以降を追加し再度buildするとHello worldが出力された。完全ビルドされたvue.jsを読み込む必要があるそうです。

ただscriptが長くなってしまうのは美しくないので、webpack.config.jsに完全ビルドされたvue.jsを読み込むように記述します。

#webpack.config.js
const path = require('path');
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
        ]
    },
    resolve: {
        modules: [path.join(__dirname, 'src'), 'node_modules'],
        extensions: ['.js', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        },
    },
}

最終的なtreeは次です。

.
├── dist
├── node_modules
├── package-lock.json
├── package.json
├── src
└── webpack.config.js

まとめ

今回はwebpack+babel+Vue.jsという構成でVue.jsの開発環境を整えました。CDNから脱却する事で少し今風な開発環境になった気がします。

少しずつwebpackの設定やらを修正し自分のものにしていきたいです。

関連記事はこちら