精通 Webpack Webpack 初学者系列

2025-06-07

掌握 Webpack

Webpack 初学者系列

Webpack 初学者系列

了解如何使用 Webpack 捆绑您的代码、管理您的资产、自动化简单流程​​并优化您的代码。

什么是 webpack？

Webpack 是一个模块打包器和资源管理工具，它帮助我们将分散在不同文件和目录中的代码打包成一个针对生产环境优化的单一文件。Webpack 还能帮助我们管理代码中的资源，例如样式表、字体、图标、图片等，并提供一些开箱即用的功能，例如将 TypeScript、Sass、Scss、Makrdown、Jade 转译为原生 JavaScript、CSS 和 HTML。此外，Webpack 还提供了一些很酷的功能，例如 CSS 作用域、一个很棒的开发服务器以及更多其他令人兴奋的功能。Webpack
作为一种工具的重要性不容低估，因为

  • Webpack 可以通过捆绑分散在不同文件中的所有代码并将它们吐出到一个文件中来帮助我们减少加载时间，这样我们的浏览器就只需要加载需要运行的单个 JavaScript 文件，从而显著减少加载时间。
  • Webpack 可以帮助我们将使用浏览器不太熟悉的语言编写的代码转换为大多数浏览器可以理解的代码，这也有助于减少开发所花费的时间，因为大多数任务已经自动化。
  • 它配备了一个很酷的开发服务器，我们可以在其中实时重新加载我们的工作，该服务器还允许源映射，以便我们可以看到导致错误的特定文件中的确切行。

在我们继续之前，首先要确保您的电脑上已经安装了 nodejs，您可以node -v在终端中执行此操作，如果有的话，这将抛出您在电脑上安装的 node 版本，否则，您可以前往node js下载并在您的设备上安装最新版本的 node，完成后，让我们开始安装 webpack。仍然在命令行类型中mkdir bundle-app && cd bundle-app并按回车键。这将为我们创建一个名为 bundle-app 的文件夹，并从命令行导航到该目录。接下来是创建一个 package.json 文件来跟踪我们所有的依赖项。输入npm init --y并按回车键，这将为我们创建一个具有默认配置的 package.json 文件，现在不用担心这个，只要知道它会关注我们的应用程序运行所依赖的所有模块即可。接下来我们要做的就是安装 webpack，输入npm i webpack webpack-cli --save并按回车键，这将安装 webpack 和 webpack-cli 并将它们保存到我们的依赖项中。现在我们开始动手吧。在命令行中，在 bundle-app 文件夹内输入code .，这样就会打开 Visual Studio Code，并加载该目录。或者，你也可以使用任何编辑器打开该文件夹。你的目录结构应该如下所示。

您可以在此存储库中找到本课程的完整代码库 


bundle-app ---------------------package.json
                        |-----package.lock.json
Enter fullscreen mode Exit fullscreen mode

接下来添加一个 index.html 文件并添加普通网页的基本标记，您的目录结构现在应该如下所示


bundle-app-----------------------package.json
                |-------------package.lock.json
                |-------------index.html
Enter fullscreen mode Exit fullscreen mode

打开你的index.html文件并链接到main.js，你的典型index.html文件应该看起来像这样；

webpack 将为我们创建 main.js


<!DOCTYPE html>
<html>
  <head>
    <title>Webpack Tutorial</title>
  </head>
  <body>
  <script src="main.js"></script>      
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

太好了，现在创建一个 JavaScript 文件，我们把它命名为 index.js。好的，再创建另一个 JavaScript 文件，我们把它命名为 hero.js，你的新目录结构应该如下所示：


bundle-app-----------------------package.json
                |-------------package.lock.json
                |-------------index.html
                |-------------index.js
                |-------------hero.js
Enter fullscreen mode Exit fullscreen mode

打开你的 hero.js 并使用对象字面量表示法定义一个非常简单的 Hero 对象，我们的 person 对象应该看起来像这样


var hero = {
    alias: "Incredible Hulk",
    personality: "Bruce Banner",
    suit: "short Jeans",
    strength: "super human strength"
}

module.exports = hero
Enter fullscreen mode Exit fullscreen mode

接下来打开你的index.js并导入我们在hero.js中声明的英雄对象，你的index.js文件应该如下所示；


const Hero = require('./hero.js')

// create an html list object
var ul = document.createElement('ul')
// create a div tag
var div = document.createElement('div')
// we will loop through hero object and append a new li tag to the div for each property
for (var key in Hero){
    let li = document.createElement('li')
    li.textContent = key + ' - ' + Hero[key]
    ul.appendChild(li)
}
//appendn the list to the div and then the div to the body of the document
div.appendChild(ul)
document.querySelector('body').appendChild(div)
Enter fullscreen mode Exit fullscreen mode

