通过 Webpack 在 Module 中导入图片答案

【问题标题】：Import Images in Module Through Webpack通过 Webpack 在 Module 中导入图片
【发布时间】：2016-09-08 19:09:49
【问题描述】：

我正在为我的应用程序使用 NodeJs、webpack 和 ES2015。

我似乎无法弄清楚如何在我的模块中导入图像。以下不起作用。

import "../../css/image/t1.png";

编辑：根据 Sitian 的要求，这是我的 webpack 配置：

const webpack = require( "webpack" );
const path = require( "path" );
const merge = require( "webpack-merge" );
const TARGET = process.env.npm_lifecycle_event;
process.env.BABEL_ENV = TARGET;

const PATHS = {
    app : path.join( __dirname, "app" ),
    build : path.join( __dirname, "build" )
};

const common = {
    entry : {
        app : PATHS.app
    },
    resolve : { // helps us refer to .js? without ext.
        extensions : [ "", ".js", ".jsx" ]
    },
    output : {
        path : PATHS.build,
        filename : "bundle.js"
    },
    module : {
        preLoaders : [
            {
                test : /\.css$/,
                loaders : [ "postcss" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loaders : [ "eslint" ],
                include : PATHS.app
            }
        ],
        loaders : [
            {
                test : /\.css$/,
                loaders : [ "style", "css" ],
                include : PATHS.app
            },
            {
                test : /\.jsx?$/,
                loader : 'babel',
                query : {
                    cacheDirectory : true,
                    presets : [ 'react', 'es2015' ]
                },
                include : PATHS.app
            }
        ]
    }
};

if( TARGET === "start" || !TARGET ) {
    module.exports = merge( common, {
        devtool : 'inline-source-map',
        devServer : {
            contentBase : PATHS.build,
            hot : true,
            progress : true,
            stats : 'errors-only'
        },
        plugins : [
            new webpack.HotModuleReplacementPlugin()
        ]
    } );
}
if( TARGET === "build" ) {
  module.exports = merge( common, {} );
}

【问题讨论】：

我相信导入必须链接到从其他地方导出的函数、对象或原语。所以，除非你使用了一些我不知道的导入抽象（并且与 ES6 导入没有任何关系），否则这段代码将永远无法工作。
@Kayote 你能把你的 webpack 配置贴在这里吗？我很乐意为您指路

标签： javascript node.js image import ecmascript-6

【解决方案1】：

file-loader（或url-loader，“如果文件小于限制，则可以返回 Data Url”）可用于将图像导入模块。

请参阅webpack loaders documentation 了解有关如何使用此类加载器的更多信息：

配置

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

【讨论】：

但是如果我只想使用图像呢？我认为需要import 来确保将图像放入dist 文件夹中。还是我必须手动完成？
加载器将确保引用的图像是捆绑包的一部分，并将它们复制到您的dist 文件夹。这能回答你的问题吗？

【解决方案2】：

你可以通过在你的 webpack (v1) 配置中添加一个加载器来做到这一点：

 {
    test: /\.png$/,
    loader: "url-loader?mimetype=image/png" 
 }

然后安装它：

npm install url-loader

最后您将能够使用以下命令导入图像：

import image from 'images/name.png'

【讨论】：

无论我提供什么路径，我都会不断收到“找不到模块 '../assets/image.png'”。
上面的代码将image定义为一个包含图片url的变量。在您的 jsx 中，您需要使用花括号设置图像源，例如 <img src={image} />

【解决方案3】：

使用当前版本的 webpack 它应该可以工作：

import t1 from "../../css/image/t1.png";

和你的 webpack.config (webpack 2.0)：

module: {
  rules: [
    {test: /\.png$/, use: 'url-loader?mimetype=image/png'},
  ]
}

【讨论】：