为手动添加的文件配置Webpack [英] Configuring Webpack for Manually Added Files

问题描述

关于jquery和webpack的简单问题，

Simple question about jquery and webpack,

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

I have downloaded jquery.js then added into app.js these lines

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中进行定义?

How can I simply add jquery to define in webpack.config with this file tree while it is functional?

我尝试添加

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

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

at the end of the webpack.config but it gives Module not found: Error: Can't resolve 'jquery'.

通过webpack手动使用js文件进行无错误捆绑的解决方案是什么?

What is the solution for using js files manually with webpack for bundling without an error?

推荐答案

步骤1:

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

In general, Webpack is a module bundler.

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

It allows bundling your own modules (require("./my-module.js")) as well as thirdparty modules (require("bootstrap"))

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

In your case, that would mean you dont have to download the jquery and bootstrap files yourself. Update your package.json to include the required jquery and bootstrap modules. NPM will take care of getting them and webpack will do the bundling from the node_modules files.

第2步:

通常，webpack需要以及entry点和output位置.那就是它所需的最小配置.

In general, webpack needs and entry point and output locations. Thats the minimal config it needs.

一旦有了entry点，webpack仍然需要知道代码需要哪些依赖项.可以是您自己的模块或第三方模块(由npm维护).这就是require("module-name-or-path")或import "module-name-or-path"出现的地方.这意味着您需要确保entry脚本具有在同一文件或从属模块中提到的所有必需的从属关系.

Once you have an entry point, webpack still needs to know what dependencies your code needs. Be it your own modules or thirdparty modules (maintained with npm). That is where the require("module-name-or-path") or import "module-name-or-path" comes into picture. What that means is that you need to make sure your entry script has all the required dependencies mentioned either in the same file or in the dependent modules.

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

To give more insight, webpack looks at the entry point and will build the dependency graph. It will read all that require() or import and pulls in all required modules. It then bundles it.

在您的情况下，输入脚本可以包含用于jquery和bootstrap npm模块(即第三方)的require语句

In your case, the entry script can include the require statements for jquery and bootstrap npm modules (i.e. thirdparty)

以防万一，您仍然需要澄清，请随时阅读代码这里.特别看看src/entry.js

In case, you still need clarity, feel free to go through the code here. Especially take a look at src/entry.js

注意:Bootstrap也需要字体和图像.上面存储库中的代码也照顾好它们. webpack完成的所有魔法！

Note : Bootstrap needs fonts and images as well. The code in repository above, takes care of them too. All the magic done by webpack!

这篇关于为手动添加的文件配置Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！