vue.config.js で webpackの設定を使えるようにする方法

import時代についていけないエンジニアがvueで四苦八苦してると出会うwebpackの設定。

参考になるgithubやblogには、こういうやつが書いている。が、使い方がわからない。

module.exports = () => {
        plugins: [
            new webpack.IgnorePlugin(...),
        ],

これは webpack.config.js（相当のファイル）に書くのが前提なarticle。注意点は、これは vue-cli ではなくてwebpack-dev-serverの話ということ。

// webpack.config.jsとか、いろんな名前で使われてるけどとりあえずconfigぽいもの
const webpack = require('webpack');           <------ よく省略されてる
module.exports = () => {
        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        ],

vue-cliの vue.config.js でどう書くかというと、 module.exports の中にあった第1階層を configureWebpack の中に移動するとよい。

// vue.config.js
module.exports = {
  configureWebpack: {                  <----------- これでくくる
    plugins: [
            new webpack.IgnorePlugin(...),
    ]
  }
}

参考： https://cli.vuejs.org/guide/webpack.html

簡単なことだけど、webpackをすっ飛ばしてる開発者にはこれがわからんのですよ。