2020年4月へ

Webpack の Config はどこに？

公開日：

最終更新日：

開発

AI要約

Vue.js開発でWebpackの設定ファイルが見当たらず、Vue-Cliを使って新規プロジェクトを作成。Vue-uiのGUIで簡単に設定し、vue.config.jsがWebpackの設定ファイルに相当することを確認しました。プラグイン管理もUI上で手軽に実施可能です。

  • Vue.js
  • Webpack
  • Vue-Cli
  • vue.config.js
  • Vue-ui
  • フロントエンド開発
  • プロジェクト設定
  • TypeScript
  • Vuex
  • プラグイン管理

Vue.jsで開発をつづけていると、WebPackのConfigファイルがないことに気付いた。

そもそも、WebPack自体が、既存のプロジェクトのPackage.jsonにないし、どうも中途半端にプロジェクトを始めてしまった様子。

Vue.jsも「少し」分かってきたので、改めて、Vue-Cliというフォルダを作り、そこにプロジェクトを作成することにした。

ちなみに、せっかくなので、Vue-ui を使う。

% vue ui
?  Starting GUI...
?  Ready on http://localhost:8000
✨  Creating project in /Users/hiroshi/vue-cli/project.
?  Initializing git repository...
⚓  Running completion hooks...
?  Generating README.md...
Opening /Users/hiroshi/vue-cli/project...

プロジェクト名は暫定的に「project」としてます。

日本語UIでかなり簡単に（やさしく）プロジェクトが生成できました。

プラグインの管理も、UI上でできるので、非常にわかりやすい。

ここで、VuexやTypeScriptを導入。

で、webpackのconfigファイルは？

プロジェクト設定の右側、「Vueの設定を開く」を選択すると、

vue.config.jsというファイルが開かれました。
プロジェクトのルートにあるようです。

これが、WebPackのConfigファイルを同じ働きをするみたいですね。

参照

VueCLI3導入とできることまとめ

©Hiroshi Nagayama