Webpack 无法解析自定义 JS 文件

Question

我们正在尝试从 grunt 迁移到 webpack。

在我们的项目中，我们使用一个名为boiler的JS文件来定义经常访问的核心类。

__boiler__.js

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

和 Web 包配置

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 来加载模块。

尝试导出您的定义，以便它可以被 webpackfound/included

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

Webpack 无法解析自定义 JS 文件

Webpack cannot resolve custom JS file

javascript

knockout.js

webpack