呼！现在让我们通过在命令行中使用 webpack 来感受它的强大功能。如果你的终端仍然处于运行状态，并且你位于 bundle-app 目录中，那就太棒了！否则，请打开命令行并导航到 bundle-app 目录。完成后，在命令行中输入npx webpack ./index.js -o ./并按回车键，它将编译你的代码，完成后，你就可以在浏览器中打开 index.html 了，你应该会在浏览器中看到包含 hero 属性的文档。
在本例中，我们通过命令行使用了 wepack，这是使用 webpack 的方法之一，但我建议你只在非常简单的项目中使用此方法，更复杂的项目需要不同的方法，我们从现在开始将使用这种方法。如果你看一下那个例子，webpack 将我们在两个单独的文件中编写的代码拆分成一个文件，然后由浏览器加载，webpack 之所以能够高效而优雅地做到这一点，是因为在拆分代码之前，它会检查文件的依赖关系并构建一个依赖关系图，用于跟踪应用程序中的依赖关系，然后将我们的代码和依赖关系拆分成一个文件。Webpack 可以监视我们的文件，一旦文件发生更改，它会重新编译它，并且会更新依赖关系图以适应新的依赖关系（如果有），请使用此命令npx webpack ./index.js -o ./ --watch。在上面的例子中，我们只是做了简单而常见的模块导出和导入样式，但是我们可以在代码中使用 ES6 样式的模块导入系统，webpack 会将其打包为大多数浏览器可以理解的 JavaScript 版本，为此，我们现在将更新目录结构和文件，并且我们将使用 webpack.config.js 文件来设置我们的 webpack，因此创建该文件，它应该位于根文件夹中，我们的目录结构现在应如下所示；


bundle-app----------------------package.json
                |-------------package.lock.json
                |
                |-------------dist/---------index.html
                |           
                |
                |-------------src/---------index.js
                |                   |------hero.js
                |
                |-------------webpack.config.js
Enter fullscreen mode Exit fullscreen mode

webpack 的一个很酷的功能是，我们可以在代码中编写我们想要的 JavaScript 版本，比如 ES6 JavaScript，而 webpack 非常好用，它会将我们的 ES6 语法代码转换为现代和旧浏览器都能理解的 JavaScript 版本，打开 hero.js 文件夹并对其进行以下调整。


//hero.js
let Hero = {
    alias: "Incredible Hulk",
    personality: "Bruce Banner",
    suit: "Short Raggerd Jeans",
    strength: "super human strength"
}
export default Hero
Enter fullscreen mode Exit fullscreen mode

我们现在使用 ES6 样式来声明我们的英雄对象，接下来转到 index.js 文件，然后我们还使用 ES6 import 语句来导入我们的英雄对象

//index.js
import Hero from './hero.js' //only change this line

// create an html list object
const ul = document.createElement('ul')
// create a div tag
const div = document.createElement('div')
// we will loop through hero object and append a new li tag to the div for each property
for(let key in Hero){
    let li = document.createElement('li')
    li.textContent = Hero[key]
    ul.appendChild(li)
}
//appendn the list to the div and then the div to the body of the document
div.appendChild(ul)
document.querySelector('body').appendChild(div)
Enter fullscreen mode Exit fullscreen mode

我们需要编辑我们的 html 代码来链接到 webpack 为我们生成的 bundle.js 文件，所以你的 html 文件应该看起来像这样；


<!DOCTYPE html>
<html>
  <head>
    <title>Webpack Tutorial</title>
  </head>
  <body>
  <script src="bundle.js"></script>      
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

好的，我们已经设置好了一切，接下来我们要做的是打开我们的 webpack.config.js，在这里我们为 webpack 定义一些关于我们希望 webpack 如何捆绑我们的代码的配置。

//webpack.config.js
const path = require('path') //we require the path core module to help us resolve a directory

//this will hold our configuration object
module.exports = {
    //we first specify an entry script to webpack
    entry: './src/index.js',
    //next is our output file and directory
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}
Enter fullscreen mode Exit fullscreen mode

这个简单的配置对象需要两样东西；

  • 我们要处理的文件在入口变量中指定，它包含我们代码的起点，通常这个入口脚本应该导入我们的应用程序所依赖的所有其他脚本。
  • 我们处理后的文件应该放在哪里？为此，我们导入了 path 模块，它是 node.js 的核心模块，它将帮助我们解析文件所在的目录。我们的输出通过一个 output 对象指定，该对象包含两个键：我们希望文件所在的路径，以及 filename（也就是我们想要命名的文件）。
  • Webpack 为我们创建了 bundle.js，即使它不存在，就像我们第一次通过命令行使用它时一样，这个命令行的好处是我们可以轻松地将信息传递给 webpack，告诉它应该如何处理我们导入到代码中的东西，这有助于资产和样式管理

我们使用 path core module 的 resolve 方法来获取名为 dist 的目录，这个目录我们之前创建过，还记得吗？接下来就是要给文件命名，在这个例子中，我把它命名为 bundle.js，是不是有点熟悉？要处理我们的文件，只需在根文件夹 bunde-app 中打开终端，然后在终端中输入 ，然后就npx webpack --config webpack.config.js大功告成了！如果一切按计划进行（除非某个地方有拼写错误），你应该会看到关于文件、信息和已处理文件的信息，然后在控制台中看到编译成功的消息。

这就是本系列的这篇文章，在下一篇文章中，我们将研究如何使用 webpack 将 typescript 代码转换为纯 JavaScript，敬请关注，不要忘记在评论部分发表您的评论，祝您有美好的一天。

文章来源：https://dev.to/kalashin1/mastering-webpack-12fk
Devto 翻译
PREV
你应该知道的有趣的 Python 技巧
NEXT
💡 你需要知道的有用的 Git 命令 💡