参考にさせて頂いたページ
- Vue.js Vueコンポーネントのユニットテストを書いてみよう - Qiita
- 最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Vue, Three.js, jQueryのサンプル付き) - ICS MEDIA
- ベーシックなWebpackの導入と設定 - Qiita
過去に書いたhtml-loaderを使う記事
webpackを使ってES2015、Vue.jsのビルド環境を構築する - Motomichi Works Blog
今日の環境
- Windows10
- node v8.9.3
- npm 5.6.0
- webpack 3.10.0
プロジェクトディレクトリを作成
任意のディレクトリ名で良いのですが、frontendディレクトリを作成することにします。
mkdir frontend
以降のコマンドはfrontendディレクトリで実行していきます。
npm init
まずnpm initして、適当にenterしますが、エントリーポイントだけmain.jsにしました。
以下のような感じにしています。
{ "name": "frontend", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes) yes
グローバルにインストール
npm install -g webpack babel
プロジェクトにインストール
npm install --save-dev webpack@3 vue-loader vue-template-compiler babel-core babel-loader babel-preset-es2015
npm install --save vue
今回frontendディレクトリ内に作成するディレクトリ構造とファイル
- index.html
- package.json
- package-lock.json
- webpack.config.js
- node-modules/*
- src/main.js
- src/App.vue
- src/components/HelloWorld.vue
- result/bundle.js
webpack.config.jsの作成とその記述内容
const path = require('path'); module.exports = { entry: './src/main.js', output: { path: `${__dirname}/result`, filename: 'bundle.js' }, module: { loaders: [ { loader: 'babel-loader', exclude: /node_modules/, test: /\.js[x]?$/, query: { cacheDirectory: true, presets: ['es2015'] } }, { test: /\.vue$/, loader: "vue-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: [] }
./src/main.jsの作成とその記述内容
import Vue from 'vue'; import App from './App'; Vue.config.productionTip = false; /* eslint-disable no-new */ 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="result/bundle.js"></script> </body> </html>
watchしてコンパイルしてみる
webpack -d --watch
ここまでやってのpackage.jsonの内容
{ "name": "frontend", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-es2015": "^6.24.1", "vue-loader": "^13.6.1", "vue-template-compiler": "^2.5.13", "webpack": "^3.10.0" }, "dependencies": { "vue": "^2.5.13" } }
ページを見てみる
index.htmlをブラウザで開いて確認します。
Welcome to Your Vue.js App
という文字列が表示されました。
今日はここまで。