参考にさせて頂いたページ
過去に書いた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>
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
という文字列が表示されました。
今日はここまで。