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'),
    // ...
  };
});

Webpack无法解析自定义JS文件

1 个答案: