chore: optimise webpack config for using html-bundler-webpack-plugin #164
Conversation
|
|
||
| module.exports = { | ||
| context: config.src, | ||
| entry: { |
There was a problem hiding this comment.
the source JavaScript files can be defined directly in EJS template using <script src="..."> tag
| output: { | ||
| filename: 'js/[name].js', |
There was a problem hiding this comment.
the filename option should be defined in the HtmlBundlerPlugin options
| path: config.build, | ||
| clean: false, | ||
| assetModuleFilename: '[path][name][ext]', | ||
| assetModuleFilename: 'assets/[name].[hash:8][ext]', |
There was a problem hiding this comment.
generates unique image filenames, e.g. assets/icon.1234abcd.svg
| publicPath: '/toolz/' | ||
| }, | ||
| plugins: [ | ||
| new CopyWebpackPlugin({ |
There was a problem hiding this comment.
the HtmlBundlerPlugin resolves all source assets (images, fonts, etc) used in templates and saves into output directory.
So you don't need to copy the source images.
| }), | ||
| ...pages.map( | ||
| (page) => | ||
| new HTMLWebpackPlugin({ |
There was a problem hiding this comment.
the HtmlBundlerPlugin is best modern alternative to HTMLWebpackPlugin
| ], | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.(png|svg|jpg|jpeg|gif)$/i, | ||
| type: 'asset/resource' | ||
| }, | ||
| { | ||
| test: /\.ejs$/i, | ||
| use: ['html-loader', 'template-ejs-loader'] |
There was a problem hiding this comment.
the HtmlBundlerPlugin replaces the functionality of both the html-loader and template-ejs-loader
| @@ -70,7 +69,6 @@ module.exports = { | |||
| { | |||
| test: /\.(sa|sc|c)ss$/, | |||
| use: [ | |||
| MiniCssExtractPlugin.loader, // Extract CSS from commonjs | |||
There was a problem hiding this comment.
the HtmlBundlerPlugin replaces the functionality of MiniCssExtractPlugin
| "html-loader": "^4.2.0", | ||
| "html-webpack-plugin": "^5.5.3", | ||
| "mini-css-extract-plugin": "^2.7.6", | ||
| "node-sass": "^9.0.0", |
| <%- include('partials/head.ejs', | ||
| { | ||
| page: '404', | ||
| title:'Toolz by d3ward - 404', | ||
| description:'Page not found', | ||
| url: 'd3ward.github.io/toolz/', | ||
| preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png', | ||
| preview_thumbnail:'./assets/preview_toolz.png', |
There was a problem hiding this comment.
you can use the relative path to the source image file, so that it will be coped to output directory automatically
| keywords:'toolz,web tools,tools,browser testing,font testing,viewport testing,adblock testing, ad blocker testing,performance,toolkit,web design,open source' | ||
| }) %> | ||
| <link href="./sass/404.sass" rel="stylesheet" /> | ||
| <script src="./js/404.js" defer="defer"></script> |
There was a problem hiding this comment.
You can define source files of script and styles directly in EJS template
| <body class="_overflowhidden"> | ||
|
|
||
| <%- include('partials/adblock/results.ejs') %> | ||
| <% const adblock_compatibility = require('./data/adblock_compatibility.json') %> |
There was a problem hiding this comment.
pass the external data from adblock_compatibility.json into EJS template via data option of the HtmlBundlerPlugin
| @@ -1,4 +1,3 @@ | |||
| import '../sass/404.sass' | |||
There was a problem hiding this comment.
the source SASS files can be defined directly in EJS template using <link href="..." rel="stylesheet"> tag
| <!-- Google / Search Engine Tags --> | ||
| <meta itemprop="name" content="<%= title %>"> | ||
| <meta itemprop="description" content="<%= description %>"> | ||
| <meta itemprop="image" content="https://d3ward.github.io/toolz/assets/preview_toolz.png"> |
There was a problem hiding this comment.
use the source file of the image, the plugin resolves the image and copy into output directory
| <meta name="twitter:title" content="<%= title %>"> | ||
| <meta name="twitter:description" content="<%= description %>"> | ||
| <meta name="twitter:image" content="<%= preview_thumbnail %>"> | ||
|
|
There was a problem hiding this comment.
fix formatting: mixed tabs and spaces
Hello @d3ward,
You have very useful tools, thanks.
But in your project is used outdated Webpack loader
template-ejs-loaderwhich is doesn't maintained over 2 years.I'm the author of the html-bundler-webpack-plugin and I want help you to optimise and simplify the Webpack configuration.
Using the Bundler Plugin, an entry point is a template.
All your source asset files (scripts, styles, images, etc.) can be specified directly in the HTML template.
The plugin resolves source files of assets in templates and replaces them with correct output URLs in the generated HTML.
The resolved assets will be processed via Webpack plugins/loaders and placed into the output directory.
The Bundler Plugin replaces the functionality of many plugins and loaders such as:
How to test
You can see how it works in the forked branch: