如何使用 webpack 在 Angular 应用程序中动态加载资产（pdf）？

Question

我正在尝试使用带有data 属性的HTML <object> 标记将pdf 加载到我在webpack dev server 上运行的角度应用程序中。

由于 pdf 路径是在运行时生成的，并且是 absolute 像 C:\test.pdf。

它没有加载到 UI 中，而是 console 记录错误 -

Not allowed to load local resource: file:///C:/test.jpeg

但是，不能在托管服务器上运行但作为静态 html 运行的应用程序的生产版本可以正常工作。此外，相对路径也可以正常工作。

如何加载 pdf 文件？

webpack.common.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

module.exports = {
resolve: {
    extensions: ['.js', '.ts'],
    modules: [rootDir, path.join(rootDir, "node_modules")]
},

module: {
    rules: [
        {
            test: /\.html$/,
            loader: 'html-loader'
        },
        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
            loader: 'file-loader?name=assets/[name].[ext]'
        },
        {
           test: /\.(scss|css)$/,
           use: [
                { loader: "style-loader" },
                { loader: "css-loader" },
                { loader: "sass-loader",
                    options: {
                        includePaths: ["node_modules/"]
                    }
                }
            ]
        }
    ]},
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['app', 'vendor', 'polyfills']
        }),
        new HtmlWebpackPlugin({
            template: 'src/index.html'
        }),
        new webpack.ContextReplacementPlugin(
            /angular(\\|\/)core(\\|\/)@angular/,
            path.resolve(__dirname, '../src')
        )
    ]
};

webpack.dev.js

var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');

const path = require('path');
const rootDir = path.resolve(__dirname, '..');

commonConfig.entry = {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts'
};

commonConfig.module.rules.unshift({
    test: /\.ts$/,
    loaders: ['awesome-typescript-loader', 'angular2-template-loader', 'angular-router-loader']
});

module.exports = webpackMerge(commonConfig, {

  devtool: 'cheap-module-eval-source-map',

  output: {
      path: path.resolve(rootDir, 'dist'),
      publicPath: 'http://localhost:8080/',
      filename: '[name].js',
          chunkFilename: '[name].chunk.js'
      },

      plugins: [
          new ExtractTextPlugin('[name].css')
      ],

      devServer: {
          historyApiFallback: true,
          stats: 'minimal'
      }
});

Answer 1

您可以告诉 devServer 从何处提供文件。

devServer: {
  historyApiFallback: true,
  stats: 'minimal',
  contentBase: ['./dist', 'C:\\']
}

然后你可以用<... src="/file_name.ext" ... />加载你的文件

但我不建议将 C:\ 添加为 contentBase。如果有可能，请为生成的 PDF 定义另一个输出目录。