webpack4 教程 - 1. 入口点，出口及ES6的模块

Hello！ 如今咱们开始webpack 4的系列教程。咱们从webpack的基本概念入手，逐步深刻。教程一里咱们学习ES6模块打包的基础知识。Webpack 4 提供了一个默认配置，咱们就拿这个默认配置来进行讲述。开始吧。

Webpack 4 入门 - 那么，Webpack是啥？

在考虑使用任何工具以前，你要问本身一个很重要的问题，即你使用这个工具来解决什么麻烦。Webpack是一个模块打包器（module bundler）。就是说，它的目的是合并多个模块（以及它们的依赖），输出一个或多个文件。除此以外，webpack还能够作好多事情：好比转译文件，把scss转译成css或把typescript转译成javascript，它还甚至能够压缩你的图像文件！但究竟为何你想要打包模块呢？

模块打包的目的

回到从前，咱们除了使用多个<script>标签，没有其它办法来给浏览器划分javascript代码。咱们不得不手动在HTML中写多个源文件。实在不方便。为此社区作了好多努力：CommonJS规范（Node.js实现）和AMD（异步模块定义）规范。有关这些的解读，请查阅Auth0的博客文章。最终，ES6给咱们带来了import/export语法。

ES6模块

在ES6中，定义了有关模块的语法。由此，咱们有了内建于javascript语言规范的标准模块格式。这并不意味着浏览器目前都已经很好的实现了这些规范，但状况变得愈来愈好。即便有了ES6模块的原生支持，你仍可能想要把模块打包成少数几个文件。这份教程的主旨是提供使用webpack的全面信息，为此，咱们先简洁的概览一下ES6模块的语法。

export

export声明用来建立javascript模块。你能用其来导出对象（包括函数）和原始值。值得注意的是老是在严格模式下编写导出模块。导出有两种类型：命名的和默认的。

命名导出

每一个模块能够有多个命名导出。

// lib.js

export function sum(a, b) {
  return a + b;
}

export function substract(a, b) {
  return a - b;
}

function divide(a, b) {
  return a / b;
}

export { divide };

注意，若是你想先声明，后导出，须要用花括弧将其括起来（象上例中的divide函数）

默认导出

每一个模块只能有一个默认导出

// dog.js

export default class Dog {
  bark() {
    console.log('bark!');
  }
}

import

import声明用来从其它模块导入。

将模块总体导入

// index.js

import * as lib from './lib.js';

console.log(lib.sum(1,2));
console.log(lib.substract(3,1));
console.log(lib.divide(6,3));

你能给导入的模块取个名字。若是导入整个模块，而这个模块有default export，则其将被设为default属性。

// index.js

import * as Dog from './dog.js';

const dog = new Dog.default();
dog.bark(); // 'bark!'

导入一个或多个命名的导出

// index.js

import { sum, substract, divide } from './lib';

console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

重要一点就是命名必须相应匹配。

导入默认的导出

// index.js

import Dog from './dog.js';

const dog = new Dog();
dog.bark(); // 'bark!'

注意，默认导出能以任何名字导入，所以咱们能象下面那样：

// index.js

import Cat from './dog.js';

const dog = new Cat();
dog.bark(); // 'bark!'

ES6模块还支持动态导入，咱们将在后面的教程中再去触及。请查阅MDN文档更多的了解exports和inports

（译注：上述有关ES6模块的内容有点简陋，如不熟悉，请先参阅ES6标准入门）

Webpack的基本概念

自版本4开始，webpack提供了一份默认的配置值。若是你想自定义配置，你须要建立一个叫webpack.config.js的配置文件。咱们将模仿默认配置值来说述webpack的基本概念。

webpack.config.js

注意咱们写的webpack的配置文件要应用在Node.js中，所以咱们按CommonJS类型的模块来写（译注：这里是指webpack.config.js这个文件本身自己写成一个CommonJS模块）。
webpack.config.js导出一个单一的对象。若是你在控制台中启动webpack，将加载这个文件来运行。

入口点（Entry）

Webpack须要一个入口点，用于代表打包从哪里开始。默认以下：

// webpack.config.js

module.exports = {
  entry: './src/index.js'
};

其意是指webpack将从'./src/index.js'文件开始打包。若是你在index.js文件中包含了imports声明，webpack就会处理它们。

你可能有多个入口点，但单页应用（SPA），一般只有一个入口点。

出口（Output）

出口配置你打包后的文件输出到哪里。默认值是'./dist/main.js'。

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

运行webpack

这一节的开始，咱们已建立了index.js,它从lib.js中导入了一个函数。让咱们启动webpack！记住把这些文件放到src目录下，使得正好匹配默认的配置。

首先要作的是安装Webpack。咱们将使用npm来安装。打开你的终端并输入：

npm init -y
npm install webpack

（译注：webpack 4 还须要安装webpack-cli，即 npm install webpack-cli, 这是webpack的命令行工具)
这将建立一个叫node_modules的目录，webpack就在其里面，还建立了两个文件：package.json和package-lock.json。

若是你要对npm中的依赖和和package-lock.json有更多的了解，请参看这篇文章 Keeping you dependencies in order when using npm

如今打开package.json,修改你的脚本：

"scripts": {
  "build": "webpack"
}

谢天谢地，运行'npm run build'将从node_modules中启动webpack了。
你会看到在dist目录下建立了一个main.js的文件，它包含了index.js和lib.js的全部内容。

多个入口点

不使用配置文件你也能作到上面所说的。但若是你想作得更多，是时候建立一个配置文件了。

多入口（entries）

配置中的entry属性值不必定要求是字符串。若是你想要配成多个入口点，其值能够为对象。

// webpack.config.js

module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  }
};

上面的代码中，咱们建立了两个入口点。在开发多页应用的时候可能就须要这么干。

（多个）输出（Outputs）

有一个问题：默认只指定一个输出文件，咱们能简单的修补一下：

// webpack.config.js

module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

看上面的代码，咱们指定输出可多于一个文件。全部输出文件都有本身的目标名，这里是first.bundle.js和second.bundle.js,正好与入口点里的名字一一匹配。

小结

今天咱们学习了使用webpack打包ES6模块。Webpack 4 提供了默认配置，据此咱们解释了一些核心概念，诸如入口点和输出。固然，Webpack功能远不止此。后面接下来的教程中，咱们将触及加载器（loaders），甚至本身去写一个。敬请期待！