javascript - 单击以打开 PDF - 您可能需要合适的加载程序来处理此文件类型

Question

我正在尝试将 PDF 导入 .js 文件，以便将 Click to open pdf 放入我的渲染中。

导入

import myFile from './assets/files/myfile.pdf';

渲染

  render() {
return (
      ...
            <a href={myFile}>
              <span>Click to open PDF</span>
            </a>
      ...
)}

错误

myProject.bundle.js:88481 ./assets/files/myfile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

Webpack.config.js

我尝试了几个PDF加载器都没有成功，下面的webpack使用了url-loader。

const path = require('path'),
      webpack = require('webpack'),
      CleanWebpackPlugin = require('clean-webpack-plugin'),
      HtmlWebpackPlugin = require('html-webpack-plugin'),
      ExtractTextPlugin = require('extract-text-webpack-plugin');

const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' });

const config = {
   mode: 'production',

  // absolute path for project root with the 'src' folder
  context: path.resolve(__dirname, 'src'),
  entry: ['babel-polyfill', './main.js'],
  // entry: {
  //   // relative path declaration
  //   app: './main.js'
  // },

  output: {
    // absolute path declaration
    path: path.resolve(__dirname, 'dist'),
    filename: 'myProject.bundle.js',
    publicPath: '/'
  },

  module: {
    rules: [
      // ************
      // * SEE HERE * 
      // ************
      { test: /\.pdf$/, use: 'url-loader' },
      // babel-loader with 'env' preset
      { test: /\.jsx?$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env', 'es2015', 'react', 'stage-0'] } } },
      // html-loader
      { test: /\.html$/, use: ['html-loader'] },
      // sass-loader with sourceMap activated
      {
        test: /\.scss$/,
        include: [path.resolve(__dirname, 'src', 'assets', 'scss')],
        use: extractPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ],
          fallback: 'style-loader'
        })
      },
      // file-loader(for images)
      { test: /\.(jpg|png|gif|svg)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },
      // file-loader(for fonts)
      { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] },
    ]
  },

  plugins: [
    // cleaning up only 'dist' folder
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // extract-text-webpack-plugin instance
    extractPlugin
  ],

};

module.exports = config;

注意:如果有任何不同，我正在本地主机上进行测试。

解决方案

问题是因为我在进行一些更改后没有通过运行 npm run startdev 来重新启动开发服务器。

Answer 1

将它包含在文件加载器中，就像处理图像一样:

{ test: /\.(jpg|png|gif|svg|pdf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/images/' } } ] },

请注意，我在 SVG 声明之后添加了 |pdf。然后 Webpack 应该像处理图像一样处理该文件。