jQueryで時間が止まっている人がwebpackつかってVue.jsの単一コンポーネントを普通のjsにするところまで頑張ってみたよ

タイトルそのままです。

よくわかんないから避けて通ってたんですよね、ビルド。ちょっともう色々限界を迎えてきたので（主にjavascriptのテスト。ブラウザで全関数通るように動かすとか無理ヤダ）、おばちゃん頑張ってみたよ。

ここ１，２週間、毎日ちょこちょこ進めていました。今週とうとう.vueファイルのビルドに成功したので記録として残しておきます。（先に去年から残してる最後の１回書けよ）

（完全に余談なんですが、仮面ライダービルドかっこ悪くないです？なんですかあのシャカシャカって。変身前のぴりぴりした雰囲気台無しじゃないです？しゃかしゃかってー）

環境

Windows10

まずは色々整える

１） Node.jsのインストール

Node.js

２）適当なフォルダを作成

３）コマンドプロンプトでさっき作ったフォルダに移動

phpstormさんだとProjectで該当フォルダ右クリックしてrun cmd shell すると、そこのフォルダにいる状態でプロンプトがでてくる。もしくはterminalを開くとプロジェクトのルートフォルダで開いてくれる。便利。

４） npm initする

適当にenter押せばOK。おわるとpackage.jsonが生成される

５） webpackをインストールする

npm install webpack --save-dev

素のjsをビルドしてみる

６）コンソールにHelloWorldするだけのjsファイルをつくる

console.log("hello")

７）ディレクトリはこんな感じにして

vueApp
└dist
└src
　└index.js

８） webpack.configはこんな感じにしてみよう

const path = require('path');

module.exports = {
    entry: {
        "index":'./src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
};

９） package.jsonはこんな感じ

{
  "name": "vueapps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js",
  },
  "author": "",
  "devDependencies": {
    "webpack": "^3.10.0"
  },
  "dependencies": {
  }
}

１０）実行したよ！distディレクトリのindex.jsになんか色々書かれてるよ！

ポイントはね、webpackにはフルパスで指定するとこですよ。パス通ってないから……。（ここで数日費やした模様）

vueファイルをビルドしてみる

さあ！ここからが本番ですよー！

さっきは必要無かったファイルを追加でインストールします。

１） npm install --save vue

２） npm install --save-dev vue-loader

３） webpack.configに以下を追加

module: {
        loaders:[
            { test: /\.vue$/, loader: 'vue' },  //ここ気をつけて！！↓の６を読んでね！！！
        ]
    }

４）大本のjsファイルを用意

import Vue from 'vue'
import test from './component/test.vue'

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

５） vueファイルを用意

<template>
    <div>
        <h1>test</h1>
        {{message}}
    </div>
</template>

<script>
    export default {
        name: "test",
        data:function(){
            return {
                message:"Hello Vue!"
            }
        },
    }
</script>

<style scoped>

</style>

６）ビルドだー！と思ったら、怒られました。

Module build failed: TypeError: this._init is not a function

これでまた数日止まりました（一日数十分ずつだからね）。検索しまくってわかったことは

stackoverflow.com

Into Webpack 2 omitting word loader when initializing some loader is not allowed.So you have explicitly define full name of loader including -loader, such as babel-loader, vue-loader, file-loader etc...

つまり、

Webpack2からローダー名の省略は使えなくなったよ。-loader込みの正式名称で書いてね

だってさ。わかってしまえば何だよもうな話……。

↑を修正してビルドしてみると、色々足りないので入れろと言われました。↓参考。

"css-loader"
"vue-html-loader"
"vue-loader"
"vue-style-loader"
"vue-template-compiler"

再度ビルドしたらexitが０で終了しーたよー！わーい！たーのしー！

最終的にこうなった

//package.json
{
  "name": "vueapps",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.config.js"
  },
  "author": "",
  "devDependencies": {
    "css-loader": "^0.28.9",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^14.1.1",
    "vue-style-loader": "^3.1.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0"
  },
  "dependencies": {
    "vue": "^2.5.13"
  }
}

//webpack.config.js
const path = require('path');

module.exports = {
    entry: {
        "index":'./src/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    },
    module: {
        loaders:[
            { test: /\.vue$/, loader: 'vue-loader' },
        ]
    },
    resolve: {
        extensions: ['.js', '.vue'],
        modules: [
            "node_modules"
        ],
        alias: {
            // vue.js のビルドを指定する
            vue: 'vue/dist/vue.common.js'
        }
    },
};

さいごに

ふろんとえんどえんじにゃーのみなさんのつらみを垣間見ました……。色々群雄割拠しすぎだわ情報が数ヶ月単位で使えなくなるわなんなのこの世界……。

あとプロダクションビルドしようとするとminifyできないのなんでなん…。いやもうそこはphpstormさんのFile watcherに一旦任せて、おとなしくwebpack4待つけどさ。。。

あと、肝心要の自動テストにたどり着いていないのでこれから頑張ります。

しぃぶろぐ。

仕事とか技術関係のこと。他色々