的WebPack 3图像SRC问题的阵营（HTML，装载机及变换反应-JSX-IMG-进口）

Question

---

修订 在仓库中

---

首先，我知道有固定码像这个话题的一些职位，但他们是如此的过时（的WebPack 1或2）

我试图建立一个的WebPack配置为阵营图像避免了难看var myImage = require('./imagePath/image.jpg');

它只适用于我通过scss或css （背景图像即）添加图像，但如果我尝试在index.html中添加图像或在反应组件中添加图像，则不会生成图像。

我试图使用文件加载，HTML装载机和变换反应-JSX-IMG-进口

我创建this repository，与样品情况。

您可以克隆它，只是通过npm install或yarn install

我一直为此而努力的最后2天安装依赖，所以任何帮助，将不胜感激。

const autoprefixer  = require('autoprefixer'), 
     DashboardPlugin = require('webpack-dashboard/plugin'), 
     ExtractTextPlugin = require('extract-text-webpack-plugin'), 
     HtmlPlugin  = require('html-webpack-plugin'), 
     path    = require('path'), 
     webpack   = require('webpack'); 

const isProd = process.env.NODE_ENV === 'production'; 



//////////////////////// FILEPATH /////////////////////// 
///////////////////////////////////////////////////////// 

const buildFolder = 'dist'; 
const PATHS = { 
    src  : path.resolve(__dirname, 'src'), 
    build  : path.resolve(__dirname, buildFolder), 
    appJS  : path.resolve(__dirname, 'src/app.js'), 
    indexHTML : path.resolve(__dirname, 'src/index.html') 
} 



//////////////////////// PLUGINS //////////////////////// 
///////////////////////////////////////////////////////// 
const HtmlPluginOptions = { 
    template: PATHS.indexHTML, 
    minify: { 
    collapseWhitespace: true 
    }, 
    hash: true 
}; 

const ExtractTextPluginOptions = { 
    filename: '[name].bundle.css', 
    disable: !isProd, 
    allChunks: true, 
    ignoreOrder: false 
} 

const devServerOptions = { 
    contentBase: PATHS.build, 
    compress: true, 
    port: 6969, 
    stats: 'errors-only', 
    open: true, 
    hot: true, 
    openPage: '' 
}; 

const pluginsDev = [ 
    new DashboardPlugin(), 
    autoprefixer, 
    new HtmlPlugin(HtmlPluginOptions), 
    new ExtractTextPlugin(ExtractTextPluginOptions), 
    new webpack.HotModuleReplacementPlugin() 
]; 

const pluginsProd = [ 
    require('autoprefixer'), 
    new HtmlPlugin(HtmlPluginOptions), 
    new ExtractTextPlugin(ExtractTextPluginOptions) 
]; 

var pluginsList = isProd ? pluginsProd : pluginsDev; 



//////////////////////// LOADERS //////////////////////// 
///////////////////////////////////////////////////////// 
const postcss = { 
    loader: 'postcss-loader', 
    options: { 
    sourceMap: 'inline', 
    plugins() { 
     return [autoprefixer({ browsers: 'last 3 versions' })]; 
    } 
    } 
}; 

const stylesDev = ['style-loader', 'css-loader?sourceMap', postcss, 'sass-loader?sourceMap']; 
const stylesProd = ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: ['css-loader', postcss, 'sass-loader'], 
    publicPath: buildFolder 
}); 

const styles = { 
    test: /\.scss$/, 
    use: isProd ? stylesProd : stylesDev 
}; 

const javascript = { 
    test: /\.(js|jsx)$/, 
    use: 'babel-loader', 
    exclude: /node_modules/ 
} 

const images = { 
    test: /\.(jpe?g|svg|png|gif)$/i, 
    use: [ 
    'file-loader?name=assets/img/[name].[ext]' 
    ] 
} 

const html = { 
    test: /\.(html)$/, 
    use: { 
    loader: 'html-loader', 
    options: { 
     attrs: ['img:src', 'link:href'] 
    } 
    } 
} 



//////////////////////// WEBPACK //////////////////////// 
///////////////////////////////////////////////////////// 
const webpackConfig = { 
    entry: { 
    app: PATHS.appJS 
    }, 
    output: { 
    path: PATHS.build, 
    filename: '[name].bundle.js' 
    }, 
    module: { 
    rules: [javascript, styles, images, html] 
    }, 
    devServer: devServerOptions, 
    plugins: pluginsList 
} 

module.exports = webpackConfig; 

有一个./src/index.html文件与<img>标签 也./src/components/App.js文件与另一<img>标签

再次感谢提前。请记住，你在this repository，尽量得到完整的例子来说明这两种标识（的WebPack和反应的标志）

Answer 1

网址开始与/不受html-loader转化（参见'Root-relative' URLs）。大多数加载程序都遵循这种行为，因为它允许您使用现有文件，这些文件使用服务器上的文件，这些文件不是使用webpack处理的。此外，如果它将URL解释为路径（就像在任何JavaScript模块中一样），它会查看文件系统的根目录，这不是您想要的。

正如您在SCSS中所做的那样，您必须使用相对路径。

<img src="./public/assets/img/logo--webpack.svg" alt="Logo Webpack"/> 

在阵营组件，您不能使用html-loader因为你没有实际编写HTML，但JSX，这是语法糖会转化为函数调用。详情请参阅JSX In Depth。

这意味着您必须导入图像并将其传递给src属性。

import reactLogo from '../public/assets/img/logo--react.svg'; 

<img src={reactLogo} alt="Logo React"/> 

你也许可以用巴贝尔插件改造<img>标签和自动添加的来源的进口产品。从快速搜索中，我发现babel-plugin-transform-react-jsx-img-import，虽然我不知道这是否有效，因为它似乎不被维护。

Answer 2

我用我的WebPack 3的配置载入图像是：

 { 
     test: /\.(png|svg|jpg|webp)$/, 
     use: { 
      loader: 'file-loader', 
     }, 
     }, 

这代码内我的反应的组分：

import logo from '../../img/logo.png'; 

... 

<img className={style.logo} src={logo} alt="logo" />