I'm running into an error on Windows 10 whenever I try to run webpack, it works fine on macOS. This is the error
[webpack-cli] HookWebpackError: Not supported
It runs fine without "CopyPlugin", but I would like to copy img folder into dist folder. Have you experienced similar issues and how did you fix them?
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CopyPlugin = require('copy-webpack-plugin');
const path = require("path");
module.exports = {
entry: ['./src/assets/scss/app.scss', './src/assets/js/app.js'],
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist',
filename: 'assets/js/app.js',
},
module: {
rules: [
{
test: /.s?css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader",
options: {
importLoaders: 2
}
},
{
loader: 'sass-loader'
}
]
}
],
},
resolve: {
extensions: [".js", ".jsx"]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin(),
`...`,
new CssMinimizerPlugin(),
],
},
plugins: [
new MiniCssExtractPlugin({
filename: './assets/css/app.css'
}),
new CopyPlugin({
patterns: [
{ from: "./src/assets/img", to: "assets/img" }
],
}),
],
devServer: {
open: true,
port: 3000,
hot: true,
static: {
directory: path.join(__dirname, './'),
}
},
};
From package.json
"devDependencies": {
"ajv": "^7.2.4",
"babel-preset-env": "^1.7.0",
"babel-register": "^6.26.0",
"clean-css": "^5.2.2",
"copy-webpack-plugin": "^10.0.0",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^2.4.5",
"sass": "^1.44.0",
"sass-loader": "^12.3.0",
"terser-webpack-plugin": "^5.2.5",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
}