WebPack：从零到生产第 1 部分

Webpack：入门

我们如今编写 JavaScript 的方式与浏览器能够执行的代码有所不同。我们经常依赖其他类型的资源、转译语言以及现代浏览器尚未支持的实验性功能。

Webpack 是 JavaScript 的模块捆绑器，它可以弥补这一差距，并在不影响开发人员体验的情况下生成跨浏览器兼容的代码。

在开始之前，请记住，本 Webpack 教程中提供的所有代码也可以在 GitHub 上以完整的 Webpack 示例配置文件的形式获取。您可以随时在那里参考该文件，如果有任何疑问，请返回本文。

我在仓库中提交了几个代码，以便逐步理解 webpack。你可以点击这个链接查看具体内容。并查看这些提交，例如：

请通过repo来了解以下示例链接。

git checkout 89637f7ed458d8280c4542a2a87a6b2397594e7d

GitHub Webpack 教程提交

首次提交：简单应用程序

=> git 签出 89637f7ed458d8280c4542a2a87a6b2397594e7d

我开发了一个简单的应用程序，它从最终用户那里获取用户名和用户 ID，并将其打印在屏幕上。它还对用户名和用户 ID 进行了一些验证，并向最终用户返回错误信息。此外，它还包含一张 Webpack 徽标图片，我们将在后续的提交中使用 Webpack 进行优化。

WebPack 教程示例

Index.html
https://gist.github.com/vinodchauhan7/497643664382ace761034ee6ae080afe

打开index.html文件。

第二次提交：将 Js 代码拆分成 6 个文件

=> git 签出 1ca9ee0e85566146f477c530f4d4114f5e22372f

在这个提交中，我将 js 代码分成了 6 个文件，以便我们可以模拟一个包含许多 js 文件的大型示例，并可以使用 webpack 制作单个捆绑文件。

第三次提交：添加 Webpack 和 package.json 文件

=> git 签出 b9e7eb70469d5f6bd11c64cd54ba8a94532fb8a2

在本次提交中，我添加了一个 package.json 文件，然后添加了 webpack。对于 package.json 文件，执行：npm init -y，然后添加：npm install --save -dev webpack webpack-cli。为了使用 webpack 启动应用程序，我们在 package.json 文件中添加了一个脚本：

“脚本”：{“启动”：“webpack”}

当我们在终端上输入 npm start 命令时，会报错，提示我们需要包含 src/index.js 文件才能让 webpack 正常工作。npm start 成功后，会创建一个包含 main.js 文件的文件夹。我们可以将 main.js 添加到 index.html 中。这样它就可以正常工作了，webpack 正在处理我们的应用程序。打开 index.html 即可在浏览器中查看。

第四次提交：Webpack 现在打包了我们所有的应用程序

=> git 签出 a08072f552066e02859a21c170ae243112bbcb0d

