webpack4.x+vue.js 2.x+vue-loaderでビルド環境を構築するその0001 導入

参考にさせて頂いたページ

2019年3月に新しく書きなおしました

Vuexを使用する基本的なビルド環境を構築する | webpack4.x+vue.js 2.x 環境構築 2019年3月版ステップ0001 - Motomichi Works Blog

motomichi-works.hatenablog.com

今日の環境

Windows10
node 8.11.1
npm 5.8.0
webpack 4.8.1

プロジェクトディレクトリを作成

mkdir webpack_4_vue_introduction

npm init する

npm init

全てそのままenterを押してデフォルト値が設定されたpackage.jsonが生成されました。

グローバルにインストール

npm install -g webpack webpack-cli babel

プロジェクトにインストール

npm install --save-dev webpack webpack-cli vue-loader vue-template-compiler babel-core babel-loader babel-preset-env

npm install --save vue

最近はbabel7になったので、以下をインストールして、babel6で使っていたbabel-core babel-preset-env はインストールしないぐらいがいいかも。(2018年9月21日追記)

npm install --save-dev @babel/core @babel/cli @babel/preset-env

ついでにpolyfillも入れておきました。

npm install --save @babel/polyfill

Usage Guide · Babel

今回webpack_4_vue_introductionディレクトリ内に作成するディレクトリ構造とファイル

.babelrc
index.html
package.json
package-lock.json
webpack.config.js
node-modules/*
src/index.js
src/App.vue
src/components/HelloWorld.vue
dist/bundle.js

webpack.config.jsの作成とその記述内容

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  // entry point
  entry: './src/index.js',
  // 出力するパスは絶対パスで書きます
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js'
  },
  // webpack4はlordersではなくなりました
  module: {
    rules: [
      // 拡張子.vueのファイルに対する設定
      {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader"
          }
        ]
      },
      // 拡張子.jsのファイルに対する設定
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
          },
        ]
      },
    ]
  },
  // デフォルトの設定値だけでは足りないことについて解決します
  resolve: {
    // モジュールを読み込むときに検索するディレクトリの設定
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    // importするときに省略できる拡張子の設定
    extensions: ['.js', '.vue'],
    alias: {
      // 例えばmain.js内で `import Vue from 'vue';` と記述したときの`from vue`が表すファイルパスを指定
      'vue$': 'vue/dist/vue.esm.js'
    },
  },
  // プラグインを列挙
  plugins: [
    new VueLoaderPlugin()
  ],
}

./src/index.jsの作成とその記述内容

import Vue from 'vue';
import App from './App';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
});

./src/App.vueの作成とその記述内容

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

./src/components/HelloWorld.vueの作成とその記述内容

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

index.htmlの作成とその記述内容

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>vue-tutorial</title>
</head>
<body>
<div id="app">
</div>

<script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

.babelrcの作成とその記述内容

babel6の場合

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "IE 11"]
        },
        "modules": false,
        "useBuiltIns": true
      }
    ]
  ]
}

babel7の場合

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

watchしてコンパイルしてみる

webpack -d --watch

ここまでやってのpackage.jsonの内容

{
  "name": "webpack_4_vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.1",
    "vue-loader": "^15.0.9",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.8.1"
  },
  "dependencies": {
    "vue": "^2.5.16"
  }
}

ページを見てみる

index.htmlをブラウザで開いて確認します。

Welcome to Your Vue.js App という文字列が表示されました。

今日はここまで。

おまけ

ERROR in ./src/order_apply/components/PostcodeInput.vue?vue&type=template&id=716ac2cf
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.

上記のようなエラーが出るときは、

const VueLoaderPlugin = require('vue-loader/lib/plugin');

と

new VueLoaderPlugin()

が足りてないという場合もあります。