Microsoft TypeScript Vue Starter を vue-loader 15系でやってみた
3カ月くらい前ですが、TypeScriptの雰囲気を知るため、こちらにあるMicrosoftのTypeScript Vue Starterを途中までやってみました。
チュートリアル形式でREADMEが書かれているので、そのまま進めたのですが、途中で躓いたところがあったのでメモ代わりに書いておきます。
なおタイトルにあるようにvue-loader 15系での話なので、今後はどうなるかは分からないです。
やってみた範囲について
TypeScript Vue StarterのREADMEの「Single File Components」まで以下の修正をしつつ進めました。
webpack.config.jsの修正
npm run build をすると以下のようなエラーとなりました。
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
どうもvue-loaderの14→15系に上がった時に変更があったようです。
webpack.config.js にVueLoaderPluginを明示的に追加してあげることで上手くいきました。
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
(中略)
mode: "development",
module: {
rules: [
{
test: /\.vue$/,
(中略)
},
(中略)
]
},
plugins: [
new VueLoaderPlugin()
],
もう一つ、やはりnpm run build時に以下のエラーにもなりました。
You may need an appropriate loader to handle this file type.
要は適切なloaderを定義しろ、ってことです。
今回はstyleタグを読めなかったので、webpack.config.js に以下を追加しました。
var path = require('path')
var webpack = require('webpack')
const { VueLoaderPlugin } = require("vue-loader");
module.exports = {
entry: './src/index.ts',
(中略)
module: {
rules: [
(中略)
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
]
},
