Following is my webpack config file and package.json. When I run webpack -w I am getting the following error (pasted in last). I think it has something to do with path string. Thank you in advance.
webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack-plugin').default;
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const fs = require("fs");
const path = require("path");
const PATHS = {
src: path.join(__dirname, './src'),
dist: path.join(__dirname, './dist')
}
const PAGES_PUG = `${PATHS.src}/pug/`;
const PAGES = fs.readdirSync(PAGES_PUG).filter(filename => filename.endsWith('.pug'));
module.exports = {
entry: {
app: [`${PATHS.src}/scripts/app.js`, `${PATHS.src}/scss/styles.scss`]
},
output:{
path: `${PATHS.dist}`,
filename: './scripts/[name].[hash].min.js'
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
test: /node_modules/,
chunks: "all",
enforce: true,
}
}
}
},
devtool: 'source-map',
devServer: {
overlay: true
},
module: {
rules: [
{
test: /\.pug$/,
loader: 'pug-loader',
exclude: '/node_modules'
},
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {sourceMap: true}
},
{
loader: "postcss-loader",
options: {sourceMap: true}
}
],
exclude: '/node_modules'
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: "css-loader",
options: {sourceMap: true}
},
{
loader: "postcss-loader",
options: {sourceMap: true}
},
{
loader: "resolve-url-loader"
},
{
loader: "sass-loader",
options: {sourceMap: true}
},
],
exclude: '/node_modules'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: '/node_modules'
},
{
test: /\.ts$/,
loader: ['babel-loader', 'ts-loader'],
exclude: '/node_modules'
},
{
test: /.(jpg|jpeg|png|svg)$/,
use: ['url-loader']
}
]
},
plugins: [
new CleanWebpackPlugin(),
...PAGES.map(page => new HtmlWebpackPlugin({
template: `${PAGES_PUG}/${page}`,
filename: `./${page.replace(/\.pug/, '.html')}`
})),
new MiniCssExtractPlugin({
template: `${PATHS.src}/styles/styles.scss`,
filename: `styles/styles.[hash].min.css`
}),
new CopyPlugin({
patterns: [
{ from: './src/assets/favicon', to: 'assets/favicon', noErrorOnMissing: true },
{ from: './src/assets/img', to: 'assets/img', noErrorOnMissing: true}
]
}),
new ImageminPlugin({
disable: process.env.NODE_ENV !== 'production', // Disable during development
test: /\.(jpe?g|png|gif|svg)$/i }),
new SVGSpritemapPlugin('./src/assets/icons/icons-colored/**/*.svg', {
output: {
filename: 'assets/sprites/sprites-colored/sprites.svg',
svg4everybody: true,
svgo: {
plugins: [
{ inlineStyles: { onlyMatchedOnce: false } },
{ minifyStyles: true }
]
}
},
sprite: {
prefix: false
}
}),
new SVGSpritemapPlugin('./src/assets/icons/icons-solid/**/*.svg', {
output: {
filename: 'assets/sprites/sprites-solid/sprites.svg',
svg4everybody: {
polyfill: true
},
svgo: {
plugins: [
{removeAttrs: {attrs: '(stroke|fill|style)'}}
]
}
},
sprite: {
prefix: false
}
})
],
};
package.json
{
"name": "webpack-config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"@babel/cli": "^7.12.1",
"@babel/core": "^7.12.3",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"autoprefixer": "^10.0.2",
"babel-loader": "^8.2.1",
"cheerio-webpack-plugin": "^0.1.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.1",
"css-loader": "^5.0.1",
"cssnano": "^4.1.10",
"html-webpack-plugin": "^4.5.0",
"imagemin-webpack-plugin": "^2.4.2",
"mini-css-extract-plugin": "^1.3.1",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.1.7",
"postcss-loader": "^4.0.4",
"pug": "^3.0.0",
"pug-loader": "^2.4.0",
"resolve-url-loader": "^3.1.2",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"svg-spritemap-webpack-plugin": "^3.7.1",
"terser-webpack-plugin": "^5.0.3",
"ts-loader": "^8.0.11",
"typescript": "^4.0.5",
"url-loader": "^4.1.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"type-check": "tsc --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"dev": "webpack --mode development",
"start": "webpack -w",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
error
webpack -w
[webpack-cli] ValidationError: Invalid options object. Mini CSS Extract Plugin has been initialized using an options object that does not match the API schema.
- options has an unknown property 'template'. These properties are valid:
object { filename?, chunkFilename?, ignoreOrder?, insert?, attributes?, linkType? }
at validate (D:\webdev\scripts\github\webpack-config-master\node_modules\mini-css-extract-plugin\node_modules\schema-utils\dist\validate.js:104:11)
at new MiniCssExtractPlugin (D:\webdev\scripts\github\webpack-config-master\node_modules\mini-css-extract-plugin\dist\index.js:47:31)
at Object.<anonymous> (D:\webdev\scripts\github\webpack-config-master\webpack.config.js:117:5)
at Module._compile (D:\webdev\scripts\github\webpack-config-master\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (D:\webdev\scripts\github\webpack-config-master\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at requireConfig (D:\webdev\scripts\github\webpack-config-master\node_modules\webpack-cli\lib\groups\resolveConfig.js:73:18) {
errors: [
{
keyword: 'additionalProperties',
dataPath: '',
schemaPath: '#/additionalProperties',
params: [Object],
message: 'should NOT have additional properties',
schema: false,
parentSchema: [Object],
data: [Object]
}
],
schema: {
type: 'object',
additionalProperties: false,
properties: {
filename: [Object],
chunkFilename: [Object],
ignoreOrder: [Object],
insert: [Object],
attributes: [Object],
linkType: [Object]
}
},
headerName: 'Mini CSS Extract Plugin',
baseDataPath: 'options',
postFormatter: null
}
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! webpack-config@1.0.0 start: `webpack -w`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the webpack-config@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
