ivarprudnikov / webpack-static-html-pages

Webpack template/example with multiple static html pages

Static html pages with Webpack 5

> PREVIEW LIVE

This is a forkable example of a static website (plain html/css/javascript) assembled with webpack. You could also use this repository as a template when creating a new one.

Article explaining how this example was created: https://www.ivarprudnikov.com/static-website-multiple-html-pages-using-webpack-plus-github-example/

• Webpack4 implementation can still be found on a separate branch webpack4

Prerequisites

• Install node (comes with npm). Suggested version expressed in .nvmrc file.

Development

• npm i - install dependencies
• npm start - start development server
• npm test - run minimal tests (eg: lint javascript files)
• npm run cy:run - run Cypress functional/browser/e2e tests. Works only when running website locally (npm start or npm run preview)

Production

• npm run build to prepare html, css, js files in dist/ directory
• npm run preview - run build and serve production files locally

Production build is built on Travis CI and saved in gh-pages branch which in turn is hosted through Github pages https://ivarprudnikov.github.io/webpack-static-html-pages/

Credits

• @lifenautjoe and his webpack-starter-basic

webpack-static-html-pages's Issues

Multiple assets emit to the same filename.

I am following your webpack.config rules and structure. I have different names for the html pages and javascript:

Here's my webpack.config

const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const buildPath = path.resolve(__dirname, 'dist');

module.exports = {
  entry: {
    index: './app/src/producer/index.js',
    process: './app/src/process/process.js',
    results: './app/src/results/results.js'
  },
  mode: 'production',
  output: {
    filename: '[name].[hash:20].js',
    path: buildPath
    
  },

  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [buildPath, '!static-files*']
    }),

    new HtmlWebpackPlugin({ 
        filename: 'index.html',
        template: 'app/src/producer/index.html',
        inject: 'body',
        chunks: ['index']
      }
    ),

    new HtmlWebpackPlugin({ 
      filename: 'process.html',
      template: 'app/src/process/process.html',
      inject: 'body',
      chunks: ['process']
    }
  ),

  new HtmlWebpackPlugin({ 
    filename: 'results.html',
    template: 'app/src/results/results.html',
    inject: 'body',
    chunks: ['results']
  }
),
  ],
  devtool: 'source-map',
  module: {
    rules: [
      { test: /\.s?css$/, 
        use: [ 'style-loader', 'css-loader', 'sass-loader' ] 
    },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['env'],
          plugins: ['transform-react-jsx', 'transform-object-rest-spread', 'transform-runtime']
        }
      },

      {
        test: /\.(png|jp(e*)g|svg)$/,  
        use: [{
            loader: 'file-loader',
            options: { 
                name: '[name].[ext]',
                outputPath: 'images/',
                publicPath: 'images/'
                } 
            }]
        }, 

        {
          test: /\.html$/,
          use: ['html-loader']
        },

        {
          test: /\.html$/,  
          use: [{
              loader: 'file-loader',
              options: { 
                  name: '[name].[ext]'
                  } 
              },
            
            ],
            exclude: path.resolve(__dirname, 'app/src/index.html')
          },       
        
          { 
            test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
            loader: 'url-loader?limit=1000000'
           } 
        ]
    },

    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: true
        })
      ]
    },
}

Here's my project structure:

app
---src
--process
---process.html
---process.js
--producer
---index.html
---index.js

I am not quite sure or understand where I have been wrong. Please excuse my brevity as I am new to webpack development.

How would you hash CSS Class names?

Since HTML is not going through JS and we aren't explicitly importing class names in HTML files?

css not inlined in head

Forgive me if I'm missing something. Your article has been super useful in getting me started.

But when I clone your project and run npm run build, the css is not getting inlined into the head. In your article you say

Now after npm start you’ll see css inlined in the head element of html file. To add more styles just require them in Javascript file.

But I'm not getting that behavior. Instead it is generating a css file with hash and linking it.

dev mode - files not written to disk

In dev mode doesn't create the .html files

"npm run preview" fails in Windows 10 environment

Hiya,

Just a note, had me scratching my head for a minute, the bash style substitution for the port definition in the npm start:dist script doesn't evaluate correctly in a Windows environment, resulting in an EACCESS error when the port spec if incorrectly evaluated.

Cheers,

Shaun

Load image inside a partial

In my question it was shown how to load an image inside a main file (eg.: page-index, page-contact, etc) using the direct require of the image or template mode of an HTML file with the image tag.

However, on my site I used a partial (nav.html) to insert an image, and using <%= require('../../partials/nav.html?raw') %> didn't work (dont load the image), but by changing to <%= require('../../partials/nav.html?template').default %> the image loaded correctly along with the code.

Is this way correct? I ask this because this repository is helping me a lot to make a website, but this is the first time I use Webpack and I have no idea how the html-loader works.

And when I run npm run build, the images inside index.html are not in an img folder, but directly in the root.

Using images

I didn't quite understand the use of images.

I'm putting the images inside the ./src/img folder. Every time I need to use an image on a page, do I need to do a <%= require('../img/image-name.svg') %> ?

And how do I put images inside the partials? Even with require I couldn't make it work.