We Are GRIPHONE

Vue.js+Webpack始めてみました

OyamaEitaPosted by

グリフォン Advent Calendar 2018 15日目の記事を担当しました、フロントエンドエンジニアの小山です。
今回はVue.js+Webpackで開発を初めてやってみた時に自分がやったWebpackの設定について書いていきます。

※この記事はGRIPHONE Advent Calendar 2018 15日目の記事です。
https://adventar.org/calendars/3147
https://qiita.com/advent-calendar/2018/griphone

先ずはnpm install

この時インストールしたパッケージはこんな感じ

{
  "name": "vuejstest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "watch": "webpack --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.1.6",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "autoprefixer": "^9.3.1",
    "babel-loader": "^8.0.4",
    "css-loader": "^1.0.1",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "vue-loader": "^15.4.2",
    "vue-router": "^3.0.1",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "prerender-spa-plugin": "^3.4.0",
    "vue": "^2.5.17"
  }
}

なんか色々調べて探り探りやってたのでいらないものがちょいちょい入ってますね…(汗

Webpackではloaderを使うことでjavascriptじゃないファイルをjavascriptで扱えるようにできるのでloaderの類が色々入っています。

webpack.config.jsを書いていこう

まずは基本設定

const MODE = 'development';
const enableSourceMap = (MODE === 'development');

module.exports = {
    mode: MODE,
    entry: './src/index.js',
    output: {
        filename: '[name].js',
        path: __dirname + '/dist',
    },
    devServer: {
        contentBase: 'dist',
        open: true,
    },
}

モード、エントリーポイント、アウトプットディレクトリを設定します。
devServerでローカルサーバの設定をしてますがopen:trueにしておくとサーバを立ち上げた際に勝手にブラウザが開いてくれるので便利です。
MODEの切り替えでソースマップを利用する、しないを選べるようにしてます
(これは後で使います)

モジュール関連

スタイルシートまわり

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            sourceMap: enabledSourceMap,
                            minimize: true,
                            // 0 => no loaders (default);
                            // 1 => postcss-loader;
                            // 2 => postcss-loader, sass-loader;
                            importLoaders: 2
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            plugins: [
                                // Autoprefixerを有効化
                                require('autoprefixer')({grid: true})
                            ]
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: enabledSourceMap,
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'vue-style-loader',
                    'css-loader'
                ]
            },
        }
    }
}

うん、長い。
ここではstyle-loaderの設定から始めていきます。
style-loaderを使うとビルドされた際にstyleタグとしてDOMに挿入されるようになります。

loaderの設定は下に書いてあるものから順に実行されていきます。
ここでは

  1. sass-loader(sassファイルをコンパイルして通常のcssに変換)
  2. postcss-loader(ベンダープレフィックスとかつける)
  3. css-loader(ファイルの依存関係の解決)

といった感じのことをやってます。

その次がcss-loaderでこれは普通のcssを取り込むために入れてあるものです。

jsまわり

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    ...
    module: {
        ...
        rules: [
            // 拡張子 .vue の場合
            {
                test: /\.vue$/,
                use: [
                    'vue-loader',
                ]
            },
            // 拡張子 .js の場合
            {
                test: /\.js$/,
                use: [
                    {
                        // Babelを利用する
                        loader: 'babel-loader',
                        // Babelのオプションを指定する
                        options: {
                            presets: [
                                // ES2018 を ES5 に変換
                                '@babel/preset-env',
                            ]
                        }
                    }
                ]
            }
        ]
    },
};

jsまわりは.vueファイルと通常の.jsファイルを読み込めるようにそれぞれに対応したloaderを追加しています。
.jsファイルの方はBabelを間に挟むことでES2018にも対応しておきます。

プラグインも入れとこう

const Path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const PrerenderSpaPlugin = require('prerender-spa-plugin');
module.exports = {
    ...
    plugins: [
        // Vueを読み込めるようにするため
        new VueLoaderPlugin(),
        // プリレンダリング
        new PrerenderSpaPlugin(
            Path.join(__dirname, 'dist'),
            [
                '/sample',
            ],
            {
                postProcessHtml: context => {
                    return context.html;
                }
            }
        ),
    ],
};

最後にプラグインの設定をします。
.vueを読み込めるようにvue-loaderと、SEO対策のためにprerender-spa-pluginを入れます。
(この時は小規模な開発だったのでサーバサイドレンダリングは見送りました)

以上でWebpackまわりの設定完了です！

最後に

かなり色々調べながら設定ファイルを作ったので余計なとこ、足りてないところが多々あるかもしれません。。。
今後ももうちょっと勉強してきちんと使いこなせるよう頑張ります。

このエントリーをはてなブックマークに追加