Webpack не может разрешить импорт файлов не в текущем контекстном каталоге - PullRequest
Новая
       21

Webpack не может разрешить импорт файлов не в текущем контекстном каталоге

0 голосов
/ 17 декабря 2018

У меня странная проблема, когда в моих файлах .js я не могу использовать оператор import или require, чтобы получить файл, который находится за пределами текущего каталога контекста.

Вот скриншот того, как выглядит мой каталог проекта -

Каталог проекта

У меня есть простой файл templates.js, где у меня естьоператор require('./templates/test.hbs), используемый для получения шаблона Handlebars, который был предварительно скомпилирован с помощью плагина handlebars-loader, уже настроенного через webpack.После запуска webpack --mode development --watch --display-error-details, вот ошибка, которую я получаю, , в основном говоря, что путь не может быть разрешен (но, глядя на выведенные пути, которые пытались разрешить, это похоже на путь к моим .hbsфайл определенно существует):

Ошибка консоли

Я видел множество вариантов этой проблемы, связанной с переполнением стека, но большинство, похоже, предлагают либо создать относительный путь, который возвращаетсяв корневой каталог, а затем обратно в нужную папку (в моем случае, ../js/templates/test.hbs, которую я пробовал, и она не работает) или добавление свойства resolve в файл конфигурации моего веб-пакета (который я включил ниже итоже попробовал).Любая помощь или советы будут с благодарностью.

Вот мой package.json (работает Node v8.10.0 в Windows 10, 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'
  }
...