Question

我对使用webpack非常陌生。我正在尝试使用它来捆绑我的框架。无论如何，我的框架文件看起来像这样：

class Rorke {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
}

在我的webpack.config.js中：

module.exports = {
  entry: "./src/rorke.js",
  output: {
    filename: "rorke.bundle.js"
  }
}

我的package.json：

{
  "name": "rorke-3.0",
  "version": "1.0.0",
  "description": "",
  "main": "./src/rorke.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "bundle": "webpack ./src/rorke.js dist/rorke.bundle.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.32.2"
  },
  "dependencies": {
    "pixi.js": "^5.0.3",
    "prototype": "0.0.5"
  }
}

所以我跑：

npm run bundle

它输出一个捆绑文件。然后，我添加该文件，如下所示：

<html>
  <body>
    <script src="dist/rorke.bundle.js"></script>
    <script src="game.js"></script>
  </body>
</html>

最后，这是我的game.js：

const game = new Rorke(800, 600);

所以当我打开html文件时，它告诉我：

Rorke未定义

有人知道为什么会这样吗？我在这里做错了/不理解吗？

Answer 1

您需要的一切都在Webpack文档中：Authoring Libraries / Expose the Library

Answer 2

开发网站实际上只是意味着创建HTML文件，CSS文件和JavaScript文件（或有时将它们组合在一起，或者将CSS和JavaScript组合在一起等）。这些只是根据要求通过网络服务器提供的文件。

我认为使用webpack的主要原因之一是遵循require / import语句，它将把分布在多个文件中的客户端代码转换为一个捆绑包。前端开发工具（例如webpack）允许将这些文件创作为单独的组件。

Rorke可能仅限于捆绑销售商品。因此，从index.js文件开始，要求/导入您的类，然后使用该类。然后将您的webpack根目录更改为index.Js。

为什么我不能使用webpack捆绑文件中的类？

2 个答案: