[英]Webpack only loads images referenced by css. Does not load images referenced by js
My dist folder contains my index.html, contact.html, index.js, contact.js, and two images that are mentioned by my css as background images. 我的dist文件夹包含我的index.html,contact.html,index.js,contact.js和css称为背景图像的两个图像。
ex. 恩。
background-image: url("../images/prairie.jpg");
That is everything in my dist folder. 那就是我的dist文件夹中的所有内容。 All other images(which my css does not mention) are not loaded.
未加载所有其他图像(我的CSS没有提及)。 These images are only mentioned within .js files(ex. slideshow.js).
这些图片仅在.js文件(例如slideshow.js)中提及。 This 'slideshow.js' file is a slideshow and it does not display any images, but shows the missing image icon.
此“ slideshow.js”文件是幻灯片,它不显示任何图像,但显示缺少的图像图标。 That background image mentioned earlier '../images/prairies.jpg' is shown.
显示了前面提到的背景图片“ ../images/prairies.jpg”。 All the photos that are referenced by a css file are loaded into the dist folder.
css文件引用的所有照片都将加载到dist文件夹中。 All photos mentioned only by a .js file and not a css file, are not loaded into the dist folder.
仅由.js文件而非css文件提及的所有照片都不会加载到dist文件夹中。
This is my webpack.config.js 这是我的webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTemplate = require('html-webpack-template');
const path = require('path');
const config = {
mode: 'development', // set mode option, 'development' or 'production'
entry: {
index: './src/index.js',
contact:'./src/contact.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true, // webpack@1.x
disable: true, // webpack@2.x and newer
},
},
],
}
],
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
inject: true,
chunks: ['index'],
filename: './index.html'
}),
new HtmlWebpackPlugin({
template: './contact.html',
inject: true,
chunks: ['contact'],
filename: './contact.html'
})
]
};
module.exports = config;
When using webpack, when you also want to bundle images / assets. 使用webpack时,当您还想捆绑图像/资产时。 You can't access them using the normal url scheme,, eg.
您无法使用常规url方案访问它们,例如。
/images/my-image.png
. /images/my-image.png
。
This is because your then telling your application to load the normal HTTP GET way, and not load via your bundle. 这是因为您随后告诉您的应用程序以正常的HTTP GET方式加载,而不是通过捆绑包加载。
To access images from a bundle you do it like any other asset in webpack, you require
it.. const image1 = require("images/image1.png")
etc. Internally what webpack will be doing here is converting the binary image into a data uri. 要从包中访问图像,您
require
像webpack中的任何其他资产一样执行此操作。您require
它。const const image1 = require("images/image1.png")
image1.png const image1 = require("images/image1.png")
等数据uri。 This means you can then do things like -> <img src={image1}/>
这意味着您可以然后执行->
<img src={image1}/>
If you have lots of images you can use the require.context
, but I personally avoid using this as I kind of like having more control of loaded assets. 如果您有很多图像,则可以使用
require.context
,但是我个人避免使用它,因为我有点想更好地控制加载的资产。
To also handle funny files names, you can also let webpack produce sensible names with the hash appended instead. 为了也处理有趣的文件名,您还可以让webpack产生明智的名称,并在其后附加哈希。 eg.
例如。 In your loaders set the
loader
option to something like -> loader: 'file?name=[name].[ext]?[hash:5]'
在您的加载程序中,将
loader
选项设置为-> loader: 'file?name=[name].[ext]?[hash:5]'
UPDATE: Just thought if your using the file-loader
plugin, ignore the bit about data uri, if using the file-loader
webpack is doing a kind of remapping instead. 更新:如果您使用的是
file-loader
插件,请不要理会有关数据uri的内容,如果使用的是file-loader
webpack则在进行某种重新映射。 If you don't use the file-loader
, then it will do it using the data uri way.. But in both case's you use require
.. 如果您不使用
file-loader
,则它将使用数据uri方式进行。但是在两种情况下,您require
使用require
..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.