原文: http://106.13.73.98/__/58/
本质上,Webpack是一个现代JavaScript应用程序的==静态模块打包器==(module bundler).
当Webpack处理应用程序时,他会递归地创建一个==依赖关系图==(dependency graph),其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个包(bundle).
======== 安装Webpack =========
·
先创建一个文件夹(如:webpack-demo),进入文件夹后执行安装命令.
安装命令:npm install -g webpack
或者npm install web pack --save
可简写为:npm i -g webpack
·
补充:如果是Mac系统,则需要加上sudo(权限问题,包括本文中后续的所有命令),即:sudo npm install -g webpack
,回车后输入当前用户的密码即可.
·
安装完成以后,我们可以看到,在package.json文件中,已经有Webpack了:
图中安装的webpack-cli
工具可用于在命令行运行Webpack.
@
***
关于模块化编程
什么是模块化编程?
==模块化编程是一种软件设计技术.==
在模块化编程中,开发者将程序分解成离散红能快,并称之为模块.
每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易举.
精心编写的模块提供了可靠的抽象和封装界限,使得应用程序中每个模块都具有条理清楚的设计和明确的目的.
下面来参考一下某项目各个组件的分布结构:
可以看到,不同的业务逻辑,不同点的页面内容,应该分隔在不同的文件(模块)中,这样更加方便日后的调试与维护.
- - - - - - - - - - - - - - - - - - - - -
Node.js从一开始就支持模块化编程,然而在web,模块化的支持正缓慢到来.
在web,存在多种支持JavaScript模块化的工具,这些工具各有优势和限制.
Webpack正是从这些工具获得的经验和教训,而将模块的概念应用于项目中的任何文件.- - - - - - - - - - - - - - - - - - - - -
为什么使用模块化编程?
模块化编程使我们能够把某一类功能组合成一个独立的文件,然后对外提供一个接口,这种方式更加简化了各个业务功能之间的协作关系,方便日后的维护和扩展.
***
Webpack的工作方式
Webpack会把我们的项目当做一个整体,通过一个给定的主文件(如: index.js),Webpack将从这个 给定的主文件 开始找到你的项目的所有依赖文件,使用loaders
处理它们。最后打包成一个或多个浏览器可识别的JavaScript文件.
如下图所示:
***
三个重要的概念
======== ==入口文件== =========
·
入口文件(entry point)指示Webpack应该使用哪个模块来作为构建其内部依赖图的开始.
进入入口起点后,Webpack会找出有哪些模块和库是入口起点(直接和间接)依赖的.
所有的依赖项随即被处理,最后输出到称之为bundles
的文件中.
======== ==出口文件== =========
·
出口文件告诉Webpack在哪里输出它所创建的bundles
,以及如何命名这些文件,默认值为dist
.
基本上,整个应用程序结构都会被编译到你指定的输出路径的文件夹中.
======== ==loader== =========
·loader
使Webpack能够处理那些非JavaScript文件(webpack自身只理解JavaScript).loader
可以将所有类型的文件转换为Webpack能够处理的有效模块,然后我们便可以利用Webpack的打包能力对它们进行处理.
·
本质上,loader
是将所有类型的文件转换为应用程序的依赖图和最终的bundle
能直接引用的模块.
***
使用Webpack创建一个项目
下面,我们使用上面的目录结构,并根据Webpack的上述几个概念,来写一个简单的Demo程序.
首先,我们在webpack-demo
目录下面创建一个src
目录——用于存放我们程序的原始文件(如:src/index.js
).
然后,在webpack-demo
目录下面创建一个index.html
文件——用于使用打包后的出口文件.
新的目录结构如下:
准备就绪之后,我们开始在
index.html
文件中写入最基础的html代码:
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webpack Sample Project</title> </head> <body> <div id='root'> </div> <script src="./dist/main.js"></script> </body> </html>
这些基础代码便是为了引入打包后的js文件,Webpack4默认的输出文件为dist/main.js
然后我们在index.js
文件中写入如下代码:
// index.js let greeting = "Hello Webpack!"; console.log(greeting);
最后,我们将在下面使用Webpack将该项目打包.
***
正式使用Webpack
这里我们将使用Webpack4打包,默认下载的就是Webpack4,Webpack3已基本不再使用了.
(补充:如果是Mac系统,则需要在命令前面加上sudo(权限问题),回车后输入当前用户的密码即可.)
======== 使用Webpacck3打包 =========
·
Webpack3可以在终端使用,基本使用方法(全局安装)如下:web pack {entry file} {destination for bundled file}
·
指定入口文件后,Webpack将自动识别项目所依赖的其它文件.
不过需要注意的是:如果你的Webpack不是全局安装的,那么当你在终端中使用此命令时,需要额外指定其在node_modules中的地址.
·
Webpack3非全局安装的情况下打包:./node_modules/.bin/webpack ./src/index.js destination/bundle.js
======== 使用Webpacck4打包 =========
·
Webpack4增加了模式区分,打包命令如下:webpack --mode development(或production)
指定模式
·
两种模式:development
开发者模式,打包默认不压缩代码.production
生产者模式,上线时使用,会压缩代码,默认为此模式.
·
==Webpack4固定入口目录为src
,入口文件必须为index.js
,打包后文件在新增的dist
目录下,出口文件为main.js
.==
·
开始打包:
打包后可以看到,新的文件结构如下:
然后我们在浏览器中打开index.html
文件的控制台,可以看到如下结果:
***
使用Webpack进行ES6的模块化编程
ES6引入了模块化编程的概念(关于ES6的新增语法,请参考此文献:ES6新增语法详述).
下面,我们继续使用上面的demo程序来测试ES6中的模块化编程.
1.首先,我们在src
目录下新建一个sayhello.js
问价,并加入如下代码:
// sayhello.js let huaqiangu = "您好,花千骨!"; let baiqian = "您好,白浅!"; let jinmi = "您好,锦觅!"; export {huaqiangu, baiqian}; export default jinmi; // 每个文件中只能有一个export default xx, // import会将没有命中的变量名映射到export default导出的数据上面
2.随后,我们在index.js
文件中导入上面创建的sayhello.js
文件:
// index.js let greeting = "Hello Webpack!"; console.log(greeting); // import {huaqiangu, baiqian} from "./sayhello.js"; // 可不写文件后缀名: import {huaqiangu, baiqian} from "./sayhello"; import jm from './sayhello'; console.log('huaxiangu:', huaqiangu); console.log('baiqian:', baiqian); console.log('jm:', jm);
3.最后,我们重新打包项目,并在浏览器中打开index.html
文件的控制台,查看如下:
好了,我们就学到这里吧.