Help us understand the problem. What is going on with this article?

Webpack4 と Typescript で Vuejs の環境を作る

More than 1 year has passed since last update.

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に入門するだけです。あー長かった。

Sapphirus
紙とか UI のデザイナーです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした