Question

我编写了一个简单的加载器，它使用EJS加载JSON和XML文件的模板。我希望能够使用require获取图像路径，就像使用webpack加载器时所发生的那样，而是尝试将文件直接加载为JavaScript。我收到这个错误：

ERROR in ./favicons/manifest.json.ejs
    Module build failed: {root}/favicons/android-chrome-192x192.png:1
    (function (exports, require, module, __filename, __dirname) { �PNG
                                                                  ^
    SyntaxError: Invalid or unexpected token
        at Object.exports.runInThisContext (vm.js:78:16)
        at Module._compile (module.js:543:28)
        at Object.Module._extensions..js (module.js:580:10)
        at Module.load (module.js:488:32)
        at tryModuleLoad (module.js:447:12)
        at Function.Module._load (module.js:439:3)
        at Module.require (module.js:498:17)
        at require (internal/module.js:20:19)
        at Object.require ({root}/loaders/simple-ejs.js:11:14)
        at eval (eval at compile ({root}/node_modules/ejs/lib/ejs.js:481:12), <anonymous>:11:24)
        at returnedFn ({root}/node_modules/ejs/lib/ejs.js:512:17)
        at Object.exports.render ({root}/ejs/lib/ejs.js:316:37)
        at Object.module.exports ({root}/loaders/simple-ejs.js:8:14)
     @ ./~/html-webpack-plugin/lib/loader.js!./index.html.ejs 12:10-49

装载机/简单ejs.js：

let ejs = require('ejs');
let resolve = require('resolve-path');

module.exports = function(source) {
  this.cacheable();
  var self = this;
  return ejs.render(source, {
    require: function(path) {
      let absolutePath = path.match(/^\./) ? resolve(self._module.context, path) : path ;
      require(absolutePath);
    }
  });
};

webpack.config.js：

let path = require("path");
let ExtractTextPlugin = require("extract-text-webpack-plugin");
let CompressionPlugin = require("compression-webpack-plugin");
let HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: ["./src/main.jsx"]
  },

  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/",
    filename: "[name]_[hash].js"
  },

  plugins: [
    new ExtractTextPlugin("styles_[contenthash].css"),
    new CompressionPlugin({ test: /\.(js|css)$/ }),
    new HtmlWebpackPlugin({ inject: false, template: 'index.html.ejs' })
  ],

  module: {
    loaders: [
      {
        test: /\.(jpeg|png|woff|ttf|svg|eot|jpg)$/,
        loader: 'file-loader'
      },
      {
        test: /\.(s)?css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: "style-loader",
          loader: "css-loader!sass-loader?sourceMap"
        })
      },
      {
        test: /\.js(x)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          cacheDirectory: true,
        }
      },
      {
        test: /favicons\/.*$/,
        loader: 'file-loader'
      },
      {
        test: /favicons\/.*\.(json|xml)\.ejs$/,
        loader: 'file-loader?filename=[name]!./loaders/simple-ejs'
      }
    ]
  }
};

index.html.ejs：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="<%= htmlWebpackPlugin.files.css %>" rel="stylesheet">

  <link rel="apple-touch-icon" sizes="180x180" href="<%= require('./favicons/apple-touch-icon.png') %>">
  <link rel="icon" type="image/png" href="<%= require('./favicons/favicon-32x32.png') %>" sizes="32x32">
  <link rel="icon" type="image/png" href="<%= require('./favicons/favicon-16x16.png') %>" sizes="16x16">
  <link rel="manifest" href="<%= require('./favicons/manifest.json.ejs') %>">
  <link rel="mask-icon" href="<%= require('./favicons/safari-pinned-tab.svg') %>" color="#5bbad5">
  <meta name="apple-mobile-web-app-title" content="Test App">
  <meta name="application-name" content="Test App">
  <meta name="theme-color" content="#ffffff">

  <meta name=viewport content="width=device-width, initial-scale=1">
</head>
<body>
  <div id="app" class="loading">
  </div>

  <script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</body>
</html>

网站图示/ manifjest.json.ejs：

{
  "name": "Test App",
  "icons": [
    {
      "src": "<%= require('./android-chrome-192x192.png') %>",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "<%= require('./android-chrome-512x512.png') %>",
      "sizes": "512x512",
      "type": "image\/png"
    }
  ],
  "theme_color": "#ffffff",
  "display": "standalone"
}

Webpack“require”在加载器中再次运行堆栈

0 个答案: