如今，在构建网站时，采用某种构建流程来帮助执行开发任务并为实时环境准备文件是相当标准的做法。
您可以使用 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 部分的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » Webpack 入门：第 1 部分
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
