vue-cli を利用して作った環境を webpack4 と Typescript で動くようにしてから Vue.js の勉強をしてみようと思い立ってから 2時間くらい Vue.js と関係ないとこで費やして疲れたメモです。

Versions

webpack: 4.5.0
typescript: 2.8.1
vue-cli: 2.9.3

vue-cli を使って環境を構築する

vue init webpack myapp
cd myapp

色々聞かれますが推奨を選びました。
確認のため移動して動かしてみます。

npm run dev

localhost:8080 でサーバが立ち上がり、確認できました。
正常な状態が確認できたので停止して Typescript の環境を用意します。

Typescriptのインストール

npm i -D typescript ts-loader vue-class-component vue-property-decorator

ローダーと型定義ファイルも合わせて入れます。

./node_modules/typescript/bin/tsc --init

tsconfig.json を作り、公式サイトの設定をもとに少し手を加えて以下のようにしました。

{
  "compilerOptions": {
    // これは Vue のブラウザサポートに合わせます
    "target": "es5",
    "module": "es2015",
    // これは `this` におけるデータプロパティに対して厳密な推論を可能にします
    "strict": true,
    // this を型推論するため有効にする
    "noImplicitThis": true,
    "moduleResolution": "node",
    // import Vue from 'vue' を有効にする
    "allowSyntheticDefaultImports": true,
    // import/export を使うため有効にする
    "esModuleInterop": true,
    // デコレーターを有効にする
    "experimentalDecorators": true
  }
}

コメント入れたら読みにくいですね。

.vueファイルを import できるようにする

Typescriptで*.vueファイルを読めるようにするため型定義ファイルを設置します。
index.d.ts としました。

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

公式の型定義ファイル

webpack4で動くようにする

CLIで構築時にインストールされたwebpack@3からwebpack@4に（その他の webpack のモジュール含めて）上げておきます。 webpack-cli がいるので入れます。

npm i -D webpack-cli

webpack4にした際に次のモジュールを更新する必要がありました。
最初は、extract-text-webpack-plugin@nextに更新しましたが、公式ドキュメントにあるmini-css-extract-pluginに変更しました。

extract-text-webpack-plugin
html-webpack-plugin
webpack-dev-server

vue用のモジュールと一緒にnpm outdatedで確認して適宜最新のものに入れ直しました。

npm outdated
npm i -D extract-text-webpack-plugin@next
.
.
.

./build/webpack.base.conf.jsを編集

entryのmain.jsを.tsに拡張子を変えます。

entry: {
  app: './src/main.ts'
}

.tsを追加します。

resolve: {
  extensions: ['.js', '.ts', '.vue', '.json']
}

vue init時にeslintを入れた状態だったので、module.rulesからeslint-loaderを外してts-loaderを追加します。

  module: {
    rules: [
      // ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: '/node_modules/',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },

あとでtslintを使う予定。

./build/webpack.dev.conf.jsを編集

modeを追加します。

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',

./build/webpack.prod.conf.jsを編集

modeを追加する

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',

optimization.splitChunksを設定する

設定ファイルを編集せずに npm run build したら以下のエラーが出ました。

Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

webpack4から optimize.CommonsChunkPlugin が削除されたので、
optimization.splitChunks を使えということのようです。

plugins に書かれている new webpack.optimize.CommonsChunkPlugin({... をコメントアウトしてoptimization.splitChunksを設定します。

  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        vendor: {
          minChunks: 2
        },
        manifest: {
          minChunks: 2
        },
        app: {
          minChunks: 3
        },
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendor",
          chunks: "all"
        }
      }
    }
  },

チューニングはおいおいやることにしてひとまず設定。
webpack公式ドキュメントにあるsplitChunksを読んで適切に設定してください.

ExtractTextPluginを編集

build時にExtractTextPluginで怒られたのでhashType(md5)を追加して [md5:contenthash].css としました。

  plugins: [
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[md5:contenthash].css'),

MiniCssExtractPluginに変更するほうが良いようです。

あとはvuejs公式の基本的な使い方にあるように vue を import して書き換えます。

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'App'
})
</script>

上記のように *.vue ファイルを書き換えたら *.js ファイルを *.ts に書き換えます。
これでひとまず動くはずですが、webpack3からwebpack4へのマイグレーションを適宜してください。

npm run dev

dev/build共に無事に動いたらあとはTypescriptでVueに入門するだけです。あー長かった。

Webpack4 と Typescript で Vuejs の環境を作る