如何使用webpack在角应用程序中动态加载资产(pdf)？

Question

我试图加载一个pdf到我的角度应用程序运行在webpack dev server上使用<object>标签与data属性。

因为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:\ as contentBase。如果有可能，为生成的PDF定义另一个输出目录。