【Webpack】

时间 2021-08-12

标签 javascript html java node webpack es6 web npm 编程 json 栏目 JavaScript 繁體版

原文原文链接

"本质上，Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler).
当Webpack处理应用程序时，他会递归地建立一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将这些模块打包成一个或多个包(bundle).javascript

======== 安装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.html

@java

关于模块化编程

什么是模块化编程？node

模块化编程是一种软件设计技术.webpack

在模块化编程中，开发者将程序分解成离散红能快，并称之为模块.es6

每一个模块具备比完整程序更小的接触面，使得校验、调试、测试垂手可得.
精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每一个模块都具备条理清楚的设计和明确的目的.web

下面来参考一下某项目各个组件的分布结构：

能够看到，不一样的业务逻辑，不一样点的页面内容，应该分隔在不一样的文件(模块)中，这样更加方便往后的调试与维护.npm

- - - - - - - - - - - - - - - - - - - - -
Node.js从一开始就支持模块化编程，然而在web，模块化的支持正缓慢到来.
在web，存在多种支持JavaScript模块化的工具，这些工具各有优点和限制.
Webpack正是从这些工具得到的经验和教训，而将模块的概念应用于项目中的任何文件.
- - - - - - - - - - - - - - - - - - - - -编程

为何使用模块化编程？json

模块化编程使咱们可以把某一类功能组合成一个独立的文件，而后对外提供一个接口，这种方式更加简化了各个业务功能之间的协做关系，方便往后的维护和扩展.

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文件的控制台，查看以下：

好了，咱们就学到这里吧.