【译】十五分钟，学习 Webpack

• 原文地址：Learn Webpack in 15 Minutes
• 原文做者：Danny Markov
• 译者：Wpeach

因为 JavaScript 应用程序的复杂性不断增长，构建工具已成为 web 开发中不可或缺的一部分。Bundlers 容许咱们去打包、编译和管理现代 web 项目须要的众多资源文件和依赖库。

在本教程中，咱们将了解 webpack，一个强大的开源打包和预处理器，能够处理大量复杂多样的任务。咱们将向您展现如何去编写 modules， bundle 代码和使用一些 loader 插件。本教程为 webpack 初学者设计的，要求有一些 JavaScript 基础。

为何选择 Webpack？

就像 web 开发的其它方面同样，构建工具的也没有一个标准。如今开发者能够在 Webpack、Gulp、Bowserify、NPM scripts、Grunt 等相似的十余种构建工具。全部这些工具在在底层实现有所不一样，但整体仍是很是类似的，因此大多数时候你能够根据我的喜爱和开发的项目，来选择合适的构建工具。

你能够经过如下优缺点，来判断 webpack 是否合适：

优势：

• 能够很好的用于单页应用
• 同时支持 require() 和 import 模块语法
• 容许很是前沿的 code splitting 特性
• 热加载 可让 React、Vue.js 和其它相似框架的本地开发更快
• 它是《2016 JavaScript 调查》中最受欢迎的构建工具

缺点：

• 不适合 web 开发的初学者
• 对于 CSS、图片和其它非 JS 资源文件时，须要先混淆处理
• 文档能够再优化
• 变化很大，甚至 2016 年的教程都已经算过期了

---

1. 安装

安装 webpack 最简单的方式是经过包管理器。咱们将使用 npm 你也随意使用 Yarn 或其它熟悉的替代。不论是 npm 仍是 Yarn，你都须要现有一个带 Node.js 的运行环境和 package.json 文件再继续。

推荐局部安装（不带 -g 标签），确保每一个人运行你的项目时都是同样的 webpack 版本。

npm install webpack --save-dev
复制代码

一旦咱们安装完，最好经过 Node.js 脚原本运行 webpack，能够在添加如下代码到你的 package.json：

//...
    "scripts": {
        "build": "webpack -p",
        "watch": "webpack --watch"
    },
//...
复制代码

如今咱们能够经过在命令行输入 npm run build 来让 webpack 打包咱们的文件（-p 选项能够压缩生产环境下打包后的代码）。运行 npm run watch 将启动一个进程，当检测到文件更改时，会自动打包咱们的文件。

设置的最后一部分是告诉 webpack 要打包哪些文件，推荐新建立一个配置文件。

2. Webpack 配置文件

在这咱们看一下配置文件最基础的写法，不要被误导 - webpack 配置文件很是强大，在不一样的项目中变化很大，在某些状况下会变得很是复杂。

在你项目的根目录下新增一个名为 webpack.config.js 的文件。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
复制代码

entry 选项告诉webpack哪一个是咱们 Javascript 主文件。配置 entry 有许多不一样的策略，但在大多数状况一个入口就足够了。

在 output 中咱们指定打包的名称和路径。在 webpack 运行完后咱们将把全部 JavaScript 放在一个名为 bundle.js 的文件中，这个惟一的 script 文件能够连接在咱们的 HTML 文件：

<script src="./dist/bundle.js"></script>
复制代码

这个设置足以让咱们开始，稍后咱们会向其添加更多的内容，但首先让咱们先来看看模块是如何工做的。

---

3. Webpack 模块

Webpack 提供了多种使用模块的方法，大多数时候你能够选择一个你喜欢的。 在这个教程中咱们会使用到 ES6 的 import 语法。

咱们想要添加一个模块来迎接咱们的用户，咱们建立一个名为 greeter.js 文件，将它导出为一个简单的函数

greeter.js

function greet() {
    console.log('Have a great day!');
};

export default greet;
复制代码

为了使用这个模块，咱们必须引入它并在 entry 中调用它，你能够在 index.js 中看到配置文件。

index.js

import greet from './greeter.js';

console.log("I'm the entry point");
greet();
复制代码

当咱们 npm run build 运行打包时，在浏览器中打开咱们的 HTML 能够看到：

在咱们的 entry 和 greeter 模块已经编译成一个名为 bundle.js 的文件，且已经在浏览器生效。这是迄今为止发生事情的简单流程图。

4. 须要的库

咱们想要让咱们的应用程序在一周中的某一天问候用户，咱们能够直接在咱们的 greeter 模块引入 moment.js。

首先，咱们须要经过 npm 来安装这个库

npm install moment --save
复制代码

在咱们再次打包更新以后，在浏览器的控制台咱们将收到一下信息：

这时咱们的流程图是这样的：

注意，在引入库时有更高级的用法，不在本文章的范围内，你能够点这了解更多。

---

5.Loaders

Loader 是 webpack 在打包过程当中执行任务对文件进行预处理或后处理的方式。好比它能够编译 TypeScript, 加载 Vue.js 组件，渲染模板等等。大多数 loaders 是社区编写的，受欢迎的 loaders 清单能够看这里

假设咱们想要添加一个 linter 到咱们的项目中去检查咱们 JavaScript 代码的错误。 咱们能够引入 JSHint loader 来实现，它能够捕获各类不良实践和语法错误。

首先咱们须要安装 JSHint 和 webpack 的 JSHint loader:

npm install jshint jshint-loader --save-dev
复制代码

以后咱们须要在 webpack 配置文件中添加一些代码，这将初始化 loader， 告诉它要检查哪些类型的文件，以及忽略哪些文件。

webpack.config.js

var path = require('path');

module.exports = {
  entry: './assets/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  // Add the JSHint loader
  module: {
    rules: [{
      test: /\.js$/, // Run the loader on all .js files
      exclude: /node_modules/, // ignore all files in the node_modules folder
      use: 'jshint-loader'
    }]
  }
};
复制代码

如今当 webpack 启动后，它将在命令行显示一个警告列表(那些咱们所忽略的文件)

由于 moment.js 位于 node_modules 文件中，它不会被 JSHint loader 检测。

延伸阅读

咱们对 webpack 的介绍到此为止。 由于这是一个针对初学者的课程，因此咱们尝试只覆盖最有用和应该知道的 webpack 概念。 咱们但愿这个教程有用，不要太混乱，就像标题所说的在十五分钟内能够消化。

接下来，咱们计划在本教程中添加第二部分，说明如何使用 CSS 模块和其它更高级的功能。在此期间，若是你想要学习更多关于 webpack 的信息（还有更多），咱们推荐你阅读这些很棒的资源

• webpack.js.org - webpack 的官方网站，里面有不少的指南和文档。
• Awesome webpack - webpack 资源汇总
• Webpack Example - 各类webpack配置的列表