Webpack 入门：第 1 部分

如今，在构建网站时，采用某种构建流程来帮助执行开发任务并为实时环境准备文件是相当标准的做法。

您可以使用 Grunt 或 Gulp 来实现此目的，构建一系列转换，允许您将代码放在一端，并在另一端获取一些缩小的 CSS 和 JavaScript。

这些工具非常流行并且非常有用。然而，还有另一种方法，那就是使用 Webpack。

什么是 Webpack？

Webpack 是所谓的“模块捆绑器”。它需要 JavaScript 模块，了解它们的依赖关系，然后以最有效的方式将它们连接在一起，最后生成一个 JS 文件。没什么特别的，对吧？像 RequireJS 这样的东西多年来一直在这样做。

嗯，事情是这样的。使用 Webpack，模块不再局限于 JavaScript 文件。通过使用 Loaders，Webpack 知道 JavaScript 模块可能需要 CSS 文件，而 CSS 文件可能需要图像。输出的资产将仅包含所需的内容，并且不会产生太大的麻烦。让我们开始设置，以便我们可以看到它的实际效果。

安装

与大多数开发工具一样，您需要先安装 Node.js，然后才能继续。假设您已正确设置，安装 Webpack 所需要做的就是在命令行中键入以下内容。

npm install webpack -g

这将安装 Webpack 并允许您从系统上的任何位置运行它。接下来，创建一个新目录并在其中创建一个基本的 HTML 文件，如下所示：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Webpack fun</title>
    </head>
    <body>
        <h2></h2>
        <script src="bundle.js"></script>
    </body>
</html>

这里重要的部分是对 bundle.js 的引用，这就是 Webpack 将为我们制作的内容。另请注意 H2 元素 - 我们稍后将使用它。

接下来，在 HTML 文件所在的目录中创建两个文件。将第一个命名为 main.js，您可以想象它是我们脚本的主要入口点。然后将第二个say-hello.js。这将是一个简单的模块，它获取一个人的名字和 DOM 元素，并将欢迎消息插入到所述元素中。

// say-hello.js

module.exports = function (name, element) {
    element.textContent = 'Hello ' + name + '!';
};

现在我们有了一个简单的模块，我们可以引入它并从 main.js 调用它。这就像执行以下操作一样简单：

var sayHello = require('./say-hello');

sayHello('Guybrush', document.querySelector('h2'));

现在，如果我们打开 HTML 文件，那么显然不会显示此消息，因为我们没有包含 main.js 也没有编译浏览器的依赖项。我们需要做的是让 Webpack 查看 main.js 并查看它是否有任何依赖项。如果是，它应该将它们编译在一起并创建一个我们可以在浏览器中使用的bundle.js 文件。

返回终端运行 Webpack。只需输入：

webpack main.js bundle.js

指定的第一个文件是我们希望 Webpack 开始在其中查找依赖项的入口文件。它将计算出任何必需的文件是否需要任何其他文件，并将继续执行此操作，直到计算出所有必要的依赖项。完成后，它将依赖项作为单个串联文件输出到 bundle.js。如果按回车键，您应该会看到如下内容：

Hash: 3d7d7339a68244b03c68
Version: webpack 1.12.12
Time: 55ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.65 kB       0  [emitted]  main
   [0] ./main.js 90 bytes {0} [built]
   [1] ./say-hello.js 94 bytes {0} [built]

现在在浏览器中打开 index.html 即可看到您的页面打招呼。

配置

每次运行 Webpack 时指定输入和输出文件并不是很有趣。值得庆幸的是，Webpack 允许我们使用配置文件来省去我们的麻烦。在项目的根目录中创建一个名为 webpack.config.js 的文件，其中包含以下内容：

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }
};

现在我们只需输入 webpack 即可获得相同的结果。

开发服务器

那是什么？每次更改文件时，您甚至都懒得输入 webpack 吗？我不知道，今天的一代等等等等。好吧，让我们建立一个小的开发服务器，让事情变得更有效率。在终端写入：

npm install webpack-dev-server -g

然后运行命令 webpack-dev-server。这将启动一个简单的网络服务器运行，使用当前目录作为提供文件的位置。打开一个新的浏览器窗口并访问 http://localhost:8080/webpack-dev-server/。如果一切顺利，您将看到类似以下内容：

现在，我们不仅有一个漂亮的小型 Web 服务器，而且还有一个可以监视代码更改的服务器。如果它发现我们更改了文件，它会自动运行 webpack 命令来捆绑我们的代码并刷新页面，而无需我们做任何事情。全部为零配置。

尝试一下，更改传递给 sayHello 函数的名称，然后切换回浏览器以查看立即应用的更改。

装载机

Webpack 最重要的功能之一是加载器。加载器类似于 Grunt 和 Gulp 中的“任务”。它们本质上是获取文件并以某种方式对其进行转换，然后再将其包含在我们的捆绑代码中。

假设我们想在代码中使用 ES2015 的一些优点。 ES2015 是 JavaScript 的新版本，并非所有浏览器都支持，因此我们需要使用加载器将 ES2015 代码转换为支持的普通旧 ES5 代码。为此，我们使用流行的 Babel Loader，根据说明，我们安装如下：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

这不仅会安装加载器本身，还会安装其依赖项和 ES2015 预设，因为 Babel 需要知道它正在转换的 JavaScript 类型。

现在加载器已安装，我们只需要告诉 Babel 使用它即可。更新 webpack.config.js 使其看起来像这样：

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            }
        ],
    }
};

这里有一些重要的事情需要注意。第一个是 test: /\.js$/ 行，它是一个正则表达式，告诉我们将此加载程序应用于所有具有 .js 扩展名的文件。同样，exclude: /node_modules/ 告诉 Webpack 忽略 node_modules 目录。 loader 和 query 是相当不言自明的——使用带有 ES2015 预设的 Babel 加载器。

按 ctrl+c 并再次运行 webpack-dev-server 重新启动您的 Web 服务器。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将 sayHello 变量更改为常量？

const sayHello = require('./say-hello')

保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望您不会看到任何变化。查看 bundle.js 并查看是否可以找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，您将不会在任何地方看到它——只是普通的旧 JavaScript。

进入第 2 部分

在本教程的第 2 部分中，我们将介绍如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的网站做好部署准备。

以上就是Webpack 入门：第 1 部分的详细内容，更多请关注编程之家其它相关文章！

Webpack 入门：第 1 部分

什么是 Webpack？

安装

配置

开发服务器

装载机

进入第 2 部分

相关推荐