custom folder for statically built html files

[rbalicki2]

I have a setup where I want all of the html files in an html folder, and all of the assets (also built with webpack) in an assets folder. Is there any way to specify a custom output folder? This is not required, but it would clean up subsequent steps of the build process.

Basically, html files are copied into a current s3 folder, while all of the assets are accessed via $DIFFERENT_S3_URL/$HASH/assetName. aws s3 sync allows me to sync only html files, so what I'm hoping for isn't required, but it would clean things up. Thanks!

[rbalicki2]

(For example, file-loader lets you specify a path via the name=... query param)

[ghost]

Hi ! I think I may have the solution. This is not really specific to this plugin, but I had the same need as you, and I managed to organize my webpack configuration to build a clean output directory.

To do that, I'm separating the webpack configuration in multiple objects (One object per output). See this example from webpack.

My complete webpack.config.js file looks like this :

const StaticSiteGeneratorPlugin = require('static-site-generator-webpack-plugin')
const SuppressChunksPlugin = require('suppress-chunks-webpack-plugin').default
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')

const path = require('path')

// Common configuration
var config = {
    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
}


// Images configuration
var imgConfig = Object.assign({}, config, {
  module: {
    rules: [
      {
        use: ['babel-loader']
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
        {from:'src/img',to:'assets/img'}
    ])
  ],
})


// Sass & Fonts configuration
var sassConfig = Object.assign({}, config, {
    name: "sass",
    entry: {
        red: [
          './src/sass/themes/red.sass'
        ],
        dark: [
          './src/sass/themes/dark.sass'
        ],
        light: [
          './src/sass/themes/light.sass'
        ],
      },
    output: {
       path: path.resolve(__dirname, 'dist/assets/css'),
    },
    module: {
      rules: [
        {
          test: /\.sass$/,
          use: [
            {
                loader: 'file-loader',
                options: {
                    name: '[name].css',
                }
            },
            'extract-loader',
            'css-loader',
            'resolve-url-loader',
            'postcss-loader',
            'sass-loader'
          ],
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg)$/,
          exclude: ['/node_modules/'],
          use: [
              {
                  loader: 'file-loader',
                  options: {
                      name: 'fonts/[name].[ext]'
                  }
              },
          ],
        },
      ]
    },
    plugins: [
      new SuppressChunksPlugin(['red', 'dark', 'light'])
    ]
})


// JS Configuration
var jsConfig = Object.assign({}, config,{
    name: "js",
    entry: {
        scripts: [
            './src/js/scripts.js'
        ],
    },
    output: {
      path: path.resolve(__dirname, 'dist/assets/js'),
      filename: "scripts.js"
    },
    module: {
      rules: [
        {
          test: /\.js/,
          exclude: [/node_modules/],
          use: ['babel-loader']
        },
      ]
    }
})


//HTML Configuration
var htmlConfig = Object.assign({}, config, {

  entry: {
    main: path.resolve(__dirname, 'src/index.js'),
  },

  output: {
    filename: 'webpack_build.js',
    path: path.resolve(__dirname, 'dist/html'),
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        use: ['babel-loader']
      }
    ]
  },

  plugins: [
    new StaticSiteGeneratorPlugin({
      entry: 'main',
      crawl: true,
      globals: {
        window: {}
      }
    }),
    new webpack.DefinePlugin({
      BUILDDATE: 'JSON.stringify(new Date())'
    })
  ]
})

// Export all configurations
module.exports = [
    htmlConfig,
    sassConfig,
    jsConfig,
    imgConfig,
]

Sorry for the long snippet, but I think it show some interesting things. I'm doing multiple tasks like compiling sass, moving assets, generating the html files and generating the js assets.
I'm also using the SuppressChunksPlugin to remove all the useless chunks.

With this configuration, I'm able to generate a clean and organized output directory.