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

Question

我将 Webpack 2 用于我的投资组合网站，但它不是 SPA - 因此，目的不是将所有内容输出到我捆绑的 JS 中。

我有几个 .pug、.scss 和 .js 文件的入口点。像这样：

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

但是，在查看 app.js 的源代码时，我会从我的 .pug 文件中看到呈现的 HTML。

对于.pug 编译，我使用的是HtmlWebpackPlugin。我想我解释发生了什么的最简单方法是向您展示webpack.config.babel.js 文件：

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;

我在app.js 捆绑包中看不到任何CSS，并且入口点设置相同，所以它可能与HtmlWebpackPlugin 本身有关吗？也许我不明白这是如何正常工作的，我的配置是错误的。

我是 Webpack 的新手（来自 Gulp），所以如果我的问题的答案似乎很明显，请多多包涵。

感谢您的帮助。

更新： 供参考，我的项目结构如下：

我会从/pug/components/example.pug 中的.pug 文件中调用一个图像，其路径类似于img(src="../images/example.jpg")。正如用户 Tatsuyuki 在下面建议的那样，这在删除 .pug 作为 Webpack 配置中的入口点之前有效。

Answer 1

不要将模板添加为源：

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

改为指定 HtmlWebpackPlugin 的模板选项：

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

Reference