你好!今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始,随着教程逐渐深入。这一次,我们将学习用ES6 modules进行模块化的基础知识。Webpack 4提供了默认配置,我们会逐步学习。让我们开始吧!
Webpack 4教程开始 - 且慢,什么是Webpack?
在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Type转换为Java。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?
打包的目的
在很久之前,除了使用<>标签,我们没有其他方法把浏览器使用的Java拆分到多个文件。我们需要把用到的每一个Java源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。
ES6 modules
ES6中定义了模块的语法。多亏了它,我们终于有了标准的模块形式,它成为了Java语言规范的一部分。这并不意味着浏览器对此有很好的支持,不过这些正在改进。即使有了ES6模块的原生支持,你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识,让我们简单地看看ES6模块的语法。
export
export 语法被用来创建Java模块。你可以用它来导出对象(包括函数)和原始值(primitive values)。值得注意的是,导出的模块使用了严格模式。导出有两种类型: named 和 default 。
Named导出
在一个模块中,你可以有多个named导出。
1
2
3
4
5
6
7
8
9
10
|
// 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导出。
1
2
3
4
5
6
7
|
// dog.js
export
default
class
Dog {
bark()
{ console.
log
(
'bark!'
);
}
}
imp
|
ort
import 语句用来导入其他模块。
整个导入
1
2
3
4
5
|
// 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 属性上。
1
2
3
4
|
// index.js
import * as Dog from
'./dog.js'
;
const
dog =
new
Dog.
default
();
dog.bark();
|
导入一个或多个named导出
1
2
3
4
5
|
// index.js
import { sum, substract, divide } from
'./lib'
;
console.
log
(sum(1,2));
console.
log
(substract(3,1));
console.
log
(divide(6,3));
|
需要注意,相应的导入导出名字必须匹配。
导入一个default导出
1
2
3
4
|
// index.js
import Dog from
'./dog.js'
;
const
dog =
new
Dog();
dog.bark();
// 'bark!'
|
注意,defualt导出在导入时,可以用任意的名字。所以我们可以这样做:
1
2
3
|
import Cat from
'./dog.js'
;
const
dog =
new
Cat();
dog.bark();
// 'bark!'
|
ES6模块也支持动态导入,我们会在将来的部分讨论到。
可查看MDN关于导出和导入的文档。
Webpack的基本概念
从版本4开始,Webpack不需要任何配置也可使用。它有一组默认值。如果你想要创建一个配置文件,你可将它命名为webpack.config.js。我们现在来效仿它的默认配置,对Webpack相关的基本概念做一些解释。
webpack.config.js
注意,我们使用Node.js环境编写Webpack的配置文件,所以它使用了CommonJS类型的模块。
webpack.config.js导出一个单独的对象。如果你通过命令运行Webpack,它将会去寻找并使用这个文件。
Entry
Webpack需要一个入口起点(entry point)。它指明了Webpack从哪一个模块开始打包。它的默认值如下:
1
2
3
|
module.exports = {
entry:
'./src/index.js'
};
|
它意味着Webpack会找到'./src/index.js'这个文件,从它开始打包。你在index.js中使用的任何导入,Webpack都会处理它们。
你可以有超过一个的入口起点,但对于单页应用(single page applications),它通常只有一个入口。
Output
output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./dist/main.js'。
1
2
3
4
5
6
7
8
9
|
// 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来做它。打开你的终端然后输入:
1
2
|
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。
现在打开package.json文件然后修改它:
1
2
3
|
"s"
: {
"build"
:
"webpack"
}
|
由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。
你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.js和lib.js的所有代码。
多个入口起点
不需要任何配置,就可以实现上面介绍的功能。如果你想做得更多,现在就是时候创建配置文件了。
entries
配置文件里的入口属性,不一定必须是字符串。如果你想要有多个入口,你可以使用一个对象:
1
2
3
4
5
6
|
// webpack.config.js
module.exports = {
entry: {
first:
'./src/one.js'
, second:
'./src/two.js'
}
}
|
利用上面代码,我们创建了两个入口起点。如果你是在开发多页应用(multi-page application),可以需要它。
outputs
这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:
1
2
3
4
5
6
7
8
9
10
11
|
// 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、Wijmo等,如果你还知道其他的,可以在文章下方留言。
总结
今天我们学习了使用Webpack对ES6模块进行打包的基础知识。Webpack4提供了默认的配置,我们在讨论 entry 和 output概念时解释了其中的一部分。当然,Webpack能做的远比这些多。在接下来的教程里,我们会涉及到loaders,甚至我们自己写一个。敬请期待!
关于 葡萄城 :
赋能开发者!葡萄城公司成立于 1980 年,是全球领先的集开发工具、商业智能解决方案、管理系统设计工具于一身的软件和服务提供商。西安葡萄城是其在中国的分支机构,面向全球市场提供软件研发服务,并为中国企业的信息化提供国际先进的开发工具、软件和研发咨询服务。葡萄城的控件和软件产品在国内外屡获殊荣,在全球被数十万家企业、学校和政府机构广泛应用。