Webpack4教程：第一部分，入口、输入和ES6模块 - 好文

转载请注明出处：葡萄城官网 <https://www.grapecity.com.cn/>，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://wanago.io/2018/07/16/webpack-4-course-part-one-entry-output-and-es6-modules/

你好！今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始，随着教程逐渐深入。这一次，我们将学习用ES6
modules进行模块化的基础知识。Webpack 4提供了默认配置，我们会逐步学习。让我们开始吧！

Webpack 4教程开始 - 且慢，什么是Webpack？

在考虑使用任何工具之前，你需要问自己一个非常重要的问题：这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着，它的目的是（根据它们之间的依赖）合并一组模块。它的输出可能是一个或多个文件。除了打包模块，Webpack可以对你的文件做各种事情：例如，把SCSS转换为CSS，或者把Typescript转换为Javascript。它甚至可以压缩你所有的图像文件！但是，你究竟是为什么想要打包它们呢？

打包的目的

在很久之前，除了使用<script>
标签，我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案：CommonJS（在Node.js中实现了）和AMD。
这里 <https://auth0.com/blog/javascript-module-systems-showdown/>
有篇文章是关于它们的介绍。而最终，ES6推出了一套全新的 import/export 语法。

ES6 modules

ES6中定义了模块的语法。多亏了它，我们终于有了标准的模块形式，它成为了JavaScript语言规范的一部分。这并不意味着浏览器对此有很好的支持，不过
这些正在改进
<https://www.contentful.com/blog/2017/04/04/es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling/>
。即使有了ES6模块的原生支持，你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识，让我们简单地看看ES6模块的语法。

export

export语法被用来创建JavaScript模块。你可以用它来导出对象（包括函数）和原始值（primitive
values）。值得注意的是，导出的模块使用了严格模式
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode>
。导出有两种类型：named和default。

Named导出

在一个模块中，你可以有多个named导出。
// 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函数一样。

Default导出

一个模块，只能有一个default导出。
// 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导出的模块，那么default导出的东西将会放在导入对象的一个default属性上。
// index.js import * as Dog from './dog.js'; const dog = new Dog.default();
dog.bark();
导入一个或多个named导出
// index.js import { sum, substract, divide } from './lib'; console.log(sum(1,
2));console.log(substract(3,1)); console.log(divide(6,3));
需要注意，相应的导入导出名字必须匹配。

导入一个default导出
// index.js import Dog from './dog.js'; const dog = new Dog(); dog.bark(); //
'bark!'
注意，defualt导出在导入时，可以用任意的名字。所以我们可以这样做：
import Cat from './dog.js'; const dog = new Cat(); dog.bark(); // 'bark!'
ES6模块也支持动态导入，我们会在将来的部分讨论到。

可查看MDN关于导出
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export>
和导入
<https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import>
的文档。

Webpack的基本概念

从版本4开始，Webpack不需要任何配置也可使用。它有一组默认值。如果你想要创建一个配置文件，你可将它命名为webpack.config.js
。我们现在来效仿它的默认配置，对Webpack相关的基本概念做一些解释。

webpack.config.js

注意，我们使用Node.js环境编写Webpack的配置文件，所以它使用了CommonJS类型的模块。

webpack.config.js导出一个单独的对象。如果你通过命令运行Webpack，它将会去寻找并使用这个文件。

Entry

Webpack需要一个入口起点（entry point）。它指明了Webpack从哪一个模块开始打包。它的默认值如下：
module.exports = { entry: './src/index.js' };
它意味着Webpack会找到'./src/index.js'这个文件，从它开始打包。你在index.js中使用的任何导入，Webpack都会处理它们。

你可以有超过一个的入口起点，但对于单页应用（single page applications），它通常只有一个入口。

Output

output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./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 <https://www.npmjs.com/>来做它。打开你的终端然后输入:
npm init -y nppm install webpack webpack-cli
译者注：截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时，仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。
这样会创建node_modules文件夹，里面包含Webpack。还有两个文件package.json和package-lock.json。
如你想要知道关于package-lock.json和npm中依赖的更多东西，可查看Keeping you dependencies in order
when using npm
<https://wanago.io/2018/05/21/keeping-your-dependencies-in-order-when-using-npm/>
。
现在打开package.json文件然后修改它：
"scripts": { "build": "webpack" }
由于有了上面的修改，运行npm run build将会使用node_modules文件夹下的Webpack。

你可以看到，一个main.js文件在dist文件夹下被创建出来。它包含了来自index.js和lib.js的所有代码。

多个入口起点

不需要任何配置，就可以实现上面介绍的功能。如果你想做得更多，现在就是时候创建配置文件了。

entries

配置文件里的入口属性，不一定必须是字符串。如果你想要有多个入口，你可以使用一个对象：
// webpack.config.js module.exports = { entry: { first: './src/one.js', second:
'./src/two.js' } }
利用上面代码，我们创建了两个入口起点。如果你是在开发多页应用（multi-page application），可以需要它。

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，它会去找webpack.config.js文件，并且使用里面的配置。

Webpack的商业价值

目前为止，能跟上ES6和Webpack脚步的产品并不多，笔者了解的有SpreadJS
<https://www.grapecity.com.cn/developer/spreadjs>、Wijmo
<https://www.grapecity.com.cn/developer/wijmojs>等，如果你还知道其他的，可以在文章下方留言。

总结

今天我们学习了使用Webpack对ES6模块进行打包的基础知识。Webpack4提供了默认的配置，我们在讨论entry和output
概念时解释了其中的一部分。当然，Webpack能做的远比这些多。在接下来的教程里，我们会涉及到loaders，甚至我们自己写一个。敬请期待！

热门工具换一换