I try to just copy files to check simple webpack config. So I stuck trying to make copy-webpack-plugin to work - nothing happens: no copied files, no errors, nothing

Common config (webpackmon.js):

const path = require('path');

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

const postCssPlugin = [
  require('postcss-import'),
  require('postcss-nested'),
  require('postcss-simple-vars'),
  require('autoprefixer')({
    browsers: [
      'last 3 versions',
      'android 4.2'
    ]
  })
];

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: [
    'babel-polyfill',
    path.resolve(__dirname, '../src/index.js')
  ],
  output: {
    path: path.resolve(__dirname, '../dist/js'),
    publicPath: '',
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.p?css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: postCssPlugin
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/assets/**/*'),
        to: path.resolve(__dirname, '../dist/assets'),
        flatten: true
      }
    ])
  ],
  stats: {
    modules: true,
    warnings: false,
    version: true,
    timings: true,
    performance: false,
    hash: true,
    errors: true,
    errorDetails: true,
    colors: true,
    builtAt: true
  }
};

webpack.prod.js:

const commonWebpackConfig = require('./webpackmon.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = Object.assign(commonWebpackConfig, {
  mode: 'production',
  plugins: [
    new UglifyJsWebpackPlugin({
      sourceMap: true
    })
  ]
});

And build starting file build.js:

const webpack = require('webpack');

const webpackProdConfig = require('./webpack.config/webpack.prod.js');

webpack(webpackProdConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err.stack || err);
  }

  console.log('Successfully compiled!');
});

So could anyone figure out why doesn't it work and where am I wrong? copy-webpack-plugin: 4.5.2 node: 9.1.0 npm: 6.3.0 windows: 10

Addition - folder structure:

I try to just copy files to check simple webpack config. So I stuck trying to make copy-webpack-plugin to work - nothing happens: no copied files, no errors, nothing

Common config (webpack.common.js):

const path = require('path');

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

const postCssPlugin = [
  require('postcss-import'),
  require('postcss-nested'),
  require('postcss-simple-vars'),
  require('autoprefixer')({
    browsers: [
      'last 3 versions',
      'android 4.2'
    ]
  })
];

module.exports = {
  context: path.resolve(__dirname, '../src'),
  entry: [
    'babel-polyfill',
    path.resolve(__dirname, '../src/index.js')
  ],
  output: {
    path: path.resolve(__dirname, '../dist/js'),
    publicPath: '',
    filename: 'app.js'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.json']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.p?css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: postCssPlugin
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/assets/**/*'),
        to: path.resolve(__dirname, '../dist/assets'),
        flatten: true
      }
    ])
  ],
  stats: {
    modules: true,
    warnings: false,
    version: true,
    timings: true,
    performance: false,
    hash: true,
    errors: true,
    errorDetails: true,
    colors: true,
    builtAt: true
  }
};

webpack.prod.js:

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = Object.assign(commonWebpackConfig, {
  mode: 'production',
  plugins: [
    new UglifyJsWebpackPlugin({
      sourceMap: true
    })
  ]
});

And build starting file build.js:

const webpack = require('webpack');

const webpackProdConfig = require('./webpack.config/webpack.prod.js');

webpack(webpackProdConfig, (err, stats) => {
  if (err || stats.hasErrors()) {
    console.error(err.stack || err);
  }

  console.log('Successfully compiled!');
});

So could anyone figure out why doesn't it work and where am I wrong? copy-webpack-plugin: 4.5.2 node: 9.1.0 npm: 6.3.0 windows: 10

Addition - folder structure:

• javascript
• reactjs
• webpack

• can you show the project folder structure. I think the issue can be in path of files in copy webpack plugin – Mohit Tilwani Commented Sep 24, 2018 at 12:22
• @MohitTilwani yeah, added screenshot to the question – Emchenko Mikhail Commented Sep 24, 2018 at 12:27

3 Answers 3

Just spent 3 days on this. If you're on webpack 5, you probably only need writeToDisk turned on.

{
  devServer: {
   devMiddleware: { writeToDisk: true }
  }
}

Try to copy from the dist folder. For me it worked es.

new CopywebpackPlugin([{
    from: path.resolve(__dirname, 'node_modules/mettrr-component-library/dist/img'),
    to: path.resolve(__dirname, 'src/assets/img')
}]),

In this specific example it's Object.assign() causing the configuration issue.

Object.assign() copies properties from the source onto the destintation, but it does not merge arrays or objects.

So your original configuration is equivalent to writing this code:

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

const productionConfig = {
  mode: 'production',
  plugins: [
    new UglifyJsWebpackPlugin({
      sourceMap: true
    })
  ]
};

// This is the equivalent of what `Object.assign()` is doing in your original code
commonWebpackConfig.mode = productionConfig.mode;
commonWebpackConfig.plugins = productionConfig.plugins; // oops, this replaces the previous `plugins` list

module.exports = commonWebpackConfig;

With this rewritten code you can see that the plugins array is not being merged (it's being replaced) and that is why CopyWebpackPlugin isn't working, it doesn't exist in your final config.

With newer JavaScript code like ... spread syntax it's possible to do a manual merge of the config.

This allows you to merge both plugins arrays and get a working config:

const commonWebpackConfig = require('./webpack.common.js');

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  ...commonWebpackConfig,
  mode: 'production',
  plugins: [
    ...commonWebpackConfig.plugins,
    new UglifyJsWebpackPlugin({
      sourceMap: true
    }),
  ]
});