- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试让我的 webpack.config 处理子文件夹中的图像。我遇到了麻烦。我花了最后一天半的时间在互联网上搜索并阅读各种解决方案,但无济于事。
我的 src 文件是:
/src/图像/数据/
/src/容器
我的问题是:我有一条路线:http://localhost:7771/games/O从/src/containers 加载在该页面上,我尝试加载/src/images/data/NotFound.png
如果我使用以下方式调用图像: <img src="../images/data/NotFound.png"/>
然后图像显示没有任何问题。
但是,如果我将路径更改为 <img src={require("../images/data/NotFound.png")}/>
然后图像不显示。当我使用 Chrome 开发者工具检查图像时,我看到该元素显示为: <img src="images/data/NotFound.png">
如果我将鼠标悬停在 src 链接上,我会看到:http://localhost:7771/games/images/data/NotFound.png但如果我尝试打开该链接,图像将无法加载。
如果我导航到 http://localhost:7771/images/data/NotFound.png相反,然后加载图像。
我尝试使用别名进行解析并将图像更改为 <img src={require("~/data/NotFound.png")}>
但结果是一样的,图像无法加载。
这就是为什么我认为我的 webpack.config 困惑了,我需要一些帮助来找出问题所在,以便我的图像可以显示。
var webpack = require('webpack');
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CircularDependencyPlugin = require('circular-dependency-plugin');
var BUILD_DIR = path.resolve(__dirname,'htmlhot');
var APP_DIR = path.resolve(__dirname, 'src');
// Load environment variables from .env file. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set.
// https://github.com/motdotla/dotenv
require('dotenv').config({silent: true});
var config = {
context: path.join(__dirname, "src"),
devtool: 'source-map',
entry: [
//'webpack/hot/dev-server',
// reload controls falling back to page refresh if hot reload fails ( rare ).
// change to false to debug hot reloading, so you can see the errors before it refreshes the page.
'webpack-hot-middleware/client?reload=true',
// 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
APP_DIR + '/index.js'
],
output: {
path: path.join(__dirname, "src"),
filename: 'bundle-hot.js'
},
resolve: {
modules: [
path.join(__dirname, 'src/'),
'node_modules/'
],
alias: {
'~': APP_DIR + '/images/'
}
},
watch: true,
watchOptions: {
poll: true,
aggregateTimeout: 300,
number: 1000
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
exclude: /node_modules/,
loaders: ['react-hot-loader', 'babel-loader?' + JSON.stringify({
cacheDirectory: true,
plugins: [
'transform-runtime',
'react-html-attrs',
'transform-class-properties',
'transform-decorators-legacy'
],
presets: ['es2015', 'react', 'stage-2']
})]
},
// CSS
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
include: path.join(__dirname, 'src/style'),
loader: 'style-loader!css-loader'
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
{
test: /\.(ico|jpg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
exclude: /\/favicon.ico$/,
loader: 'file-loader',
query: {
name: '[path][name].[ext]'
}
},
{
test: /\.(ico)(\?.*)?$/,
exclude: /node_modules/,
loader: 'file-loader',
query: {
name: '.images/[name].[ext]'
}
}
]
},
// use EnableCircularDependencyPlugin=true|false to check the option
plugins: (function() {
var plugins = [
new CopyWebpackPlugin([
{ from: APP_DIR + '/index.html', to: BUILD_DIR + '/index.html' },
{ from: APP_DIR + '/images/', to: BUILD_DIR + '/images/' }
]),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
__DEVTOOLS__: true // <-------- DISABLE redux-devtools HERE
})
];
// HERE IS OPTION CONDITION
// edit .env file change to EnableCircularDependencyPlugin=false will bypass it
if (process.env.EnableCircularDependencyPlugin=="true") {
plugins.push(new CircularDependencyPlugin({
// exclude detection of files based on a RegExp
exclude: /a\.js|node_modules/,
// add errors to webpack instead of warnings
failOnError: true
}));
}
return plugins;
})(),
node: {
net: 'empty',
dns: 'empty'
}
};
module.exports = config;
最佳答案
文件加载器
尊重 output.publicPath
,由于您没有设置,它使用相对于 output.path
的路径,并且在使用不同的路线时将不起作用。要修复它,只需将公共(public)路径设置为 /
:
output: {
path: path.join(__dirname, "src"),
filename: 'bundle-hot.js',
publicPath: '/'
},
如果您不想设置
output.publicPath
,
file-loader
还有一个选项 publicPath
,因为它会影响其他加载器也是如此,但这通常是您想要的,因此建议这样做。有了这个你将得到:
<img src="/images/data/NotFound.png">
您也不需要复制 images
目录,因为 file-loader
将复制您导入的图像。事实上,它使用复制文件的 URL。因此,您应该从 CopyWebpackPlugin 中将其删除,除非您有未由 webpack 处理的图像。
关于javascript - 需要帮助修复具有相对/绝对路径的 webpack.config,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42859773/
像这样的webpack.config.js文件可以导出多个配置: module.exports = [{entry: 'a.js'}, {entry: 'b.js'}]; 当我调用 webpack 时
我正在尝试在 webpack 配置文件中设置 browserslist,但不知道如何执行此操作。 在 webpack.config 中尝试了以下内容: 'use strict'; module.exp
If you are using webpack v5 or above you do not need to install this plugin. Webpack v5 comes with t
使用webpack 2时,为什么需要以相反的顺序为“use:”键添加加载程序?为什么不从头到尾,从左到右列出每个加载器?有什么理由吗? 最佳答案 看起来像是一种约定,它很容易成为匹配执行顺序和源顺序的
当我 web pack 的时候 --watch --config webpack.production.config.js --mode production 我有这个错误: ERROR in Typ
我有一个使用 Twig 进行模板的项目。其中的所有数据都是静态的,但为了清楚起见,我已经在其他 Twig 文件中分离出部分页面(否则一个文件中会有数百行标记)。 我使用 webpack 作为构建工具,
我使用 cli 创建了一个 vue.js 项目。我使用了 webpack 模板。我已经为此工作了几天,并且工作顺利。 现在我需要向项目添加一个 npm 包。这个包建议我对 webpack 配置进行一些
我正在使用运行“node_modules/.bin/webpack”,但我知道可以配置路径以便您只需键入“webpack ”。不过,我找不到方法。 :/ 最佳答案 如果你安装一个包 globally
我正在服务器渲染我的 react 应用程序,如下所示: export default ({ clientStats }: { clientStats: any }) => async (req: Re
我试过包含一个通配符,它破坏了构建;和多个 favicon字段条目,它只使用最后一个输入。我如何支持使用此插件包含多个网站图标文件? 最佳答案 您还需要包括 favicons-webpack-pl
我正在使用 webpack 编译我的 Reactjs 文件。在我的项目中,我需要对后端进行 API 调用。 现在我有 3 个环境,分别是本地环境、开发环境和生产环境。 所以我有一个constants.
我正在将所有文件构建到“dist”文件夹中。 Dist ->index.html ->bundle.js 我已将配置设置为在我需要的特定端口上运行。 { entry: './src/ind
我想使用由 Closure Compiler 使用 Webpack 生成的 SourceMap,但我不知道该怎么做。 这是我的 webpack 配置: const ClosureCompiler =
有没有办法接收当前文件路径,就像在 requirejs 中一样? define(['module'], function (module) { console.log(module.uri)
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗?更新问题,使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
我是 webpack 的初学者用户。我想写一个webpack.config.js建立我的项目。但是有什么不对的地方! 这是我的 package.json (已安装所有依赖项): { "name":
我从这里开始:https://github.com/vuejs/vue-cli 我不确定它是否使用 Webpack。 包含/使用 webpack 的项目将包含哪些文件? 最佳答案 如果您的项目正在使用
Webpack,你将要了我的命。 html-webpack-plugin 在生产中运行良好。 'dist' 文件夹加载了我的 html 模板和插入的包。好酷。 但是,webpack-dev-serve
想象一下我有一个这样的项目: /moduleA/src... /moduleB/src... /mainApp/src... 每个模块和主应用程序都有一个单独的 webpack.config。模块是库
根据 webpack 文档,我尝试将 UglifyJSPlugin 添加到 webpack 4 项目中,但我仍然在我的包中看到死代码甚至注释,这让我认为我的 uglify 插件配置没有被使用。 Lin
我是一名优秀的程序员,十分优秀!