If we run webpack now, we will see that all our html files are generated (index, services, products and contact). We join our htmlPlugin array to the endĪnd at the end there you should notice that we simply concatenate our htmlPlugins array to our ugins array. Include css/style loaders to process our css files Include pug-loader to process the pug files Path: path.resolve(_dirname, 'dist'), // Output folder Call our function on our views directory.Ĭonst htmlPlugins = generateHtmlPlugins( './src/template/views') 1įunction generateHtmlPlugins ( templateDir) `)
To accomplish our task we will write a simple function to read the files from our views directory and generate an array of HTMLWebpackPlugins. The important takeaway here, is that we want all the template files that correspond to our desired html files in a folder on their own. The only difference will be the templates directory.Īs you can see the main difference is that our templates are all in a views subfolder and everything else is in includes. The project setup will be almost identical to the Using HTMLWebpackPlugin and Pug post. We can achieve this in an easier to maintain way, and without adding much complexity to our build setup. So is there a more elegant way to achieve this? This works well when you only have a couple of files to generate, but is a bit awkward to maintain as you add more files. We need to set our desired filename for other html files though. Index is the default name so we don't need to set it for our index template Use HTMLWebpackPLugin with template set to our pug index template. New ExtractTextPlugin( 'css/styles.css'), Extract our css to a separate css file To generate multiple HTML files, you have to add multiple HTMLWepbackPlugins to your webpack plugins. This will be based off the same project configuration as Using HTMLWebpackPlugin and Pug, and will be using pug.js - but it should work the same for however you are generating your HTML files. It is possible to generate multiple HTML files with HTMLWebpackPlugin and it is relatively simple. Using HTMLWebpackPlugin is covered in another post. HTMLWebpackPlugin is a simple way to generate the html files for your web app.
0 kommentar(er)
