Question

我遇到一个奇怪的问题，在我的.js文件中，我无法使用import或require语句来获取当前上下文目录之外的文件。

以下是我的项目目录的屏幕截图-

我有一个简单的文件templates.js，其中有一条语句require('./templates/test.hbs)，该语句用于获取Handlebars模板，该模板已与已经通过webpack设置的handlebars-loader插件进行了预编译。运行webpack --mode development --watch --display-error-details后，这是我得到的错误，基本上是说无法解析路径（但查看尝试解析的输出路径，它看起来像是我的.hbs文件肯定存在）：

Console error

我已经看到有关堆栈溢出的多个问题，但是大多数似乎都建议要么创建一个相对路径，然后返回到根目录，然后再返回到所需的文件夹（在我的情况下为../js/templates/test.hbs，我已经尝试过，但不起作用）或将resolve属性添加到我的webpack配置文件中（已在下面包括并尝试过）。任何帮助或技巧将不胜感激。

这是我的package.json（在Windows 10上运行Node v8.10.0，npm v6.5.0）

{
  "main": "./dist/index.html",
  "scripts": {
    "develop": "webpack --mode development --watch --display-error-details",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.0",
    "auto-prefixer": "^0.4.2",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.27.1"
  },
  "dependencies": {
    "enhanced-resolve": "^4.1.0",
    "handlebars": "^4.0.12",
    "handlebars-loader": "^1.7.0",
    "webpack-cli": "^3.1.2"
  }
}

这是我的webpack.config.js

const path = require('path');
module.exports = {
    entry: './src/js/main.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                    presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.hbs$/,
                loader: 'handlebars-loader',
            }
    ]},
    resolve: {
        extensions: ['.js', '.hbs'],
        modules: ['src', 'src/js', 'src/js/templates', 'node_modules']
    },
    target: 'node'
  }

Webpack无法解析不在当前上下文目录中的文件导入

0 个答案: