(pug 模板) TypeError: require is not a function答案

【问题标题】：(pug template) TypeError: require is not a function(pug 模板) TypeError: require is not a function
【发布时间】：2019-10-03 18:51:43
【问题描述】：

这是我的代码：

img(src=require('/images/menu/img.svg'))

我需要使用 webpack 将图像放在 dist 文件夹中。

{
    test: /\.pug$/,
    loaders: ['html-loader?attrs=img:src',
      'pug-html-loader?{"pretty":true,"exports":false}'
    ]
  },
  {
    test: /\.(png|jpe?g|svg)$/i,
    use: [{
      loader: "file-loader",
      options:{
        name:'[path][hash].[name].[ext]'
      }
    }]        
  }

但我总是收到这个错误。请帮忙。我需要安装加载程序或任何依赖项吗？

TypeError: require is not a function

【问题讨论】：

欢迎来到 SO。首先，img(() 有不同数量的左括号和右括号。
嗨@MikePoole，是的，很抱歉，忘记复制最后一个“）”。不过仍然不是问题。
您想通过require() 实现什么目标？你试过img(src='/images/menu/img.svg')吗？
嗨@sean，已经尝试过了，但我需要将图像包含在 webpack 中并将其保存到 dist 文件夹中。

标签： webpack pug

【解决方案1】：

我向你推荐插件copy-webpack-plugin。

安装：

npm install copy-webpack-plugin --save-dev

并将其添加到您的 webpack 配置中：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CopyPlugin([
      {
        from: path.resolve(__dirname, '/PATH-TO/images/menu/img.svg'),
        to: path.resolve(__dirname, '/dist/images/menu/img.svg')
      },
    ]),
  ],
  // ...
};

【讨论】：