如今，在构建网站以进行某种构建过程以帮助执行开发任务并为实时环境准备文件时，这是相当标准的做法。
为此，您可以使用Grunt或Gulp ，构建一系列转换，允许您将代码放在一端，并在另一端得到一些缩小的 css 和javascript。
这些工具非常流行且非常有用。但是，还有另一种做事方式，那就是使用webpack。
什么是webpack？
webp ack 是所谓的“模块捆绑器”。它采用 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 文件相同的目录中创建两个文件。命名为 first main.js，您可以想象它是我们脚本的主要入口点。然后命名第二个say-hello.js。这将是一个简单的模块，它接受一个人的姓名和dom元素，并将欢迎消息插入到所述元素中。
// say-hello.js
module.exports = function (name, element) {
element.textContent = 'Hello ' + name + '!';
};现在我们有了一个简单的模块，我们可以 require 它并从main.js. 这就像这样做一样简单：
var sayHello = require('./say-hello');
sayHello('Guybrush', document.queryselector('h2'));现在，如果我们要打开我们的 HTML 文件，那么显然不会显示此消息，因为我们没有包含main.js 或编译浏览器的依赖项。我们需要做的是让 Webpackmain.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。这将启动一个简单的 Web 服务器运行，使用当前目录作为提供文件的位置。打开一个新的浏览器窗口并访问 http://localhost:8080/webpack-dev-server/。如果一切顺利，您会看到类似以下内容：
现在，我们不仅有一个漂亮的小型 Web 服务器，我们还有一个可以监视我们的代码以进行更改的服务器。如果它看到我们更改了文件，它会自动运行 webpack 命令来打包我们的代码并刷新页面，而无需我们做任何事情。全部为零配置。
试一试，更改传递给sayHello函数的名称，然后切换回浏览器以查看您的更改立即应用。
装载机
Webpack 最重要的特性之一是 Loaders。加载器类似于 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']
}
}
],
}
};这里有一些重要的事情需要注意。第一个是 line test: /\.js$/，它是一个正则表达式，告诉我们将此加载器应用于所有带有.js扩展名的文件。同样 exclude: /node_modules/ 告诉 Webpack 忽略该node_modules目录。 loader并且query相当不言自明——使用带有 ES2015 预设的 Babel 加载器。
ctrl+c通过按下并再次运行来重新启动您的网络服务器webpack-dev-server。我们现在需要做的就是使用一些 ES6 代码来测试转换。我们如何将sayHello变量更改为常量？
const sayHello = require('./say-hello')
保存后，Webpack 应该会自动重新编译您的代码并刷新您的浏览器。希望你不会看到任何变化。看看bundle.js你是否能找到 const 关键字。如果 Webpack 和 Babel 已经完成了它们的工作，那么您将不会在任何地方看到它——只是普通的旧 JavaScript。
进入第 2 部分
在本教程的第 2 部分中，我们将了解如何使用 Webpack 将 CSS 和图像添加到您的页面，以及让您的站点为部署做好准备。
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
