2

我目前正在尝试向nunjucks-isomorphic-loader. 这里的目标是允许在模板中使用 require 语句，以便 webpack 加载和捆绑它们。它还必须使用html-webpack-plugin

因此，在阅读了有关模块依赖项的 webpack 文档后，我选择在模板中使用以下语法：{{ require('path/to/asset.jpg') }}因为它是有效的 nunjucks 语法，考虑require到宏。

然后我开始在 loader 上进行一些编码，并以以下修改结束：

从 ：

var precompiledTemplates = nunjucks.precompile(paths[0], {
    env: env,
    include: [/.*\.(njk|nunjucks|html|tpl|tmpl)$/]
});

至 ：

var templateContent = fs.readFileSync(name, { encoding: 'utf8' });

// Search for require macros
templateAsString = templateContent.replace(
    /\{\{\s*require\([\'\"]{1}(.+)[\'\"]{1}\)\s*\}\}/,
    function (match, $1) {
        return require(path.resolve(paths[0], $1));
    }
);

var precompiledTemplates = nunjucks.precompileString(templateAsString, {
    name: name,
    env: env,
    include: [/.*\.(njk|nunjucks|html|tpl|tmpl)$/]
});

所以在这里我只是简单地获取模板内容来用实际需要替换 require 语句，这样 webpack 就会加载资产。

但问题是：将它与 html-webpack-plugin 一起使用似乎并没有使用我在webpack.config.js.

这是我的测试配置：

/
├── asset.jpg
├── index.js
├── test.njk
├── webpack.config.js

index.js 是空的。

测试.njk：

test template
{{ require('./asset.jpg') }}

webpack.config.js：

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    app: './index.js'
  },

  module: {
    rules: [
      // Javascript
      // {
      //   test: /\.js$/,
      //   exclude: /(node_modules)/,
      //   use: {
      //     loader: 'babel-loader'
      //   }
      // },

      // Nunjucks - HTML
      {
        test: /\.njk$/,
        use: [
          {
            loader: 'nunjucks-isomorphic-loader',
            query: {
              root: [path.resolve(__dirname, '')]
            }
          }
        ]
      },

      // Images
      {
        test: /\.(jpe*g|png)/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[path][hash:8].[ext]'
            }
          }
        ]
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      tplVars: {
        foo: 'bar'
      },
      filename: path.join(__dirname, '/index.html'),
      template: 'test.njk'
    })
  ],

  resolveLoader: {
    // This allows to actually use the loader with is outside of node_modules
    modules: ['node_modules', path.resolve(__dirname, '../')]
  },

  devtool: 'eval',

  output: {
    pathinfo: true,
    publicPath: '/',
    filename: '[name].js'
  }
}

这是我在构建 webpack 时遇到的错误：

ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./test.njk
    Module build failed: /Users/gomoon/Documents/workspace/Sandbox/nunjucks-tests/asset.jpg:1
    (function (exports, require, module, __filename, __dirname) { ����
                                                                  ^

    SyntaxError: Invalid or unexpected token
        at createScript (vm.js:80:10)
        at Object.runInThisContext (vm.js:139:10)
        at Module._compile (module.js:576:28)
        at Object.Module._extensions..js (module.js:623:10)
        at Module.load (module.js:531:32)
        at tryModuleLoad (module.js:494:12)
        at Function.Module._load (module.js:486:3)
        at Module.require (module.js:556:17)
        at require (internal/module.js:11:18)
        at /Users/gomoon/Documents/workspace/Sandbox/nunjucks-isomorphic-loader/src/node-loader.js:61:11
        at String.replace (<anonymous>)
        at Object.module.exports (/Users/gomoon/Documents/workspace/Sandbox/nunjucks-isomorphic-loader/src/node-loader.js:56:37)
        at Object.module.exports (/Users/gomoon/Documents/workspace/Sandbox/nunjucks-isomorphic-loader/index.js:16:44)

显示它.jpg“按原样”导入文件，而不是使用file-loader我在 webpack 配置文件中定义的。

所以，我被困在这里，我什至不确定我试图完成的事情实际上是否可行。

更多细节可以在官方 repo 的这个 issue中找到

4

0 回答 0