Webpack + Vue(SFC) + TypeScript ハマりどころ (2018/05 版)
サクッと Webpack + Vue(SFC) + TypeScript でアプリ作ってみようと思うたび Webpack の設定に時間を溶かしてやる気を無くすシリーズ。今回はこちら!!!
- Vue Loader v15 から
VueLoaderPlugin
が必須になった - vue-loader は .ts や .css へのエントリがないと
<script lang='ts'>
や<style>
に遭遇するとエラーを吐く
// webpack.config.js const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { mode: 'development', module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, // この設定は .js ファイルと .vue ファイルの <script> ブロック両方に適用される // (JS で書くならこっち) // { // test: /\.js$/, // loader: 'babel-loader' // }, // この設定は .ts ファイル、.tsx ファイルと .vue ファイルの <script lang='ts'> ブロック両方に適用される { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } }, // この設定は .css ファイルと .vue ファイルの <style> ブロック両方に適用される { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] } ] }, plugins: [ // 必須 new VueLoaderPlugin() ] }
基本はこの手順通りに進めていけば大丈夫だと思ってたけど、上記でハマったので PR 投げよう…と思ったら投げる直前に同じ PR 投げてる人がいたのを見つけた。ぐぬぬ…