Webpack4 + Vue.jsの設定手順

久しぶりにWebpackから設定したら忘れていることが多かった。
今後設定をする機会のために手順をメモした。

今回はVue.jsだったがReactなどでも設定をする機会がありそうなので、
そのときはここに追記しようと思う。

Webpack

webpackをインストール

# use yarn
yarn add --dev webpack

# or npm
npm install --save-dev webpack

webpack-cliをインストール

webpack4から必要になった。

yarn add --dev webpack-cli

webpack-dev-serverをインストール

Webサーバを提供。
ライブローディングに対応する。

yarn add --dev webpack-dev-server

webpack-config.js

+  devServer: {
+    contentBase: './dist'
+  },

コマンドを追加
json:package.json


Vue.jsを導入する

vueをインストールする

yarn add vue

vue-loaderをインストールする

単一コンポーネントをコンパイルするために必要。
vue-loaderと依存関係があるvue-template-compilerの一緒にインストールする。

yarn add --dev vue-loader vue-template-compiler

拡張子がvueのときは、vue-loaderでトランスパイルするための設定を追加する。

webpack-config.js

module: {
  rules: [
    {
      test: //.vue$/,
      loader: 'vue-loader'
    }
  ]
}

babelをインストールする

ES6, 7をES5にトランスパイルするためにbabelを使う。

yarn add --dev babel-loader @babel/core @babel/preset-env

webpack-config.jsにjsファイルはbabel-loaderでトランスパイルするという設定を追加する。

webpack-config.js

  module: {
    rules: [
      {
        test: //.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  }

babelrcでは対象に含めるブラウザなどを設定できる。
今回は最小限の設定。

.babelrc

{
  "presets": ["@babel/preset-env"]
}

SASSを使えるようにする

単一コンポーネントのstyleでSASSを使えるようにする。

SASSをコンパイルするために必要なloaderをインストールする。

yarn add --dev sass-loader node-sass css-loader

webpack-config.jsにSASSをコンパイルするための設定を追記する。

webpack-config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              indentedSyntax: true
            }
          }
        ]
      }
    ]
  }
}

svgを使えるようにする

yarn add --dev vue-svg-loader

webpack-config.jsに設定を追加する。

webpack-config.js

module.exports = {
  module: {
    rules: [
      {
        {
          test: /\.svg$/,
          loader: 'vue-svg-loader'
        }
      }
    ]
  }
}

拡張子を省略する

importするときのファイル名から拡張子部分を省略できるようになる。
この例では、.jsと.vue拡張子を省略できるようにしている。

webpack-config.js

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