1
webpack dev serverで動作する私の角型アプリケーションにpdfをロードしようとしています。<object>タグをdataという属性で使用しています。webpackを使用してアングルアプリにアセット（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'
}
});
webpack設定ファイルのスニペットを与えることができます。また、pdfがassetフォルダに生成されている場所を教えてください。 –
@PraveshKhatri私はコードスニペットを追加しました。 –
ファイルをassetsフォルダに置くので、webpack.common.jsのファイルローダーに '.pdf'拡張子を追加する必要があると思います。 あなたはあなたのpdfをあなたのコピー先のフォルダに 'copyWebpackPlugin'によってコピーすることができる別のaprroachを持っています。 –