How to add a webpack plugin

[LokiMidgard]

I currently try to convert an webpack config that was ejected to just.

I'm nut sure how I can add webpack plugins. E.g I try to add CopyWebpackPlugin with different aproaches, merging it with existing webpackConfigs or having it standalone. It either throws errors, or is silently ignored.

One version I tried was:

const path = require('path');
const { webpackConfig, webpackMerge, htmlOverlay, fileOverlay } = require('just-scripts');

const CopyWebpackPlugin = require('copy-webpack-plugin');

function makwWebpack(folder) {
  return webpackMerge(
    webpackConfig,
    htmlOverlay({
      template: 'public/index.html'
    }),
    {
      entry: './src/' + folder + '/index',
      output: {
        path: path.join(process.cwd(), 'dist', folder),
      }
      // Here you can custom webpack configurations
    }
  );
};

module.exports = [
  // copy public folder
  {
    module: {

      plugins: [new CopyWebpackPlugin([{ from: '**/*', context: 'public/', to: 'dest' }], {
        copyUnmodified: true, debug: 'info', ignore: [
          // Doesn't copy any files with a txt extension    
          '*.html',
          'test.json'
        ]
      })]
    }
  },
  makwWebpack('Download'),
  makwWebpack('Upload'),
  makwWebpack('Function'),
  makwWebpack('UploadDialog'),
  makwWebpack('Login'),
];

[LokiMidgard]

I think the documentation mentioned in #253 would help.

[LokiMidgard]

I had a working version in the past, but it did copied the files to a directory I wasn't expecting, so I didn't see it.

A workign version is:

const path = require('path');
const { webpackConfig, webpackMerge, htmlOverlay, fileOverlay } = require('just-scripts');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('interpolate-html-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

function makwWebpack(folder) {
  if (folder === undefined) {
    folder = '';
  }
  if (folder.length > 0 && !folder.startsWith('/')) {
    folder = '/' + folder;
  }
  return webpackMerge(
    webpackConfig,
    htmlOverlay({
      template: 'public/index.html'
    }),
    {
      entry: './src/' + folder + '/index',

      output: {
        path: path.join(process.cwd(), 'dist', folder),
      },

      plugins: [
        new HtmlWebpackPlugin({
          inject: true,
          template: 'public/index.html',
          minify: {
            removeComments: false,
            collapseWhitespace: false,
            removeRedundantAttributes: false,
            // useShortDoctype:               true, -- it's already short
            removeEmptyAttributes: false,
            removeStyleLinkTypeAttributes: false,
            keepClosingSlash: true,
            minifyJS: false,
            minifyCSS: false,
            minifyURLs: false,
          },
        }),
        new InterpolateHtmlPlugin({
          'PUBLIC_URL': 'development'
        }),
      ],
    }
  );
};

module.exports = [
  // copy public folder
   webpackMerge(
    makwWebpack(),
    {
      plugins: [
        new CopyWebpackPlugin([{ from: '**/*', context: 'public/' }], {
          copyUnmodified: true, debug: 'info', ignore: [
            // Doesn't copy any files with a txt extension    
            '*.html',
            'manifest.json'
          ]
        }),
      ],
    }),
  makwWebpack('Download'),
  makwWebpack('Upload'),
  makwWebpack('Function'),
  makwWebpack('UploadDialog'),
  makwWebpack('Login'),
];

I needed to add a index html to the root that actually contains nothing. otherwise I wasn't able to copy files to my root folder.