Question

关于jquery和webpack的简单问题，

我已下载jquery.js，然后将这些行添加到app.js

import "./jquery";
import "./bootstrap";

我的webpack.config输入行

entry: "./src/app.js"

所以文件树是：

./webpack.config.js
./src/app.js
./src/jquery.js
./src/bootstrap.js

如何在jquery添加webpack.config时使用此文件树进行定义？

我尝试添加

new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })

在webpack.config的末尾，但它会Module not found: Error: Can't resolve 'jquery'。

使用webpack手动使用js文件进行捆绑而没有错误的解决方案是什么？

Answer 1

第1步：

通常，Webpack是一个模块捆绑器。

它允许捆绑您自己的模块（require("./my-module.js")）以及第三方模块（require("bootstrap")）

在您的情况下，这意味着您不必自己下载jquery和bootstrap文件。更新package.json以包含所需的jquery和bootstrap模块。 NPM将负责获取它们，webpack将从node_modules文件进行捆绑。

第2步：

通常，网络包需要entry点和output位置。这是它需要的最小配置。

一旦你有entry点，webpack仍然需要知道你的代码需要什么依赖项。无论是您自己的模块还是第三方模块（使用npm维护）。这就是require("module-name-or-path")或import "module-name-or-path"出现的地方。这意味着您需要确保您的entry脚本具有在同一文件或相关模块中提及的所有必需依赖项。

为了提供更多见解，webpack会查看entry点并构建依赖关系图。它将读取所有require()或import并提取所有必需的模块。然后捆绑它。

在您的情况下，条目脚本可以包含jquery和bootstrap npm模块的require语句（即第三方）

如果您仍需要清晰，请随时浏览代码here。特别是看看src/entry.js

注意：Bootstrap也需要字体和图像。上面的存储库中的代码也会处理它们。 webpack所做的所有魔术！

为手动添加的文件配置Webpack

1 个答案: