作者:jiajian123 | 来源:互联网 | 2023-09-15 18:04
我正在尝试使用image-webpack-loader
将jpg文件加载到我的项目中,但是出现错误。我不知道怎么了。
这是我的Webpack配置
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",filename: "./index.html"
});
module.exports = {
output: {
path: path.resolve(__dirname,'dist'),filename: 'index_bundle.js'
},module: {
rules: [
{
test: /\.js$/,exclude: /node_modules/,use: {
loader: "babel-loader"
}
},{
test: /\.css$/,use: [
{
loader: 'style-loader'
},{
loader: 'css-loader',options: {
modules: true,importLoaders: 1,localIdentName: "[name]_[local]_[hash:base64]",sourceMap: true,minimize: true
}
}
]
},{
test: /\.(gif|png|jpe?g|svg)$/i,use: [
'file-loader',{
loader: 'image-webpack-loader',options: {
mozjpeg: {
progressive: true,quality: 65
},// optipng.enabled: false will disable optipng
optipng: {
enabled: false,},pngquant: {
quality: '65-90',speed: 4
},gifsicle: {
interlaced: false,// the webp option will enable WEBP
webp: {
quality: 75
}
}
},],}
]
},plugins: [htmlPlugin]
};
我有一个要导入到trial.jpg
的图像文件data.js
import test from "./trial.jpg"
这两个文件现在都位于同一文件夹中
这是我得到的错误
> webpack-dev-server --mode development --open
i 「wds」: Project is running at http://localhost:8080/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from c:\workplace\newtrial
i 「wdm」: wait until bundle finished: /
× 「wdm」: Hash: 615e07cebfea73d02177
Version: webpack 4.41.2
Time: 3117ms
Built at: 12/24/2019 4:15:57 AM
Asset Size Chunks Chunk Names
./index.html 793 bytes [emitted]
index_bundle.js 1.43 MiB main [emitted] main
Entrypoint main = index_bundle.js
[0] multi (webpack)-dev-server/client?http://localhost:8080 ./src 40 bytes {main} [built]
[./data.js] 1.72 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.89 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
[./src/index.js] 2.3 KiB {main} [built]
+ 31 hidden modules
ERROR in ./trial.jpg
Module build failed (from ./node_modules/image-webpack-loader/index.js):
c:\workplace\newtrial\node_modules\imagemin\index.js:42
module.exports = async (input,{glob = true,...options} = {}) => {
^^^
SyntaxError: Unexpected token ...
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object. (c:\workplace\newtrial\node_modules\image-webpack-loader\index.js:1:78)
@ ./data.js 1:0-31
@ ./src/index.js
Child html-webpack-plugin for "index.html":
1 asset
Entrypoint undefined = ./index.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 965 bytes {0} [built]
[./node_modules/lodash/lodash.js] 528 KiB {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
i 「wdm」: Failed to compile.
我是React的新手。我不明白我在做什么错。