javascript - 为手动添加的文件配置 Webpack

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的末尾，但它给出了找不到模块:错误:无法解析'jquery'。

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

Answer 1

第 1 步:

总的来说，Webpack 是一个模块 bundler 。

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

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

第 2 步:

一般来说，webpack 需要入口点和输出位置。这就是它所需的最低配置。

一旦你有了一个入口点，webpack仍然需要知道你的代码需要哪些依赖项。无论是您自己的模块还是第三方模块(使用 npm 维护)。这就是 require("module-name-or-path") 或 import "module-name-or-path" 发挥作用的地方。这意味着您需要确保您的entry 脚本具有同一文件或依赖模块中提到的所有必需依赖项。

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

就您而言，入口脚本可以包含 jquery 和 bootstrap npm 模块(即第三方)的 require 语句

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

注意:Bootstrap 也需要字体和图像。上面存储库中的代码也可以处理它们。所有的魔法都是由 webpack 完成的!