开始使用
Webpack 用于编译Javascript模块。一旦安装，你可以通过wepack的CLI 或者 API 与其进行“互动”。如果你是新手的话， 请看完核心概念，或者这篇理解去了解你为什么你要使用它而不是其他工具。
基础安装
首先创建一个文件夹，并且初始化NPM ，并且局部安装WEBPACK （有关局部安装，请查看 文章2),，再然后安装webpack-cli(这个工具用于命令行运行WEBPACK）：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev
在这篇指南中我们始终使用 diff 代码向你展示文件夹，文件以及代码的变化。
现在我们要创建一下文件夹结构，文件以及文件的内容
project
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.js
src/index.js
function component() {
let 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 以确保我们将包标记为 "私有的(private)"， 最好将main entry 移除。 这样可以避免你的代码被意外发布(到 npm.js 之类的，我想)
如果你想学习更多package.json 的工作原理， 我们推荐你阅读 [npm documentation] (https://docs.npmjs.com/files/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": {}
}
在上面示例中，必须要有依赖项存在于 <scrip> 标签中(位于index.html)， 我们的 index.js 文件依赖于 lodash 才能运行。 然而因为它没有显式地声明对lodash地需求；它只是确保全局变量 _ 的存在（index.js）。
使用这个方式管理Javascript项目会引发一下问题。
- 对于哪段脚本需要哪段外部库，显示不够直观。
- 如果一个依赖丢失，或者以错误的顺序引入，程序不能正常运行。
3.如果一个依赖被包含，但是并没有被使用，浏览器会强制下载不需要的代码。
webpack 可以有效解决以上问题。
创建一个 bundle
首先我们需要稍稍调整目录结构， 将 source code(/src) 从 distribution code(/dist)中分离出来。 "source" code 是我们即将要编辑的代码， 而 "distribution" code 是我们最小化并且优化后的输出代码，用以被浏览器加载。
project
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js
如果要对index.js 绑定 lodash 依赖项， 我们需要局部安装这个库。
npm install --save lodash
当安装一个用于构建你产品的包的时候，你需要使用 "npm install --save"。如果你安装用于开发意图的包，(例如 linter, testing libraries, ..) ，则可以使用 "npm install --save-dev". 更多资讯请查阅 (npm document)[https://docs.npmjs.com/cli/install](国内可能无法访问）
现在可以将 lodash 引入我们的脚本：
+ import _ from 'lodash';
+
function component() {
let 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> 标签以加载我们的生成后的包， 而不是原始的 /src 文件：
<!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 命令（在node8.2/npm5.2.0 以及更高版本的包中被携带)，会运行webpack 二进制包(./node_modules/.bin/webpack) ：
npx webpack
...
Built at: 13/06/2018 11:52:07
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/concepts/mode/
你的控制台输出可能会有一些不符， 但是如果构建是成功的那么你则不必理会。同时，不需要关系那些 warning， 我们稍后会处理掉它。
开打 index.html ，如果一切顺利，你应该能看到以下文字：'Hello webpack'
Modules
import 和 export 语句已经被 es2015标准化。 虽然他们还不能被大多数浏览器支持， 但是webpack 已经支持了。
前面的场景，webpack 已经 "transpiles" （translate + compile） 了代码所以他们可以被更老的浏览器支持。 如果你观察 dist/main.js， 你可能看到webpack 是如何做到这一点的，这真是天才了！ 除了 import 和 export ，wepack 支持很多其他的模块引入方法， 详情请查阅 (Module API) [https://webpack.js.org/api/module-methods]
注意webpack 实际上并没有更改代码 除了 import 和 export 语句。 如果你是使用 ES2015特性的话，确保使用一个转译器（transpiler），例如 babel 或者 Buble，详情请查阅 webpack的 loader system
使用配置文件
在版本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
...
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/concepts/mode/
如果webpack.config.js 出现，webpack命令会直接使用它。我们使用 --config 选项只是告诉你，你可以传入一个任何名称的配置文件而已。这一点会非常有用，当配置文件变得复杂的时候，我们需要将他切割为很多块。
配置文件提供了更多比CLI 更快捷的东西。 我们可以使用这个方法指定 loader, rules, plugins, resolve options 以及 其他增强方法。
NPM Scripts
从 webpack CLI 运行本地webpack是一件不是特别有趣的事情，我们可以设置一个快捷方式。 现在来对比一下添加npm script 之后的 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"
}
}
from now on， run run build 命令可以代替我们之前使用过的 npx 命令。注意 在 scripts中，我们使用它们的名字去引用其他局部安装后的npm packages，就像我们之前对npx做的一样。 这个方便的东西是在大多数基于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/concepts/mode/.
在npm run build 后面添加2个dashes，后面紧跟着你的参数，可以将自定义参数传入webpack。 例如： num run build -- --colors.
结论
现在你已经可以构建基本的包了，现在你应该移步到下一个篇指南[Asset Management] ，学习如果使用webpack管理资源，像是 images 以及 fonts 。目前，你的项目应该看起来是这个样子的
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- main.js
|- index.html
|- /src
|- index.js
|- /node_modules
如果你在使用npm5, 你应该会同时看到一个package-lock.json 文件在你的目录中。
如果想了解更多关于webpack的设计， 你可以留意basic concepts,以及configuration页面，亦或者，API章节将深入理解非常多webpack 提供的接口。
网友评论