webpack을 사용하여 각진 앱에 애셋 (pdf)을 동적으로로드하는 방법은 무엇입니까?

Question

webpack dev server에서 실행중인 내 각주의 응용 프로그램에 <object> 태그와 data 속성을 사용하여 pdf를로드하려고합니다.

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

당신은 devSe 말할 수 파일을 제공 할 위치의 rver.

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

그럼 당신은 <... src="/file_name.ext" ... />

사용하여 파일을로드 할 수 있습니다하지만 추가 C 권하고 싶지 않다 : \ contentBase한다. 가능성이 있다면 생성 된 PDF에 대한 다른 출력 디렉토리를 정의하십시오.