javascript - create - webpack react

Cómo cargar archivos de imagen con el cargador de archivos webpack

Question

Estoy usando webpack para gestionar un proyecto reactjs . Quiero cargar imágenes en javascript por el cargador de file-loader webpack. A continuación se muestra el webpack.config.js :

const webpack = require(''webpack'');
const path = require(''path'');
const NpmInstallPlugin = require(''npm-install-webpack-plugin'');

const PATHS = {
    react: path.join(__dirname, ''node_modules/react/dist/react.min.js''),
    app: path.join(__dirname, ''src''),
    build: path.join(__dirname, ''./dist'')
};

module.exports = {
    entry: {
        jsx: ''./app/index.jsx'',
    },
    output: {
        path: PATHS.build,
        filename: ''app.bundle.js'',
    },
    watch: true,
    devtool: ''eval-source-map'',
    relativeUrls: true,
    resolve: {
        extensions: ['''', ''.js'', ''.jsx'', ''.css'', ''.less''],
        modulesDirectories: [''node_modules''],
        alias: {
            normalize_css: __dirname + ''/node_modules/normalize.css/normalize.css'',
        }
    },
    module: {
        preLoaders: [

            {
                test: //.js$/,
                loader: "source-map-loader"
            },
        ],
        loaders: [

            {
                test: //.html$/,
                loader: ''file?name=[name].[ext]'',
            },
            {
                test: //.jsx?$/,
                exclude: /node_modules/,
                loader: ''babel-loader?presets=es2015'',
            },
            {test: //.css$/, loader: ''style-loader!css-loader''},
            {test: //.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"},
            {
                test: //.js$/,
                exclude: /node_modules/,
                loaders: [''babel-loader?presets=es2015'']
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
            },
            output: {
                comments: false,
            },
        }),
        new NpmInstallPlugin({
            save: true // --save
        }),
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
    ],
    devServer: {
        colors: true,
        contentBase: __dirname,
        historyApiFallback: true,
        hot: true,
        inline: true,
        port: 9091,
        progress: true,
        stats: {
            cached: false
        }
    }
}

Utilizo esta línea para cargar archivos de imagen y copiarlos en el directorio dist / public / icons y mantener el mismo nombre de archivo.

{test: //.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=/public/icons/[name].[ext]"}

Pero tengo dos problemas para usarlo. Cuando webpack comando webpack , el archivo de imagen se copió al directorio dist / public / icons / como se esperaba. Cómo, también se copió al directorio dist con este nombre de archivo "df55075baa16f3827a57549950901e90.png".

A continuación se muestra la estructura de mi proyecto:

Otro problema es que uso el siguiente código para importar este archivo de imagen, pero no se pudo mostrar en el navegador. Si estoy usando la url ''public / icons / imageview_item_normal.png'' en la etiqueta img, funciona bien. ¿Cómo usar el objeto importado del archivo de imagen?

import React, {Component} from ''react'';
import {render} from ''react-dom'';
import img from ''file!../../public/icons/imageview_item_normal.png''

export default class MainComponent extends Component {

  render() {
    return (
      <div style={styles.container}>
        download
        <img src={img}/>
      </div>
    )
  }

}

const styles = {
  container: {
    width: ''100%'',
    height: ''100%'',
  }
}

Answer 1

Sobre el problema # 1

Una vez que haya configurado el cargador de archivos en webpack.config, cada vez que use import / require, probará la ruta en todos los cargadores y, en caso de que haya una coincidencia, pasará el contenido a través de ese cargador. En tu caso, coincidía

{
    test: //.(jpe?g|png|gif|svg)$/i, 
    loader: "file-loader?name=/public/icons/[name].[ext]"
}

y por lo tanto ves la imagen emitida a

dist/public/icons/imageview_item_normal.png

cual es el comportamiento deseado.

La razón por la que también está obteniendo el nombre del archivo hash es porque está agregando un cargador de archivos en línea adicional. Estás importando la imagen como:

''file!../../public/icons/imageview_item_normal.png''.

Prefijo con file! , pasa el archivo nuevamente al cargador de archivos y esta vez no tiene la configuración de nombre.

Entonces, su importación realmente debería ser:

import img from ''../../public/icons/imageview_item_normal.png''

Actualizar

Como señaló @cgatian, si realmente desea utilizar un cargador de archivos en línea, ignorando la configuración global del paquete web, puede prefijar la importación con dos signos de exclamación (!!):

import ''!!file!../../public/icons/imageview_item_normal.png''.

Sobre el problema # 2

Después de importar png, la variable img solo contiene la ruta que el cargador de archivos "conoce", que es public/icons/[name].[ext] (también conocido como "file-loader? name=/public/icons/[name].[ext]" ). Su directorio de salida "dist" es desconocido. Podrías resolver esto de dos maneras:

1. Ejecute todo su código en la carpeta "dist"
2. Agregue la propiedad publicPath a su configuración de salida, que apunta a su directorio de salida (en su caso ./dist).

Ejemplo:

output: {
  path: PATHS.build,
  filename: ''app.bundle.js'',
  publicPath: PATHS.build
},

Answer 2

Alternativamente, puedes escribir lo mismo que

{
    test: //.(svg|png|jpg|jpeg|gif)$/,
    include: ''path of input image directory'',
    use: {
        loader: ''file-loader'',
        options: {
            name: ''[path][name].[ext]'',
            outputPath: ''path of output image directory''
        }
    }
}

y luego usar importación simple

import varName from ''relative path'';

y en jsx escribe como <img src={varName} ..../>

.... son para otros atributos de imagen

Answer 3

Instale el cargador de archivos primero:

$ npm install file-loader --save-dev

Y agregue esta regla en webpack.config.js

           {
                test: //.(png|jpg|gif)$/,
                use: [{
                    loader: ''file-loader'',
                    options: {}
                }]
            }

Answer 4

Tuve un problema al cargar imágenes en mi proyecto React JS. Estaba tratando de usar el cargador de archivos para cargar las imágenes; También estaba usando Babel-loader en mi reacción.

Usé la siguiente configuración en el paquete web:

{test: //.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=app/images/[name].[ext]"},

Esto ayudó a cargar mis imágenes, pero las imágenes cargadas estaban algo corruptas. Luego, después de algunas investigaciones, llegué a saber que el cargador de archivos tiene el error de corromper las imágenes cuando se instala babel-loader.

Por lo tanto, para solucionar el problema, intenté usar el cargador de URL que funcionó perfectamente para mí.

Actualicé mi paquete web con la siguiente configuración

{test: //.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=app/images/[name].[ext]"},

Luego usé el siguiente comando para importar las imágenes

import img from ''app/images/GM_logo_2.jpg''

<div className="large-8 columns">

      <img  style={{ width: 300, height: 150 }} src={img} />
</div>