手順

  • typescriptを入れる
    • $ yarn add --dev typescript ts-loader@3.5.0
    • ts-loaderはwebpack 3に対応している v3.5.0を入れる必要あり
  • vue-cliが入っていることを確認
    • $ vue --version
    • 入っていなければインストール（yarn global add vue-cli）
  • インストールされた /node_modules/ts-loader/README.md を読みつつ進める

１. webpack.config.js を以下のように作成or追記

    module.exports = {
    devtool: 'inline-source-map',
    entry: './app.ts',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        // Add \`.ts\` and \`.tsx\` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [
        // all files with a \`.ts\` or \`.tsx\` extension will be handled by \`ts-loader\`
        { test: /\\.tsx?$/, loader: 'ts-loader' }
        ]
    }
    }

２. tsconfig.json に以下を追加

    {
    "compilerOptions": {
        "sourceMap": true
        }
    }
  • あとは目的ファイルを .ts にリネームして webpack.mix.js を更新する
  • $ npm run dev

参考にしたサイト