为手动添加的文件配置 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 的末尾，但它给出了Module not found: Error: Can't resolve 'jquery'。

用webpack手动使用js文件打包不报错的解决方法是什么？

Answer 1

第 1 步：

一般来说，Webpack 是一个模块打包器。

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

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

第 2 步：

一般来说，webpack 需要entry 点和output 位置。这就是它需要的最小配置。

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

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

在您的情况下，入口脚本可以包含 jquery 和引导 npm 模块（即第三方）的 require 语句

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

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