在此提交中，我们使用了导入/导出将依赖项从一个文件注入到另一个文件，并从 html 中删除了标签。 <h3> <a name="fifth-commit-add-webpack-config-file" href="#fifth-commit-add-webpack-config-file" class="anchor"> </a> 第五次提交：添加 webpack 配置文件 </h3> <h4> <a name="gt-git-checkout-194985095f6e24628a8c69e05f2d586bea96634c" href="#gt-git-checkout-194985095f6e24628a8c69e05f2d586bea96634c" class="anchor"> </a> => git checkout 194985095f6e24628a8c69e05f2d586bea96634c </h4> 在这个提交中，我们添加了自己的 webpack.config.js 文件用于进行配置。 Path 模块用于获取系统路径，这样我们就可以动态地获取用户系统的路径，而不会产生任何混淆。它是由 npm 提供给我们的。 <div class="highlight"><pre class="highlight javascript"><code>const path = require("path"); module.exports = { mode: "development", devtool: "无", entry: "./src/index.js", 输出: { 路径: 路径.resolve(__dirname, "dist"), filename: "main.js" }; </code></pre></div> 1) module.exports 是 webpack 将查找的配置。 2) 模式：可以有两个值“开发”和“生产”。我们目前使用“开发”模式，以便让一切顺利运行。 3) entry：它是 webpack 需要查找的入口文件。 4) output.path：它将告诉 webpack 在哪里创建输出文件夹。__dirname 可以获取项目当前在系统上的路径。你可以为输出文件夹指定任意名称。我已给出 'dist'。 5) output.filename ：在这里我们将告诉 webpack，我们的输出文件名是什么。 6) 我们还更新了 package.json “scripts”: {“start”: “webpack — config webpack.config.js”/p> <h3> <a name="sixth-commit-add-loader-to-handle-css" href="#sixth-commit-add-loader-to-handle-css" class="anchor"> </a> 第六次提交：添加 Loader 来处理 css </h3> <h4> <a name="gt-git-checkout-b296566130db6559264bda7e7423f2feab64a782" href="#gt-git-checkout-b296566130db6559264bda7e7423f2feab64a782" class="anchor"> </a> => git checkout b296566130db6559264bda7e7423f2feab64a782 </h4> 在此提交中，我们引入了加载器。 webpack 仅识别 JavaScript 和 JSON 文件。加载器允许 webpack 处理其他类型的文件并将其转换为有效模块，这些模块可供应用程序使用并添加到依赖关系图中。 我们添加了一个新的 css 文件“index.css”，在其中更改了网页的背景色和前景色，并将其包含在我们的 index.js 文件中。为了将其加载到我们的 webpack 中，我们需要使用一些可以在 webpack 网站上找到的加载器。我们正在使用“css-loader”，“style-loader”。 <blockquote> npm install — save-dev css-loader style-loader 1) css-loader：它将 css 转换为 commonJs。 2) style-loader：它将 js 注入 dom。 </blockquote> 在包中包含以下代码。json <div class="highlight"><pre class="highlight javascript"><code>模块: { 规则: [ { 测试: /\.css$/, 使用: [“样式-加载器”, // 将 commonjs 注入 dom “css-loader” //将 css 转换为 commonJs ] ] </code></pre></div> 在 module 标签中，包含 rules 标签。 test ：在这里我们需要添加需要为 webpack 添加加载器的文件的扩展名，以构建其依赖关系图。 use ：它是依赖数组，我们需要在其中添加所有加载器。注意：我们需要按正确的顺序添加加载器才能使它们工作。 如需进一步了解，请访问<a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium 链接</a> /\.css$/, 使用: [“style-loader”, // 将 commonjs 注入 dom “css-loader” // 将 css 转换为 commonJs ] > ] </code></pre></div> 在 module 标签中，包含 rules 标签。 test ：在这里我们需要添加需要为 webpack 添加加载器的文件的扩展名，以构建其依赖关系图。 use ：它是依赖项数组，我们需要在其中添加所有加载器。注意：我们需要按正确的顺序添加加载器才能使它们正常工作。 如需进一步了解，请访问 <a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium 链接</a> /\.css$/, 使用: [“style-loader”, // 将 commonjs 注入 dom “css-loader” // 将 css 转换为 commonJs ] > ] </code></pre></div> 在 module 标签中，包含 rules 标签。 test ：在这里我们需要添加需要为 webpack 添加加载器的文件的扩展名，以构建其依赖关系图。 use ：它是依赖项数组，我们需要在其中添加所有加载器。注意：我们需要按正确的顺序添加加载器才能使它们正常工作。 如需进一步了解，请访问 <a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium 链接</a> // 将 commonjs 注入 dom “css-loader” //将 css 转换为 commonJs ] ] </code></pre></div> 在 module 标签中，包含 rules 标签。 test ：在这里我们需要添加需要为 webpack 添加 loader 的文件的扩展名来构建其依赖关系图。 use ：它是依赖数组，我们需要在其中添加所有加载器。注意：我们需要按正确的顺序添加加载器才能使它们工作。 如需进一步了解，请访问<a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium 链接</a> // 将 commonjs 注入 dom “css-loader” //将 css 转换为 commonJs ] ] </code></pre></div> 在 module 标签中，包含 rules 标签。 test ：在这里我们需要添加需要为 webpack 添加 loader 的文件的扩展名来构建其依赖关系图。 use ：它是依赖数组，我们需要在其中添加所有加载器。注意：我们需要按正确的顺序添加加载器才能使它们工作。 如需进一步了解，请访问<a href="https://medium.com/@vinodc45/webpack-zero-to-production-via-react-part-1-b478be7b7f29">Medium 链接</a>

文章来源：https://dev.to/vinodchauhan7/webpack-zero-to-production-part-1-1m9e

WebPack：从零开始到生产环境 第一部分 Webpack：入门

WebPack：从零到生产第 1 部分

Webpack：入门

Webpack：入门

首次提交：简单应用程序

=> git 签出 89637f7ed458d8280c4542a2a87a6b2397594e7d

第二次提交：将 Js 代码拆分成 6 个文件

=> git 签出 1ca9ee0e85566146f477c530f4d4114f5e22372f

第三次提交：添加 Webpack 和 package.json 文件

=> git 签出 b9e7eb70469d5f6bd11c64cd54ba8a94532fb8a2

第四次提交：Webpack 现在打包了我们所有的应用程序

=> git 签出 a08072f552066e02859a21c170ae243112bbcb0d

WebPack：从零开始到生产环境第一部分 Webpack：入门