Question

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

所以在阅读the webpack docs about module dependencies之后，我选择在模板中使用以下语法：{{ require('path/to/asset.jpg') }}，因为它是有效的nunjucks语法，将require视为宏。

然后我开始在加载器上编写一些代码并以下面的修改结束：

来自：

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为空。

test.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文件，而不是我在webpack配置文件中定义的file-loader。

所以，我被困在这里，我甚至不确定我想要实现的目标实际上是可能的。

更多详情可在this issue on the official repo

中找到

通过html-webpack-plugin

0 个答案: