webpack4 + Vue2 + TypeScriptの環境をサクッと作る
投稿
こんにちは、フリー写真素材サイト「Canvaspace」管理人のYasuです。
今回はwebpack4とVue2、TypeScriptの環境を作成していきたいと思います。
なぜ作成するのか
Vue ver2が今年いっぱいでサポートが終了します。
Vue ver2を使用している管理人の音楽プロジェクト「昼休みプレイン」のオフィシャルホームページでVue公式が発表している移行ビルドを実行してみましたが、一筋縄ではビルドが通らなかったため、まずは最小の環境で移行ビルドを試すためにwebpack4とVue2、TypeScriptの環境を作成しました。
手順
①プロジェクトを作成する
お好きなディレクトリ（フォルダー）を作成する
②npm initを行う
npm init -y行うとpackage.jsonというファイルが作成されます。
③webpackと関連するパッケージをインストールする
npm i -D webpack@4 webpack-cli@3 webpack-dev-server@3 copy-webpack-plugin@5④Vueとローダーをインストールする
npm i -S vue@2 vue-class-component vue-property-decoratornpm i -D css-loader@3 style-loader@1 ts-loader@7 vue-loader@15⑤その他必要なパッケージをインストールする
npm i -D @babel/core@7 @babel/preset-env@7 typescript@3 vue-template-compiler@2⑥babel関連の設定をpackage.jsonに記述する
"babel": {
"presets": [
"@babel/preset-env"
]
},
"browserslist": "last 2 versions, not dead, not ie > 0"⑦webpackの設定ファイルを作成・編集する
⑦-1 build/webpack.config.js ファイルを作成し、以下のように記述する
const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "bundle.js",
},
devServer: {
contentBase: path.resolve(__dirname, "public"),
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
},
{
test: /\.ts$/,
use: [
{
loader: "ts-loader",
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
],
},
{
test: /\.css$/,
use: ["vue-style-loader", "css-loader"],
},
],
},
resolve: {
extensions: [".js", ".ts", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
plugins: [new VueLoaderPlugin(), new CopyPlugin([{ from: "./public" }])],
};⑦-2 npm run devでwebpack dev serverを実行できるようにpackage.jsonに記述する
package.json
"scripts": {
"dev": "webpack-dev-server --hot"
},⑧TypeScriptの設定ファイルを作成し以下のように記述する
tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"noImplicitAny": true,
"experimentalDecorators": true
},
"include": ["./@types", "./src/**/*.vue", "./src/**/*.ts"],
"paths": { "@/*": ["/src/*"] },
"baseUrl": "./"
}⑨Vueプロジェクトを作成する
⑨-2 src/App.tsを作成し以下のように記述する
// App.ts
import {Component, Vue} from 'vue-property-decorator';
@Component
export default class App extends Vue {
}⑨-3 src/App.vueを作成し以下のように記述する
<template>
<div>
<p>Hello VueApp</p>
</div>
</template>
<script lang="ts">
import App from "./App";
export default App;
</script>⑨-4 src/index.tsを作成し以下のように記述する
import Vue from "vue";
import App from "./App.vue";
new Vue({
render: (h) => h(App),
}).$mount("#app");⑩npm run startを実行する
npm run dev上記コマンドを実行後にコマンドプロントに「Compiled successfully.」
ブラウザを開いて「localhost:8080」とURLを入力し画面に「Hello VueApp」と表示されれば、webpack4、Vue2、TypeScriptの環境構築は成功です！
今回上記の操作を行ったコードをこちらで公開しています。
上記の手順が面倒という方はコピーしてご使用ください。
コピー後に
npm inpm run devを行っていただければ実行できます。
関連情報
参考情報
