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")文件调用图像。这在删除.pug作为Webpack配置中的入口点之前有效，正如下面用户Tatsuyuki所建议的那样。

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

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

1 个答案: