title: How to bundle Nunjucks files via Webpack
body: <p>I have a complete site that I want to design a build tool for it.In fact, I chose Webpack for doing that. The project structure is like this:</p>
  
  <p><a href="https://i.stack.imgur.com/XC50V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XC50V.png" alt="enter image description here"></a></p>
  
  <p>I have nunjucks, html, css, sass and js files. I must bundle them via webpack. My webpack config file is here:</p>
  
  <pre><code>var HtmlWebpackPlugin = require('html-webpack-plugin')
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  const path = require('path')
  const CopyPlugin = require('copy-webpack-plugin')
  const NunjucksWebpackPlugin = require('nunjucks-webpack-plugin')
  
  module.exports = {
      entry: ['./src/index.js'],
      output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist')
          },
      devtool: 'inline-source-map',
      devServer: {
          contentBase: './dist',
          writeToDisk: true
      },
     plugins: [
         new CopyPlugin([
             { from: 'public/images', to: 'images' },
             { from: 'public/fonts', to: 'fonts' },
             { from: 'src/pages/about', to: '.' }
           ]),
           new CleanWebpackPlugin(),
         // new HtmlWebpackPlugin()
          new HtmlWebpackPlugin({
             title: 'Asset Management' //title of file.html
           })
         ],
       module: {
          rules: [
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader']
              },
              {
                 test: /\.s[ac]ss$/i,
                 use: [
                  // Creates `style` nodes from JS strings
                  'style-loader',
                  // Translates CSS into CommonJS
                  'css-loader',
                  // Compiles Sass to CSS
                  'sass-loader'
              ]
            },
            {
              test: /\.(png|svg|jpg|gif)$/,
              use: ['file-loader']
            },
            {
              test: /\.(woff|woff2|eot|ttf|otf)$/,
              use: ['file-loader']
            },
            {
              test: /\.(njk|nunjucks)$/,
              loader: 'nunjucks-loader'
            },
           {
               // to auto refresh index.html and other html
               test: /\.html$/,
               loader: 'raw-loader',
               exclude: /node_modules/
           },
          {
              test: /\.html$/,
              use: [
                  {
                      loader: 'html-loader',
                      options: {
                          interpolate: true
                      }
                  }
              ]
          }
       ]
     }
    }
  </code></pre>
  
  <p>The "index.js" file also is like this:</p>
  
  <pre><code>  import _ from 'lodash'
    import './pages/about/about_moon.scss'
    import './pages/about/about_moon.html'
    var tpl = require('./pages/home/index_moon.njk')
    var html = tpl.render({ message: 'Foo that!' })
    function component() {
    return element
      }
     document.body.appendChild(component())
  </code></pre>
  
  <p>I configured the "package.json" file and defined scripts to run webpack:</p>
  
  <pre><code>    "start": "webpack-dev-server --open",
      "build": "webpack"
  </code></pre>
  
  <p>The problem is when I run <code>npm run build</code>, the dist folder was made and it had a html file but there is nothing to show. I have already had some html files and wanted to bundle all of them to "bundle.js", but I have not known how. Would you please tell me how I can bundle this project? </p>
  
  <p>Thank you in advance.</p>