Humanity

Edit the world by your favorite way

Webpack + Vue(SFC) + TypeScript ハマりどころ (2018/05 版)

サクッと Webpack + Vue(SFC) + TypeScript でアプリ作ってみようと思うたび Webpack の設定に時間を溶かしてやる気を無くすシリーズ。今回はこちら!!!

// 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()
  ]
}

github.com

基本はこの手順通りに進めていけば大丈夫だと思ってたけど、上記でハマったので PR 投げよう…と思ったら投げる直前に同じ PR 投げてる人がいたのを見つけた。ぐぬぬ

github.com