javascript - push assets folder to public directory with webpack

Question

I'm using Webpack for the first time. Currently everything is being served up quite nicely. My problem is when I'm trying to build a dist folder. Currently I get my index.html and bundle.js files but I can't figure out how to push my assets to the dist folder.

I have file-loader loaded up but it doesn't actually seem to do what I want it to and none of the google searches I've run are telling me what I need to know. Below is my config file. Can someone lead a horse to water? Also once I get it running do I need to import all of images to my React components?

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /.(js)$/, use: 'babel-loader' },
      { test: /.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]},
      { test: /.(png|jpe?g|svg|)$/, use: { loader: 'file-loader', options: }}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

Answer 1

Looks like I just needed to use Copy-Webpack-Plugin.

To copy all the assets from 'app/assets/' to 'dist/assets/' I just needed to do:

  plugins: [
    new CopyWebpackPlugin([
      { from: 'app/assets', to: 'assets' }
    ])
  ]