如何停止将HTML输出到已编译的app.js？

Question

I am using Webpack 2 for my portfolio website, but it's not an SPA - therefore, the intention is not to output everything into my bundled JS.

I have a few entry points for the .pug , .scss and .js files. Like so:

entry: {
  app: [
    path.resolve(__dirname, 'src/pug/app.pug'),
    path.resolve(__dirname, 'src/js/app.js'),
    path.resolve(__dirname, 'src/scss/app.scss')
  ]
},
output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'js/[name].js'
}

However, when looking at the source for the app.js , I see the rendered HTML from my .pug files.

For the .pug compiling, I'm using HtmlWebpackPlugin . I guess the easiest way for me to explain what's going on is to show you the webpack.config.babel.js file:

import webpack from 'webpack';
import path from 'path';
import autoprefixer from 'autoprefixer';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import ExtractTextPlugin from 'extract-text-webpack-plugin';
import SvgStorePlugin from 'external-svg-sprite-loader/lib/SvgStorePlugin';
import bourbon from 'bourbon';
import neat from 'bourbon-neat';

const extractScss = new ExtractTextPlugin({
  filename: 'css/[name].css',
  allChunks: true
});

const config = {
  entry: {
    app: [
      path.resolve(__dirname, 'src/pug/app.pug'),
      path.resolve(__dirname, 'src/js/app.js'),
      path.resolve(__dirname, 'src/scss/app.scss')
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'html-loader'
          },
          {
            loader: 'pug-html-loader',
            options: {
              pretty: false,
              exports: false
            }
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['es2015']
              ]
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '/images/[name].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              progressive: false,
              optipng: {
                optimizationLevel: 7,
                quality: '90',
                speed: 5
              },
              mozjpeg: {
                quality: 90
              },
              gifsicle: {
                interlaced: false
              }
            }
          }
        ]
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'external-svg-sprite-loader',
            query: {
              name: 'svg/sprite.svg',
              iconName: '[name]'
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: extractScss.extract([
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins() {
                return [
                  autoprefixer({
                    browsers: ['last 2 versions', 'Explorer >= 9', 'Android >= 4']
                  })
                ];
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              includePaths: [
                bourbon.includePaths,
                neat.includePaths
              ]
            }
          }
        ])
      }
    ]
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    stats: 'errors-only',
    open: false
  },
  plugins: [
    new SvgStorePlugin(),
    new HtmlWebpackPlugin({
      title: 'Portfolio',
      minify: {
        collapseWhitespace: true
      },
      hash: true,
      template: 'src/pug/app.pug',
      filetype: 'pug',
      filename: 'index.html'
    }),
    extractScss
  ]
}

process.traceDeprecation = false;

export default config;

I don't see any CSS in the app.js bundle and the entry point is setup just the same, so might it have something to do with the HtmlWebpackPlugin itself? Perhaps I'm not understanding how this works correctly and my configuration is wrong.

I'm new to Webpack (coming from Gulp), so please bear with me if the answers to my questions seem rather obvious.

Thanks for your help.

Update: For reference, my project structure is as follows:

And I would call an image from my .pug file in /pug/components/example.pug with a path like img(src="../images/example.jpg") . This worked prior to removing .pug as an entry point in the Webpack config as user Tatsuyuki suggested below.

Answer 1

Do not add the template as an source:

app: [
  // path.resolve(__dirname, 'src/pug/app.pug'),
  path.resolve(__dirname, 'src/js/app.js'),
  path.resolve(__dirname, 'src/scss/app.scss')
]

Instead, specify the template option for HtmlWebpackPlugin:

new HtmlWebpackPlugin({
  template: 'src/index.pug'
})

Reference