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'
    })
  ]
};

Voltmeter

Try PublicPath:/dist in module.exports #39278173 – Brachium

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' }
    ])
  ]

Voltmeter

Answer 2

First install copy webpack plugin:

npm i copy-webpack-plugin

Then in the webpack.config.json:

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

module.exports = {
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "src/public", to: "" } //to the dist root directory
            ],
        }),
    ],
};

Cotidal