如何阻止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文件/pug/components/example.pug與像img(src="../images/example.jpg")路徑調用圖片。在用戶Tatsuyuki在下面建議的Webpack配置中刪除.pug作爲入口點之前，此工作正常。

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