simplify webpack config #1
Conversation
| @@ -4,7 +4,7 @@ | |||
| "description": "", | |||
| "main": "", | |||
| "scripts": { | |||
| "dev": "webpack serve --mode development", | |||
| "start": "webpack serve --mode development", | |||
There was a problem hiding this comment.
Defaults, for development should be used the start script name.
| @@ -0,0 +1,9 @@ | |||
| <%~ include('partials/head.html') %> | |||
There was a problem hiding this comment.
You can use any templating engine to include partials, e.g. very fast Eta (ESJ like).
| @@ -4,4 +4,7 @@ | |||
| <meta charset="UTF-8"> | |||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |||
| <title>Webpack 5 Project Starter</title> | |||
| <link href="@images/favicon.ico" rel="icon" /> | |||
| <link href="@styles/style.scss" rel="stylesheet" /> | |||
| <script src="@scripts/global.js" defer="defer"></script> | |||
There was a problem hiding this comment.
you can use the source files of styles, scripts, images etc. directly in the HTML using the relative path to HTML file or an alias specified in Webpack config
| use: [ | ||
| "css-loader", | ||
| isDev ? null : "postcss-loader", | ||
| "sass-loader", // minimizes generated CSS in production mode |
There was a problem hiding this comment.
you don't need to specify sourceMap: true options because the HTML Bundler Plugin resolves URLs in CSS/SCSS without the resolve-url-loader
| } | ||
| } | ||
| }, | ||
| minimizer: [ | ||
| new CssMinimizerPlugin(), |
There was a problem hiding this comment.
sass-loader minify generated CSS in production mode,
the CssMinimizerPlugin is not needed
| } | ||
| } | ||
| }, | ||
| minimizer: [ | ||
| new CssMinimizerPlugin(), | ||
| new TerserPlugin({ extractComments: false }) |
There was a problem hiding this comment.
The HTML Bundler Plugin avoid the extracting of comments into a file,
the TerserPlugin is not needed for that
| name: 'vendors', | ||
| chunks (chunk) { | ||
| // exclude `style` | ||
| return chunk.name !== 'style'; |
There was a problem hiding this comment.
you can specify source SCSS file directly in HTML, not in a JS file,
therefore this option is not needed
| loader: 'html-loader', | ||
| options: { | ||
| minimize: false, | ||
| preprocessor: processNestedHtml |
There was a problem hiding this comment.
Use the preprocessor option of the HtmlBundlerPlugin to specify a template engine.
This rule for .html is not needed anymore.
| module.exports = { | ||
| entry: entryPoints('./src/js'), |
There was a problem hiding this comment.
Using the HtmlBundlerPlugin, an entry point is HTML, not JS.
All HTML templates you can specify in the entry option of the plugin.
| } | ||
|
|
||
| return [ | ||
| MiniCssExtractPlugin.loader, |
There was a problem hiding this comment.
The HtmlBundlerPlugin extracts generated CSS self,
the MiniCssExtractPlugin is not needed.
| function styleLoaders() { | ||
| if (isDev) { | ||
| return [ | ||
| "style-loader", |
There was a problem hiding this comment.
The HtmlBundlerPlugin can inline extracted CSS into HTML,
no style-loader is required.
| } | ||
|
|
||
| function generateHtmlPlugins(templateDir) { | ||
| const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir), {withFileTypes: true}); |
There was a problem hiding this comment.
The HtmlBundlerPlugin can automatically handle HTML templates from the entry path option.
| "babel-loader": "^8.2.5", | ||
| "css-loader": "^6.7.1", | ||
| "css-minimizer-webpack-plugin": "^3.4.1", | ||
| "filemanager-webpack-plugin": "^7.0.0-beta.0", |
There was a problem hiding this comment.
remove unused filemanager-webpack-plugin
| const path = require('path'); | ||
| const webpack = require('webpack'); | ||
| const HtmlWebpackPlugin = require('html-webpack-plugin'); | ||
| const HtmlBeautifyPlugin = require('@nurminen/html-beautify-webpack-plugin'); |
There was a problem hiding this comment.
In production mode use the minfy of HTML (good practice), not beautify to avoid some issues with spaces in HTML.
Hello @petrushin-ai
I'm the author of the
webpack-remove-empty-scriptswhich is used in your project.This plugin is the
crutch🩼 for the mini-css-extract-plugin issue.I want to demonstrate you my the other plugin, html-bundler-webpack-plugin, which simplifies Webpack config.
Using the
html-bundler-webpack-plugin:<script>and<link>tags.hrefsrcsrcsetetc.sourceMap, thesourceMap: trueloader option is not required.out of the box.Just one
html-bundler-webpack-pluginreplaces the functionality of many plugins and loaders:extractComments: false)The plugin resolves references in the HTML template and replaces them with output filenames in the generated HTML.
I have changed the script from
npm run devto **default **npm start. You can do it revert.