フロントエンド開発環境構築 Vue CLI

Vue CLI インストール※未インストールの場合のみ

npm i -g @vue/cli

すでにインストール済みかどうかは↓でチェック
（ –depth=0 をつけるとルート分だけとなるので見やすい）

npm ls -g --depth=0

＃この記事のVue CLIのバージョンは v4.1.2 だった。

Vue プロジェクト作成

vue create my-project
// my-projectにすであるディレクトリ名を指定した場合、
// Overwrite、Merge、Cancelの選択肢

? Please pick a preset: (Use arrow keys)
default (babel, eslint)
> Manually select features

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
// testは知識がないので…はずす…。そのうち…。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
// サーバの対応が必要なので今回はno

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
Sass/SCSS (with dart-sass)
> Sass/SCSS (with node-sass)
Less
Stylus
// dart-sassはよくわからんのでとりあえずいつもの

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json

? Save this as a preset for future projects? (y/N) n

開発サーバ立ち上げ

npm run serve

vue.config.js の設置

webpack.config.js などに書いていた設定は vue.config.js に書く。

const path = require('path');

module.exports = {
    pages: { 
        // 複数のページを設定することができる
        // HtmlWebpackPlugin と同じ項目を指定できる
        index: {
            // エントリーポイント
            entry: 'src/main.js',
            // テンプレートファイル
            template: 'public/index.html',
            // 出力されるファイル名
            filename: 'index.html',
            // titleテキスト テンプレートファイル内の以下が置換される。
            title: 'Index Page',
            // チャンクの指定（デフォルトでvendorと共通と自身のみに分割されている模様※）
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
        // Stringのみで設定もできる。
        // テンプレートファイルは、 `public/subpage.html`
        // public/subpage.htmlがなかったら `public/index.html`が呼び出される。
        // 出力されるファイル名は `subpage.html`となる。
        // subpage: 'src/subpage/main.js'
    },
    // 静的ファイルはキャッシュ制御のためにファイル名にハッシュをつけるかどうか。
    // デフォルトでtrueなので、falseの場合のみ指定
    filenameHashing: false,
    // webpack の devServerの設定をかける
    devServer: {
        port: 8080,
        contentBase: path.resolve(__dirname, 'public'),
        host: 'localhost',
    },
    css: {
        // 毎回読み込んでおくscssファイルの指定
        // 変数設定など、cssの出力がないもの
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/scss/val.scss";`
            }
        }
    },
    // webpack の設定
    configureWebpack: {
        resolve: {
            alias: {
                // 'vue$': 'vue/dist/vue.esm.js', // elオプションを使わなければ完全ビルドを使わなくていいのでこの指定は不要。
                '@': path.resolve(__dirname, 'src/'),
            }
        },
        plugins: [
            // plugin
        ]
    }
}

※vue cli 内のデフォルトchunk設定

webpackConfig
  .optimization.splitChunks({
     cacheGroups: {
      vendors: {
        name: `chunk-vendors`,
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        chunks: 'initial'
      },
      common: {
        name: `chunk-common`,
        minChunks: 2, // 2つ以上のエントリーポイントから共有されてたら
        priority: -20, // 設定の優先順位
        chunks: 'initial', // initial、async、all がある、allは同期・非同期ともにまとめて最適化、initialはentryから静的に読み込まれるものを対象、asyncは非同期に読み込まれるものを対象
        reuseExistingChunk: true // すでに分割され済みのモジュールがあればそれを再利用する…？
      }
    }
  })