Skip to content

Instantly share code, notes, and snippets.

@levipadre
Last active March 8, 2020 09:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save levipadre/e3a87682ed2cf7db98f089cba24d75f3 to your computer and use it in GitHub Desktop.
Save levipadre/e3a87682ed2cf7db98f089cba24d75f3 to your computer and use it in GitHub Desktop.
/**
* Generate HTML files from Nunjucks
*/
const mix = require('laravel-mix'),
path = require('path'),
fs = require('fs'),
paths = require('./paths'),
HTMLWebpackPlugin = require('html-webpack-plugin');
var templateParameters = require('./data.json');
let env = 'development';
if (mix.inProduction()) {
env = 'production'
}
const directories = []
function walkDir(dir, parent = '') {
var files = fs.readdirSync(dir);
for(var x in files){
var next = path.join(dir,files[x]);
if(fs.lstatSync(next).isDirectory()==true){
walkDir(next, parent+'/'+files[x]);
} else {
directories.push([path.parse(files[x]).name, (parent+'/').slice(1)]);
}
}
return directories
}
const pages = {
generatePages: function generatePages(pagesPath) {
return walkDir(pagesPath).map(
name =>
new HTMLWebpackPlugin({
template: `${pagesPath}/${name[1]}${name[0]}.njk`,
filename: paths.pages.base + `/${name[1]}${name[0]}.html`,
templateParameters: templateParameters
})
);
}
};
module.exports = pages;
{
"base": {
"dir": "./pages",
"node": "node_modules",
"start": "index.html"
},
"src": {
"base": "./src",
"scss": "./src/scss",
"templates": "./src/templates",
"js": "./src/js",
"fonts": "./src/fonts",
"images": "./src/images"
},
"pages": {
"base": "./pages",
"assets": "./pages/assets",
"layouts": "./pages/layouts",
"block": "./pages/blocks",
"js": "./pages/assets/js",
"css": "./pages/assets/css",
"fonts": "./pages/assets/fonts",
"images": "./pages/assets/images",
"vendor": "./pages/assets/vendor"
},
"dist": {
"base": "./dist",
"css": "./dist/assets/css",
"js": "./dist/assets/js",
"pages": "./dist/pages",
"layouts": "./dist/pages/layouts",
"blocks": "./dist/pages/blocks",
"vendor": "./dist/assets/vendor",
"fonts": "./dist/assets/fonts",
"images": "./dist/assets/images"
}
}
const paths = require('./paths'),
mix = require('laravel-mix'),
RemoveWebpackPlugin = require('remove-webpack-plugin'),
nunjucksConfig = require('./nunjucks.config'),
path = require('path'),
WebpackOnBuildPlugin = require('on-build-webpack');
mix.webpackConfig({
module: {
rules: [
{
test: /\.njk$/,
use: [
{
loader: 'simple-nunjucks-loader'
}
]
}
]
},
plugins: [
...nunjucksConfig.generatePages(path.resolve(__dirname, paths.src.templates)),
]
})
@levipadre
Copy link
Author

Do you think is that also a html-webpack-plugin issue?
When I create a new .njk file under templates, nothing happens, I need to restart the server to make generate the .html file.
If I have the file already and I rename it, it crashes instead of renaming the html file and I got this error:

Html Webpack Plugin:

Error: Child compilation failed:
Module build failed (from ./node_modules/simple-nunjucks-loader/lib/loader.js):
Error: ENOENT: no such file or directory, open '/Users/leventekosa/Projects/square/html/src/templates/news.njk':
Error: ENOENT: no such file or directory, open '/Users/leventekosa/Projects/square/html/src/templates/news.njk'

- compiler.js:79 childCompiler.runAsChild
  [html]/[html-webpack-plugin]/lib/compiler.js:79:16

- Compiler.js:343 compile
  [html]/[webpack]/lib/Compiler.js:343:11

- Compiler.js:681 hooks.afterCompile.callAsync.err
  [html]/[webpack]/lib/Compiler.js:681:15

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compiler.js:678 compilation.seal.err
  [html]/[webpack]/lib/Compiler.js:678:31

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1423 hooks.optimizeAssets.callAsync.err
  [html]/[webpack]/lib/Compilation.js:1423:35

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
  [html]/[webpack]/lib/Compilation.js:1414:32

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1409 hooks.additionalAssets.callAsync.err
  [html]/[webpack]/lib/Compilation.js:1409:36


- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1405 hooks.optimizeTree.callAsync.err
  [html]/[webpack]/lib/Compilation.js:1405:32

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1342 Compilation.seal
  [html]/[webpack]/lib/Compilation.js:1342:27

- Compiler.js:675 compilation.finish.err
  [html]/[webpack]/lib/Compiler.js:675:18

- Compilation.js:1261 hooks.finishModules.callAsync.err
  [html]/[webpack]/lib/Compilation.js:1261:4

- Hook.js:154 AsyncSeriesHook.lazyCompileHook
  [html]/[tapable]/lib/Hook.js:154:20

- Compilation.js:1253 Compilation.finish
  [html]/[webpack]/lib/Compilation.js:1253:28

- Compiler.js:672 hooks.make.callAsync.err
  [html]/[webpack]/lib/Compiler.js:672:17

- Compilation.js:1185 _addModuleChain
  [html]/[webpack]/lib/Compilation.js:1185:12

- Compilation.js:1097 processModuleDependencies.err
  [html]/[webpack]/lib/Compilation.js:1097:9

- next_tick.js:61 process._tickCallback
  internal/process/next_tick.js:61:11

And finally when I delete a file, also crashes.

@ogonkov
Copy link

ogonkov commented Mar 8, 2020

I think it's relate to how webpack config works. Webpack trying to use obsolete config.

I'm afraid webpack doesn't reload config, when entry point files changes. There definitely should be some solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment