Webpack無法解析自定義JS文件

Question

我們正在嘗試從grunt遷移到webpack。

在我們的項目中，我們使用一個稱為鍋爐的JS文件來定義經常訪問的核心類。

__boiler__.js

define(function (require) {
  return {
    Helpers: require('helpers/_helpers_'),
    Enums: require('enums/_enums_'),
    Context: require('context'),
    ...
  };
});

和Web Pack配置

webpack.config.js

const path = require('path');
module.exports = {
  resolve: {
    extensions: ['.js', '.scss'],
    alias: {
      app: path.resolve(__dirname, './dev_files/app'),
      Boiler: path.resolve(__dirname, './dev_files/app/core/_boiler_')
    }
  },
  entry: './dev_files/main.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.js$/,
        use: ['babel-loader']
      }
    ]
  }
};

然后，當我嘗試進行webpack構建時，它給了我一些錯誤，例如：

ERROR in ./dev_files/app/core/_boiler_.js
Module not found: Error: Can't resolve 'context' in 'C:\Myproject\dev_files\app\core'
resolve 'context' in 'C:\Myproject\dev_files\app\core'
  Parsed request is a module
  using description file: C:\Myproject\package.json (relative path: ./dev_files/app/core)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
    ....

一般來說，當我使用JavaScript和WebPack時，我是一個菜鳥。 有人可以告訴我我在這里做錯了什么嗎？ 謝謝。

Answer 1

我假設您正在使用require來加載模塊。

嘗試導出您的定義，以便webpack可以找到/包含它

module.export = (function (require) {
  return {
    Helpers: require('helpers/_helpers_'),
    Enums: require('enums/_enums_'),
    Context: require('context'),
    // ...
  };
});