How to load assets from .pug template with html-webpack-plugin

Question

I am going through a CSS course and have got tired of typing out similar HTML structures by hand, so I hooked up pug templates and webpack-dev-server to serve it.

NOTE: my entry point is .scss file not .js

I have two issues:

a) only assets from css get loaded to build folder, but images and svg's that are referenced in src attributes in .pug template are left out.

b) browser reloading doesn't work in webpack-dev-server

My webpack.config.js:

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

module.exports = {
  entry: './sass/main.scss',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'css/style.css',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: ['pug-loader'],
      },
      {
        test: /\.(css|sass|scss)$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'sass-loader',
            },
          ]
        })
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          // {
          //   loader: 'file-loader',
          //   options: {
          //     name: 'img/[name].[ext]',
          //   }
          // },
          {
            loader: 'url-loader',
            options: {
              limit: 10000,
              publicPath: "../",
              name: 'img/[name].[ext]',
            }
          }
        ],
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './test.pug',
      filename: 'index.html',
      favicon: 'img/favicon.png',
      cache: false,
    }),
    new ExtractTextPlugin('css/style.css'),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'build'),
    compress: true,
    open: 'firefox',
    port: 8080,
    hot: true,
  },
};

Please advise.

score 2 · Answer 1 · answered May 29 '19 at 17:41

It seems like this topic is of no interest to anybody, but I've found the solution and here it is:

a) in order to trigger webpack to include your assets from .pug template into dependency graph require them:

img(
    alt="Your image"
    src=require("./img/image.jpg")
)

However you can not do the same with SVG's if you access all of them from a single sprite. Because:

svg
   use(xlink:href=require("./img/sprite.svg#icon"))

will throw and exception saying that it couldn't find a file by that name.

So what I did was requiring the whole sprite in the beginning of the template require("./img/sprite.svg") and then just specified icons in usual way:

svg
   use(xlink:href="./img/sprite.svg#icon")

b) As for the reloading issue, it wasn't that easy. I played around with MiniCssExtractPlugin options but still couldn't get it to reload. So I ended up taking ideas from this gist and this repo. Had to change the structure of my project little and create index.js as an entry point though.

How to load assets from .pug template with html-webpack-plugin

1 Answers1