webpack学习之路-----使用 pug (jade) 作为 HTML 的模板

 

index.pug


doctype html
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) bar(1 + 5)
  body
    h1 Pug - node template engine
    #root
    #container.col
      if youAreUsingPug
        p You are amazing
      else
        p Get on it!
      p.
        Pug is a terse and simple templating language with a
        strong focus on performance and powerful features.

 

app.css



body {
    background: pink;
  }

 

配置文件


var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: {
    "app.bundle": './src/index.js',
    // 这行是新增的。
    "contact": './src/contact.js'
  },
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      template: './src/index.pug',
      filename: 'index.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
      // 这行是新增的。
      excludeChunks: ['contact']
    }),
    new HtmlWebpackPlugin({
      template: './src/contact.html',
      filename: 'contact.html',
      minify: {
        collapseWhitespace: true,
      },
      hash: true,
      // 这行是新增的。
      chunks: ['contact']
    })
  ],
  module: {
    rules: [
      {
        test: /\.pug$/, 
        loader: ['raw-loader', 'pug-html-loader']
      },
       {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
};