覚え書き webpackの導入テンプレ

せっかくなのでQiitaに書きましょう
はじめてwebpack触った人がvue動かせるようになったところまでのまとめ
のちのちちゃんとまとめたい

参考記事
はじめてのWebpack　
https://qiita.com/_cheez/items/266b1b4534b6111a9686
step by stepで始めるwebpack
https://qiita.com/howdy39/items/48d85c430f90a21075cd

node.jsが入ってることを確認してterminal側の準備

mkdir (dir_name)
cd (dir_name)
npm init
npm install --save-dev webpack
npm install --save-dev webpack-dev-server
npm install --save-dev vue 

これでwebpackとwebpack-dev-serverとvue.js本体がnode_modulesにインストールされる。
vue本体も普通に拾ってこなくていい！

webpack.config.jsを作成

var path = require('path');

module.exports = {
    entry: __dirname + "/src/index.js",
    output:{
        path:__dirname + '/dist',
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            //loader
        ]
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist')
    },
};

package.jsonにstartを追加

"scripts": {
    "start": "webpack-dev-server",
},

ディレクトリ構造

Project Dir
|
|  package.json
|  webpack.config.js
|
|- dist
|   -index.html
|   -bundle.js
|
|- src
|   -index.js
|
|- node_modules

index.js

import Vue from 'vue/dist/vue.js';

index.html

<script src="./bundle.js"></script>

terminalのwebpackでビルド、npm startでwebpack-dev-server起動。
あとはブラウザで
http://localhost:(ポート番号)/webpack-dev-server/
を叩けばjs保存でホットリロードするかしこい機能が使える。
terminalからwebpack叩いておかないとbundle.jsのファイル自体は更新されないので注意。