Estoy usando webpack con HtmlWebpackPlugin , html-loader y file-loader . Tengo una estructura de proyecto simple en la que no uso marcos, solo mecanografiado. Por lo tanto, escribo mi código HTML directamente en index.html . También uso este archivo HTML como mi plantilla en HtmlWebpackPlugin .
Como todos los sitios web, necesito poner una imagen que se refiera a PNG en mi carpeta de activos. file-loader debería cargar el archivo correctamente. Coloque el nuevo nombre de archivo dentro de la etiqueta src , pero eso no es lo que está sucediendo. En cambio, como valor de la etiqueta src , tengo [object Module] . Supongo que el file-loader emite algún objeto y se representa así cuando se ejecuta su método .toString() . Sin embargo, puedo ver que file-loader procesó el archivo con éxito y lo emitió con un nuevo nombre en la ruta de salida. No obtengo errores. Aquí está la configuración de mi paquete web e index.html .
const projectRoot = path.resolve(__dirname, '..'); { entry: path.resolve(projectRoot, 'src', 'app.ts'), mode: 'production', output: { path: path.resolve(projectRoot, 'dist'), filename: 'app.bundle.js' }, resolve: { extensions: ['.ts', '.js'] }, module: { rules: [ { test: /\.html$/i, use: 'html-loader' }, { test: /\.(eot|ttf|woff|woff2|svg|png)$/i, use: 'file-loader' }, { test: /\.scss$/i, use: [ { loader: MiniCssExtractPlugin.loader, options: { hmr: false } }, { loader: 'css-loader', options: { sourceMap: false } }, { loader: 'sass-loader', options: { sourceMap: false } } ] }, { exclude: /node_modules/, test: /\.ts$/, use: 'ts-loader' } ] }, plugins: [ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template: path.resolve(projectRoot, 'src', 'index.html') }), new MiniCssExtractPlugin({ filename: '[name].[hash].css', chunkFilename: '[id].[hash].css', ignoreOrder: false }) ] };índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body class="dark"> <header> <nav class="navigation"> <div class="left"> <img src="assets/logo.png" class="logo"> <!-- This logo is output as [object Module] --> </div> <div class="right"> </div> </nav> </header> </body> </html>Estructura del proyecto:
config/ webpack.config.js dist/ src/ styles/ assets/ logo.png index.html app.tsEdite las dependencias de My package.json:
"clean-webpack-plugin": "^3.0.0", "css-loader": "^3.2.0", "file-loader": "^5.0.2", "html-webpack-plugin": "^3.2.0", "mini-css-extract-plugin": "^0.8.0", "node-sass": "^4.13.0", "sass-loader": "^8.0.0", "style-loader": "^1.0.0", "ts-loader": "^6.2.1", "typescript": "^3.7.2", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0"Según los documentos del cargador de archivos:
De forma predeterminada, el cargador de archivos genera módulos JS que utilizan la sintaxis de los módulos ES. Hay algunos casos en los que el uso de módulos ES es beneficioso, como en el caso de la concatenación de módulos y la sacudida de árboles.
Parece que el paquete web resuelve las llamadas require() del módulo ES a un objeto que se ve así: {default: module} , en lugar del propio módulo aplanado. Este comportamiento es algo controvertido y se analiza en este número .
Por lo tanto, para que su atributo src se resuelva correctamente, debe poder acceder a la propiedad default del módulo exportado. Si está utilizando un marco, debería poder hacer algo como esto:
<img src={require('assets/logo.png').default}/> <!-- React --> <!-- OR --> <img src="require('assets/logo.png').default"/> <!-- Vue --> Alternativamente, puede habilitar la sintaxis del módulo CommonJS del cargador de archivos, cuyo paquete web se resolverá directamente en el propio módulo. Establezca esModule:false en la configuración de su paquete web.
webpack.config.js:
{ test: /\.(png|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { esModule: false, }, }, ], },La corrección sugerida por @ stellr42 de esModule: false en la configuración file-loader es la mejor solución en este momento.
Sin embargo, esto es en realidad un error en html-loader que se rastrea aquí: https://github.com/webpack-contrib/html-loader/issues/203
Parece que se agregó compatibilidad con ES Module a file-loader , css-loader y otros amigos, pero se perdió html-loader .
Una vez que se solucione este error, será mejor eliminar esModule: false y simplemente actualizar html-loader , ya que los módulos ES ofrecen algunos beneficios menores (como se menciona en los documentos )
Alternativamente, si (como yo), encontró este problema porque tenía problemas para cargar una imagen desde CSS (en lugar de HTML), entonces la solución es simplemente actualizar css-loader , sin necesidad de deshabilitar los módulos ES.
Acabo de actualizar mi cargador de archivos a ^5.0.2 hace minutos.
Sé que esModule: false fue la solución sugerida, pero eso no funcionó para mí.
Mi solución fue <img src={require('assets/logo.png').default}/> lo cual fue extraño. Primera vez usando .default pero funcionó.