Webpack快速上手指南
Posted 前端先锋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webpack快速上手指南相关的知识，希望对你有一定的参考价值。
Webpack用于编译javascript模块。安装以后，可以通过CLI或API使用它。如果你对webpack还有点陌生，可以先看看它的核心概念以及一些比较，了解为什么要使用它。
基本的设置
首先，要创建一个目录，使用npm初始化，然后本地安装webpack：
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack此时的目录结果及其内容如下：
项目目录
webpack-demo
|- package.json
+ |- index.html
+ |- /src
+ |- index.jssrc/index.js
function component() {
var 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
<html>
<head>
<title>Getting Started</title>
<script ></script>
</head>
<body>
<script ></script>
</body>
</html>这里两个<script>标签明显存在依赖关系。index.js文件依赖lodash，后者必须在前者运行之前包含在页面中可index.js里并未声明依赖lodash，它只是假设存在一个全局变量_。
这样管理JavaScript项目存在几个问题：
对脚本是否依赖外部库不能一目了然。
如果依赖未加载，或者未按正确的次序加载，应用会出问题。
如果依赖不再被使用，浏览器仍然要下载不必要的代码。
接下来我们看看怎么使用webpack更合理地管理脚本。
创建打包文件
首先，稍微改一改目录结构，把源代码（/src）从“分发”（distribution）代码（/dist）中分离出来。所谓源代码，就是我们要编写的代码。而分发代码则是通过构建压缩和优化后的输出，也就是最终要由浏览器加载执行的代码。
项目目录
webpack-demo
|- package.json
+ |- /dist
+ |- index.html
- |- index.html
|- /src
|- index.js要把依赖的lodash打包到index.js，需要本地安装这个库：
npm install --save lodash然后在脚本中导入：
src/index.js
+ import _ from 'lodash';
+
function component() {
var element = document.createElement('div');
- // Lodash, currently included via a script, is required for this line to work
+ // Lodash, now imported by this script
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());好，既然接下来要使用打包文件，还得修改index.html。先删掉引用lodash的<script>`标签，再修改另一个`<script>标签，把引用/src中的源文件改成引用打包文件：
dist/index.html
<html>
<head>
<title>Getting Started</title>
- <script ></script>
</head>
<body>
- <script ></script>
+ <script ></script>
</body>
</html>修改后，index.js明确请求lodash并将其绑定为_（不会污染全局作用域）。这样声明了模块的依赖，webpack就可以利用该信息构建一张依赖关系图。然后再根据这张图生成优化的打包文件，而且确保代码的执行顺序。
明白这些后，我们运行webpack，把源脚本作为“入口”，把bundle.js作为输出：
./node_modules/.bin/webpack src/index.js dist/bundle.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]输出结果可能不尽相同，但只要构建成功就没问题。
在浏览器中打开index.html，如果一切顺利，应该可以看到：Hello webpack。
ES2015模块
虽然很多浏览器尚未支持import和export语句，但webpack支持。因为webpack会在后台对它们进行编译，从而保证所有浏览器都可以运行打包文件。看看生成的dist/bundle.js，你会发现webpack都干了什么，很巧妙！
注意，webpack除了import和export语句，什么也不会动。如果你还在源代码里使用了其他ES2015语法，那必须要使用Babel或Bublé等编译器来编译。要了解webpack支持的各种模块语言，请参考Module API。
使用配置文件
多数项目都比前面的示例复杂，因此webpack支持配置文件。配置文件比在终端命令行输入一堆命令更有效率，下面我就看一看怎么用配置文件替代上面使用CLI选项：
项目目录
webpack-demo
|- package.json
+ |- webpack.config.js
|- /dist
|- index.html
|- /src
|- index.jswebpack.config.js
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};接下来再次运行构建命令，但这次指明使用配置文件：
./node_modules/.bin/webpack --config webpack.config.js
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]如果
webpack.config.js存在，webpack默认会使用它。这里使用了--config选项，是为了告诉你可以像这样指定任意名称的配置文件。对于复杂的需要分成多个文件的配置，这个选项就有用了。
配置文件其实远比简单地替代CLI输入灵活。比如可以在配置文件中指定加载器规则、指定插件、解析选项，还有实现其他操作。请参考配置文件了解更多信息。
NPM脚本
显然，像前面那样在CLI中运行本地安装的webpack有点麻烦，那就想办法简化一下在package.json中添加如下npm脚本：
package.json
{
...
"scripts": {
"build": "webpack"
},
...
}这样，只要运行npm run build就相当于运行前面那一大串命令了。看到没，在scripts中，可以直接引用本地安装的npm包（webpack），而无需写出这个包的完整相对路径。这种便利特性是大多数npm项目的标准实现，因此我们可以直接引用webpack，而不用写./node_modules/.bin/webpack。
好，下面就运行在npm脚本中定义的这个命令试试吧：
npm run build
Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 390ms
Asset Size Chunks Chunk Names
bundle.js 544 kB 0 [emitted] [big] main
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 278 bytes {0} [built]在
npm run build后面加两个短线作为分隔，可以给webpack传入自定义参数，比如：npm run build -- --colors。
小结
学会了基本的构建技能，下一步就该晋级学习Asset Management了，其中包括如何使用webpack管理图片和字体等资源。此时此刻，你的项目结构应该是这个样子的：
项目目录
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js
|- /node_modules如果你使用npm 5，那这个目录里还会有一个
package-lock.json文件。
想了解webpack的设计思想？移步到基本概念和配置页面。此外，API详细介绍了webpack提供的各种接口。
往日精选：
小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。
以上是关于Webpack快速上手指南的主要内容，如果未能解决你的问题，请参考以下文章