Vue３ + express + webpackで開発環境を構築したときの備忘録。
##構成
最終的なフォルダとファイル構成は以下のとおり。
vue_app/
├ node_modules/
├ public/
│ └ bundle.js
│ └ index.html
├ src/
│ └ App.vue
│ └ index.js
├ package.json
├ server.js
└ webpack.config.jsoon
##1. 準備
てきとうなディレクトリを作成し、必要なモジュールをインストール。
#プロジェクトのフォルダを作成
$ mkdir vue_app
$ cd vue_app
#package.jsonを作成
$ npm init -y
#expressをインストール
$ npm i -S express
#Vue3をインストール
$ npm i -S vue@next
#vueファイルを読み込むために必須
$ npm i -D vue-loader@next @vue/compiler-sfc
#vueファイルでcssを読み込むために必須
$ npm i -D css-loader vue-style-loader
#babelをインストール
$ npm i -D @babel/core @babel/preset-env babel-loader
#webpackをインストール
$ npm i -D webpack webpack-cli
- SFC を扱うために必要な基本ローダー
- vue-loader@next (SFC を読み込む)
- @vue/compiler-sfc(vue-loader を動かすのに必要)
- css-loader (css を読み込む)
- vue-style-loader (読み込んだ css を js に埋め込む)
- JS のトランスパイルに必要なローダー
- @babel/core (Babel の本体)
- @babel/preset-env (実行環境を自動で指定してトランスパイルするプリセット)
- babel-loader (JS をトランスパイルする)
- Webpack
- webpack (webpack本体)
- webpack-cli (webpackコマンドを使うために必要なパッケージ)
##2. package.jsonの編集
ルートディレクトリのpackage.jsonを以下のように編集。
script.testを削除して、script.startとscirpt.buildを追加。
package.json
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "start": "node server.js",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"vue": "^3.2.18"
},
"devDependencies": {
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@vue/compiler-sfc": "^3.2.18",
"babel-loader": "^8.2.2",
"css-loader": "^6.3.0",
"vue-loader": "^16.8.1",
"vue-style-loader": "^4.1.3",
"webpack": "^5.54.0",
"webpack-cli": "^4.8.0"
}
}
##3. webpack.config.jsの作成
ルートディレクトリにwebpack.config.jsを作成。
webpack.config.js
const path = require("path")
const {VueLoaderPlugin } = require("vue-loader")
module.exports = {
//モードをdevelopment、production、noneから設定(必須)
//development: 開発時のファイル出力モード(最適化より時間短縮、エラー表示を優先）
//production: 本番時のファイル出力モード（最適化されて出力）
mode:'development',
//メインとなるjsファイル(エントリーポイント)
entry: "./src/index.js",
//ファイルの出力設定
output: {
//出力先のディレクトリ（絶対パスで指定）
path: path.resolve(__dirname, "public"),
//出力ファイル名
filename: "bundle.js",
},
//ローダーの設定
module: {
rules: [
{
test: /\.css$/, //拡張子が.cssの場合
use: ["vue-style-loader", "css-loader"] //vue-style-loader、css-loaderを使う
},
{
test:/\.vue$/, //拡張子が.vueの場合
loader: "vue-loader" //vue-loaderを使う
},
{
test: /\.js$/, //拡張子が.jsの場合
exclude: /node_modules/, //ローダーの処理から外すフォルダ
loader: "babel-loader", //babel-loaderを使う
//babelのオプションを指定
options: {
//プリセットを指定することで、 ES2019 を ES６ に変換
presets: [
"@babel/preset-env"
]
}
}
]
},
plugins: [
//Vueを読み込むために必要
new VueLoaderPlugin()
],
}
##4. Vueアプリケーション（フロントエンド）
ルートディレクトリのsrcフォルダを作成して、その中にindex.jsとApp.vueを作成。
src/index.js
//vueモジュールからcreateAppメソッドを取り込み
import { createApp } from 'vue'
//作成したコンポーネントファイルを取り込み
import App from './App.vue'
//Vue3のオブジェクトを生成
var app = createApp(App)
//#appの中に組み込み
app.mount('#app')
src/App.vue
<template>
<div>
{{ message }}
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "Hello Vue!"
}
}
}
</script>
ルートディレクトリにpublicフォルダを作成して、index.htmlを作成。
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue_app</title>
</head>
<body>
<div id="app"></div>
//webpackの出力ファイルを指定
<script type="module" src="./bundle.js"></script>
</body>
</html>
##５. express(バックエンド)
ルートディレクトリにserver.jsを作成。
server.js
//Expressのモジュールを取り込んで生成
const express = require('express')
const path = require('path')
const app = express()
//サーバーを起動
app.listen(3000, () => {
console.log('sucsess!!')
})
//publicディレクトリ以下は自動で返す
app.use(express.static(path.join(__dirname, 'public')))
//トップへのアクセスを/publicへ流す
app.get('/', (req, res) => {
res.redirect(302, '/public')
})
##６. webpackの実行&サーバーの起動
package.jsonで設定したscriptを実行。
npm run build とするとwebpackがpublic/bundle.jsを生成します。
npm run start を実行し、http://localhost:3000にアクセスすると'Hello Vue!'と表示されます。
$ npm run build #webpackの実行
$ npm run start #サーバーの起動