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

Try `PublicPath:/dist` in module.exports https://stackoverflow.com/questions/39277673/webpack-dist-folder-not-getting-created-in-project-folder — yoursweater, Aug 09 '17 at 01:03

score 42 · Accepted Answer · answered Aug 09 '17 at 18:53

42

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

answered Aug 09 '17 at 18:53

Alex Marple

2,908
4
17
24

score 3 · Answer 2 · answered Oct 10 '22 at 06:51

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

push assets folder to public directory with webpack

2 Answers2

Linked