本文是Webpack入门教程，介绍了如何设置Webpack，创建包，管理模块，使用配置文件以及通过NPM脚本运行Webpack。通过Webpack，可以更好地组织和管理JavaScript项目，解决依赖问题并生成优化的捆绑包。
翻译自：https://webpack.js.org/guides/getting-started/
入门
webpack用于编译JavaScript模块。 安装后，您可以通过其CLI或API与webpack连接。 如果您还是webpack的新手，请仔细阅读核心概念和此比较，以了解为何可以将其用于社区中的其他工具。
基本设置
首先让我们创建一个目录，初始化npm，在本地安装webpack，然后安装webpack-cli（用于在命令行上运行webpack的工具）：
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack --save-dev
npm install webpack-cli --save-dev
现在我们将创建以下目录结构，文件及其内容：
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
我们还需要调整我们的package.json文件，以确保我们将包标记为私有，以及删除主条目。 这是为了防止意外发布您的代码。
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
+ "private": true,
- "main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {}
}
在此示例中，<script>标记之间存在隐式依赖关系。 我们的index.js文件依赖于lodash在运行之前包含在页面中。 这是因为index.js从未明确声明需要lodash; 它只是假设全局变量_存在。
以这种方式管理JavaScript项目存在问题：
- 无法很明显的知道脚本依赖于什么外部库
- 如果依赖丢失，或者加载顺序错误，功能无法正常运行
- 有可能加载不必要得依赖
让我们使用webpack来管理这些脚本。
创建一个包
首先，我们将略微调整我们的目录结构，将“source”代码（/ src）与我们的“distribution”代码（/ dist）分开。 “source”代码是我们编写和编辑的代码。 “distribution”代码是我们构建过程的最小化和优化输出，最终将在浏览器中加载。 调整目录结构如下：
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
要将lodash依赖项与index.js捆绑在一起，我们需要在本地安装库：
npm install --save lodash
现在，让我们在脚本中导入lodash：
src/index.js
+ import _ from 'lodash';
+
function component() {
const element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
现在，由于我们将捆绑脚本，因此我们必须更新index.html文件。 让我们删除lodash <script>，因为我们现在导入它，并修改另一个<script>标签来加载bundle，而不是raw / src文件：
dist/index.html
<!doctype html>
<html>
<head>
<title>Getting Started</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
- <script src="./src/index.js"></script>
+ <script src="main.js"></script>
</body>
</html>
在此设置中，index.js明确要求存在lodash，并将其绑定为_（没有全局范围污染）。 通过声明模块需要哪些依赖项，webpack可以使用此信息来构建依赖关系图。 然后，它使用图形生成优化的捆绑包，其中脚本将以正确的顺序执行。
话虽如此，让我们运行npx webpack，它将把src / index.js中的脚本作为入口点，并生成dist / main.js作为输出。 npx命令随Node 8.2 / npm 5.2.0或更高版本一起运行，它运行我们在开头安装的webpack包的webpack二进制文件（./node_modules/.bin/webpack）：
[-@-desktop webpack-demo]$ npx webpack
Hash: 2a9b01c7bc4e0028695c
Version: webpack 4.39.2
Time: 2475ms
Built at: 08/22/2019 11:30:39 AM
Asset Size Chunks Chunk Names
main.js 70.7 KiB 0 [emitted] main
Entrypoint main = main.js
[1] ./src/index.js 222 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
在浏览器中打开index.html，如果一切正常，您应该看到以下文本：‘Hello webpack’。
模块
import 和 export已在ES2015中标准化。 虽然大多数浏览器都不支持它们，但webpack确实支持它们开箱即用.
在幕后，webpack实际上“转换”了代码，以便旧版浏览器也可以运行它。 如果你检查dist / main.js，你可能会看到webpack如何做到这一点，它非常巧妙！ 除了import和export之外，webpack还支持各种其他模块语法，有关详细信息，请参阅模块API。
请注意，webpack不会更改import和export语句以外的任何代码。 如果您正在使用其他ES2015功能，请务必通过webpack的装载系统使用Babel或Bublé等转录器。
使用配置
从版本4开始，webpack不需要任何配置，但大多数项目需要更复杂的设置，这就是webpack支持配置文件的原因。 这比在终端中手动输入大量命令要有效得多，所以让我们创建一个：
project
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
现在，让我们再次运行构建，而不是使用我们的新配置文件：
npx webpack --config webpack.config.js
Hash: e7db6c34d97cd414fb65
Version: webpack 4.39.2
Time: 411ms
Built at: 08/22/2019 1:36:19 PM
Asset Size Chunks Chunk Names
main.js 70.7 KiB 0 [emitted] main
Entrypoint main = main.js
[1] ./src/index.js 222 bytes {0} [built]
[2] (webpack)/buildin/global.js 472 bytes {0} [built]
[3] (webpack)/buildin/module.js 497 bytes {0} [built]
+ 1 hidden module
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
配置文件比简单的CLI使用具有更大的灵活性。 我们可以通过这种方式指定加载器规则，插件，解析选项和许多其他增强功能。 有关详细信息，请参阅配置文档。
NPM脚本
鉴于从CLI运行webpack的本地副本并不是特别有趣，我们可以设置一个小捷径。 让我们通过添加一个npm脚本来调整我们的package.json：
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
+ "test": "echo \"Error: no test specified\" && exit 1",
+ "build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.5"
}
}
现在可以使用npm run build命令代替我们之前使用的npx命令。 请注意，在脚本中，我们可以按照与npx相同的方式引用本地安装的npm包。 此约定是大多数基于npm的项目的标准，因为它允许所有贡献者使用相同的一组公共脚本（如果需要，每个脚本都带有--config标志）。
现在运行以下命令，查看脚本别名是否有效：
npm run build
...
Asset Size Chunks Chunk Names
main.js 70.4 KiB 0 [emitted] main
...
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/.
结论
既然您已经有了基本构建，那么您应该转到下一个指南资源管理，以了解如何使用webpack管理图像和字体等资源。 此时，您的项目应如下所示：
project
扫一扫
319
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
