我有一个难题，经过多次试用后无法解决：
我无法在生产中加载静态图像
在开发(npm-run-serve)时一切都很好，即使是从dist(npm-run-serve:dist
版本
Webpack:3.12.0
文件加载程序：1.1.11
url加载程序：1.1.2
AngularJS:1.6.9
在开发过程中：
我的index.html包含这一行，如果没有，webpack将无法加载
<base href="/"></base>
而我的AngularJS配置块包含
$locationProvider.hashPrefix('');
我使用的URL如下http://localhost:3000/#/appName/listingComponent/users
我可以使用ng-src(有时它是动态绑定的)查看每个图像，就像这个
<img ng-src="app/images/image1.png">
文件夹结构类似于
ui/
├── conf/
│ ├── browsersync-dist.conf.js
│ ├── browsersync.conf.js
│ ├── gulp.conf.js
│ ├── webpack-dist.conf.js
│ └── webpack.conf.js
├── gulp_tasks/
│ ├── browsersync.js
│ ├── misc.js
│ └── webpack.js
├── node_modules/
├── src/
│ ├── app/
│ │ ├── config.js //global variables
│ │ ├── favicon.ico
│ │ ├── index.html
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── images/ <--
│ │ ├── actual_app_folders/
│ │ └── ...
├── gulpfile.js
└── package.json
在我的webpack-dist.js中，我有以下
module.exports = {
module: {
loaders: [
{
test: /.json$/,
loaders: [
'json-loader'
]
},
{
test: /.js$/,
exclude: [
/node_modules/
],
loader: 'babel-loader',
options: {
presets: ['es2015']
}
},
{
test: /.js$/,
exclude: [
/node_modules/
],
loaders: [
'eslint-loader'
],
enforce: 'pre'
},
{
test: /.(css|less)$/,
exclude: '/node_modules/roboto-fontface/',
loaders: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader?minimize!less-loader!postcss-loader'
})
},
{
test: /.html$/,
loaders: [
'html-loader'
]
},
{
test: /.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/,
loader: 'url-loader?name=[name].[ext]'
}
]
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
FailPlugin,
new HtmlWebpackPlugin({
template: conf.path.src('/app/index.html'),
inject: true,
chunksSortMode: 'dependency'
}),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendors', 'config'],
minChunks: Infinity
}),
new ExtractTextPlugin('index-[contenthash].css'),
new webpack.LoaderOptionsPlugin({
options: {
postcss: () => [autoprefixer]
}
})
],
output: {
path: conf.paths.dist,
filename: function(output) {
return output['chunk']['name'] === 'config' ? '[name].js' : '[name]-[hash].js';
},
chunkFilename: '[name]-[hash].js'
},
entry: {
app: `./${conf.path.src('/app/index')}`,
config: `./${conf.path.src('/app/config')}`,
vendors: Object.keys(pkg.dependencies).concat(['webpack-material-design-icons'])
}
};
生产中
构建过程将/customer_company_name/our_company_name/前缀添加到路径中，该路径变为
http://<customer_domain>:<domain_port>/customer_company_name/our_company_name/#/appName/listingComponent/users
而文件夹结构类似于这个
our_company_name/
├── app/
│ ├── images/ <--
│ │ ├── image1.png
│ │ └── image2.png
├── app-<random_number>.js
├── config.js
├── favicon.ico
├── index.html
├── index-<random_number>.css
└── vendors.js
问题
现在，每次显示图片时，浏览器都会出现404错误像这个
GET http://<customer_domain>:<domain_port>/app/images/image1.png 404 (Not Found)
而请求应该像这个一样
GET http://<customer_domain>:<domain_port>/customer_company_name/our_company_name/index.js
就像应用程序中的其他文件一样。
我尝试了什么
到目前为止，以下各项都无济于事：
- 在以下
<base href="/customer_company_name/our_company_name/"></base>中的构建过程中更改基本标记(当前保留) - 明确要求将图片与index.js
require('./images/ODM_trasp48px.png');中的其他文件一起使用(目前已保留) - 在webpack
output.publicPath: '/customer_company_name/our_company_name/'和output.publicPath: '/'中使用publicPath - 使用文件加载程序而不是url加载程序(目前已保留)
- 使用
options: { useRelativePath: true }的文件加载器 - 使用
options: { publicPath: /customer_company_name/our_company_name/ }的文件加载器
小伙子们，你们能帮帮我吗？
我认为问题不在于替换模式，因为它适用于其他文件类型，而在于webpack不知道如何处理ng-src属性。我认为默认情况下它只查看img的src属性。您可以将其更改为识别ng-src，如：
module.exports = {
module: {
loaders: [
...
{
test: /.html$/,
loaders: [ "html-loader?" + JSON.stringify({ attrs: ["img:src", "img:ng-src"] })]
},
...
],
...
alt语法：
{
test: /.html$/,
loaders: [ "html-loader?attrs=img:src img:ng-src" ]
}
在更改配置之前，您可以通过检查替换当前是否适用于带有纯静态<img src="…"/>。
您可以尝试显式导入图像并将其传递给模板，而不是让webpack解析您的模板。
然后，导入的图像将由配置的image-loader或url-loader进行处理。
静态图像
const myImage = require('./path/to/images/image1.png');
// In component declaration
`<img ng-src="${myImage}">`
动态图像
使用webpack的require.context
const pathToImages = require.context('./path/to/images', true);
const dynamicImageName = 'foo.jpg',
// In component declaration
`<img ng-src="${pathToImages(dynamicImageName, true)}">`
你能尝试将下面的更改为你的index.html 吗
<base href="./"></base>
解决方案让我们从开始
output.publicPath: '/customer_company_name/our_company_name/'
这将负责正确地重写ng-/src路径，如本文所述。
我们不需要html-loader来解析ng-/src，唯一需要的就是始终使用ng-src，否则构建就不会成功。
最终，不需要<base>标签，也不需要用于引用图像的每个路径中的初始斜杠。
随着webpack-dist.conf.js/整个项目的改进，我会更新这个答案。
没有给出任何答案，因此我会尝试它们的组合，因为有些建议看起来是合法的。
最终，如果我无法解决这个问题，我将尝试删除生产路径前缀/customer_company_name/our_company_name/。