老师学习webpack遇到个问题
来源：10-4 webpack基本配置串讲（上）
幻城163630
2021-06-02
老师我以前没怎么用过webpack，最近自己学习的时候遇到一个问题想请教一下您。
就是image-webpack-loader使用这个插件压缩图片的时候，老是报错，查看了网上也没有解决这个问题。
"image-webpack-loader": "^7.0.1",
想请教您一下怎么解决？
3回答
-
双越
2021-06-02
看你配置没啥问题。
看错误提示，是缺少了一个 npm 模块。
你可以删除掉 node_modules ，然后重新执行 npm install 重新安装，再试试。
如果不行，你再回复我。
00 -
幻城163630
提问者
2021-06-02
"devDependencies": {
"@babel/core": "^7.14.3",
"@babel/preset-env": "^7.14.4",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^4.0.0-alpha.0",
"css-loader": "^4.3.0",
"express": "^4.17.1",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^4.5.2",
"html-withimg-loader": "^0.1.16",
"image-webpack-loader": "^7.0.1",
"mini-css-extract-plugin": "^0.10.0",
"optimize-css-assets-webpack-plugin": "^6.0.0",
"style-loader": "^2.0.0",
"thread-loader": "^3.0.4",
"url-loader": "^4.1.1",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
//webpack.config.js
const path =require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "./dist"),
// filename: "main.js",
filename: "js/[hash].js",
},
devServer: {
open: true,
host: "0.0.0.0",
port: "8888",
useLocalIp: true,
// hot: true
},
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: "../",
// hmr: true,
}
}, "css-loader"]
},
{
test: /\.(png|jpe?g|gif|svg)$/,
use: [{
loader: "url-loader",
options: {
name: "[name]-[contenthash:10].[ext]",
outputPath: "imgs",
limit: 10 * 1024,
fallback: "file-loader",
esModule:false,
}
},
// {
// loader: "image-webpack-loader", //对图片进行压缩 （老是报错）
// options: {
// disabled: true
// }
// }
]
},
]
},
plugins: [
new OptimizeCssAssetsWebpackPlugin(),
new MiniCssExtractPlugin({
filename: "style/[name]-[hash].css"
}),
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.template.html",
title: "hello webpack",
inject: true,
hash: false,
minify: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeComments: true,
}
}),
],
}
00 -
双越
2021-06-02
你 webpack 版本多少？
另外，完整的 webpack 配置贴一下吧。
012021-06-02
相似问题