图像GET使用Webpack和AngularJS在生产中抛出404错误

Question

我有这个难题,经过多次尝试后无法解决:

我无法在生产中加载静态图像;

在开发(npm run serve)时一切都很好,即使在从dist提供文件时(npm run serve:dist)

版本

Webpack:3.12.0

file-loader:1.1.11

url-loader:1.1.2

AngularJS:1.6.9

开发时:

我的index.html包含这一行,webpack将不会加载

<base href="/"></base>

而我的AngularJS配置块包含

$locationProvider.hashPrefix('');

我使用像http:// localhost:3000 /#/ appName/listingComponent/users这样的URL

我能够像这样使用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

像应用程序中的每个其他文件一样.

我尝试了什么

到目前为止,以下没有任何帮助:

1. 在构建过程中更改基本标记,如下所示<base href="/customer_company_name/our_company_name/"></base>(目前保留)
2. 明确要求图片与index.js中的每个其他文件一起require('./images/ODM_trasp48px.png');(目前保留)
3. 在webpack中使用publicPath output.publicPath: '/customer_company_name/our_company_name/'也是output.publicPath: '/'
4. 使用文件加载器而不是url-loader(目前保留)
5. 使用文件加载器 options: { useRelativePath: true }
6. 使用文件加载器 options: { publicPath: /customer_company_name/our_company_name/ }

你能帮我小伙子吗？

Answer 1

解决方案 让我们开始

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/。