HookWebpackError: Not supported when copy-webpack-plugin is used on Windows
HookWebpackError: Not supported when copy-webpack-plugin is used on Windows
每当我尝试 运行 webpack 时,我都会 运行 在 Windows 10 上遇到错误,它在 macOS 上运行良好。
这是错误
[webpack-cli] HookWebpackError: Not supported
没有“CopyPlugin”运行没问题,但我想将 img 文件夹复制到 dist 文件夹中。您遇到过类似的问题吗?您是如何解决的?
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, './'),
}
},
};
来自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"
}
您的节点版本低于12.20,请select其中一种方案
1.Upgrade 你的 node
npm install node@12.20.0 -g
或最新的
npm install node@latest -g
在 Windows npm install node
下可能会起作用,您应该使用 Windows 安装程序 (.msi)
安装来自 https://nodejs.org/en/download/ 的最新版本
2.Reducecopy-webpack-plugin的版本
npm install copy-webpack-plugin@9 -D
每当我尝试 运行 webpack 时,我都会 运行 在 Windows 10 上遇到错误,它在 macOS 上运行良好。 这是错误
[webpack-cli] HookWebpackError: Not supported
没有“CopyPlugin”运行没问题,但我想将 img 文件夹复制到 dist 文件夹中。您遇到过类似的问题吗?您是如何解决的?
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, './'),
}
},
};
来自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"
}
您的节点版本低于12.20,请select其中一种方案
1.Upgrade 你的 node
npm install node@12.20.0 -g
或最新的
npm install node@latest -g
在 Windows npm install node
下可能会起作用,您应该使用 Windows 安装程序 (.msi)
2.Reducecopy-webpack-plugin的版本
npm install copy-webpack-plugin@9 -D