CODEWITHSUNDEEP
javascriptreactjswebpackbuildconfig
Shubham Rawat
Shubham Rawat

Reputation: 21

CSS and other assets from the public folder not getting included in the build

In my public folder I have index.html, the css file and the fonts. In my source folder I have the index.js file.

This is how the folder structure looks

I have setup the webpack.config.js file like this

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

module.exports = {
  entry: path.join(__dirname, 'src', 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '',
    filename: 'bundle.js',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/transform-runtime'],
          },
        },
      },
      {
        test: /\.css$/i,
        exclude: /node_modules/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        exclude: /node_modules/,
        use: 'file-loader',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        exclude: /node_modules/,
        use: 'url-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
      publicPath: './',
    }),
  ],
};

Everything is working fine in dev, but when I create the build the files inside the public folder except the index.html are not included.

The dist folder after the build

Upvotes: 2

Views: 1426

Answers (1)

Jesús Guillén Yparrea
Jesús Guillén Yparrea

Reputation: 74

You can use the copyWebpackPlugin to move the files from /public to the new build destination (/dist).

Example:

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

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./public/*", to: "./" },
      ],
    }),
  ],
};

However, how are you using this CSS and Font files? Webpack should also help to pack your CSS correctly along with the rest of your code. I recommend you to follow the oficial documentation: Webpack.

Upvotes: 1

Related Questions