Webpack関連

Vue.jsで開発でWebpack関連でつまずくことが多かったので得た情報をまとめていく

Webpack4、CopyWebpackPluginのwebpack.config.js

Webpackはバージョンアップごとに設定ファフィルの記述方式が変わるらしい
↓見出し環境下での基本的な設定方法↓

webpack.config.js

const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: "**/*.html",
          to: "./sample",
          context: ".src/sample",
        },
      ],
    }),
  ],
};

正直よくわかってない

参照ページ

ValidationError: Invalid options object.

Vue.jsでnpm run dev実行時に発生したエラー

ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, filter?, toType?, force?, flatten?, transform?, cacheTransform?, t
ransformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)

トップディレクトリ/build/webpack.dev.conf.js内のnew CopyWebpackPlugin部分を以下のように書き換え

webpack.dev.conf.js

new CopyWebpackPlugin({
      patterns: [
        { from: 'source', to: 'dest' },
        { from: 'other', to: 'public' },
      ],
    }),

参照ページ