Webpack 资源打包工具实战快速入门

本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

---

前言

今天学习的主要是关于什么是前端模块化、组件化开发，什么是 webpack 及其安装，如何应用 webpack 进行打包的理解和应用

---

一、前端模块化、组件化开发初步了解

1.1、什么前端模块化开发

其实很多语言天生就支持模块化：
Java —— import 包
C# ——using 命名空间
可以说：“模块化”是 “传统前端”与“现代前端”最重要标志。
所谓前端模块化，就是把一个相对独立的功能，单独形成一个文件（更多时候封装为 js 文件），可输入指定依赖、输出指定的函数，供外界调用，其它都在内部隐藏实现细节。这样即可方便不同的项目重复使用，也不会对项目造成额外的影响。——js 脚本的模块化组织。
模块的职责：封装实现、暴露接口、声明依赖

前端模块化开发主要的优势：
（1）便于代码的复用、提高可维护性
（2）有很多第三方模块/插件，可以直接导入使用
（3）异步加载 js 模块，避免浏览器假

1.2、前端模块化与组件化区别

与前面讲的封装组件（组件化）有什么区别呢？
组件化更侧重的是对 UI 的封装，模块化侧重的是对实现功能的代码和数据的封装。在组件中一般可去调用模块（js 模块）。

二、webpack 的基本认识

作用：
webpack的作用其实就是将原生的js文件（原生的js文件浏览器不能识别，如下面的main.js和test.js）打包成浏览器可以识别的js文件。像我们平时引入到html的js文件全部都是经过webpack打包过后的文件，浏览器可以直接识别。

总结：
先安装node,然后再进行本地安装webpack和webpackcli,安装完成后在package.json中的生产依赖可以看到安装的版本。
main.js是入口文件，所以其他的js文件都要引入到main.js当中去，然后main.js再引入到html文件中去。
test.js中使用export定义了一个对外的接口,如上所述，所有的js文件都要引入到main.js中去，所以在main.js中使用import接受test.js模块的接口，然后使用webpack命令打包
webpack ./src/main.js -o ./dist/bundle.js
前面的路径是要打包的文件，-o是out输出的意思，后面的路径是你要打包到的路径和文件，文件名（bundle.js）可以自取。
这个命令太长，可以在webpack.config.js文件中配置上面的webpack后面的一系列的代码，entry是要打包的文件，output是你要打包到的路径和文件名。
还有一定要在package.json文件中的script中定义打包命令映射，否则打包命令无法生效。一般的是运行命令是npm run xxx,但是如果映射命令是start就比较特殊，直接npm start就可以了。
然后再html文件中引入打包之后的文件（bundle.js)然后运行就可以再控制台看到test.js文件的输出了。

2.1、webpack 是什么

本质上，webpack 是一个现代 JavaScript 应用程序的静态模
块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

解释：
现代前端开发一般都会基于模块化开发，也就是说我们会把功能相关的 js 代码封装在一个 js 文件里面，就形成一个个 js 模块，然而这些 js 文件浏览器不能直接识别，也就是解释不了，webpack 就能把这些 js 文件打包成一个浏览器能够识别运行的文件，所有的相关依赖模块都会打包到一个文件里面。
参考资料官网：
http://webpack.github.io/ （webpack1.0——过时）
https://www.webpackjs.com/ （中文网，学习这个）

2.2、webpack 的作用

（1）Webpack 核心主要对 js 文件进行打包，打包成浏览器能够识别运行的文件。打包其他的静态资源都需要再安装相应插件/加载器。如下面（2）（3）（4）。
（2）如果要对 png、jpg、css 等文件打包，需要再安装相关插件。打包成一个个静态文件，这样还可以减少页面的请求。
（3）可集成 babel 工具实现 EcmaScript 6（有些浏览器不支持 ES6，比如 IE6\7\8） 规范代码转换成更低版本的（比如 ES5）, 用来兼容绝大多数浏览器。ES6 相对于 ES5 有些非常优异的语法，后面讲解。
（4）可集成模块热加载，当文件代码改变后自动刷新浏览器更新页面。需要再安装相应的插件。

三、webpack 安装

在开始安装之前，请确保安装了 Node.js 。建议使用 Node.js 最新的长期支持版本(LTS - Long Term Support)。

3.1、webpack 全局安装(不建议)

安装在 node.js 的全局环境下，查看全局安装位置：
npm root –g
（1）安装 webpack
<!-- 安装最新版本 @4.42.1 -->
cnpm install --global webpack
<!-- 安装特定版本 -->
cnpm install --global webpack@<version
（2）安装 webpack-cli
如 果 安 装 的 是 webpack v4.0 以 后 版 本 , 还 需 要 安 装
webpack-cli（以前版本集成了） , 才能使用 webpack 的命令，否则 cmd 窗口 webpack 命令没有作用。
cnpm install --global webpack-cli
（3）查看安装的 webpack 版本
webpack –v

官方不建议这种安装，建议本地安装。因为，如果全局安装的话，打包的时候不会把 webpack、webpack-cli 打包进去（webpack 在全局安装目录下），那么当这个项目要移植到其他电脑上的时候，自然就要用其他电脑全局安装的 webpack，而如果其他电脑上全局安装的 webpack 与你项目当初开发时候使用的版本不一致，那么就 可能导致项目构建不成功。而本地安装就是把 webpack、webpack-cli安装到所在项目的目录下，这样移植到任何电脑上都是使用本项目的webpack，自然不会有问题。
另外采用全局安装的话，如果全局安装的 webpack 是 4.0 版本，那么所有用到的 webpack 项目就都要使用 webpack4.0 版本，显得不灵活（当然另外再本地安装也可以）。
所以一般每个项目单独安装 webpack，也就是本地安装

3.2、webpack 本地安装(建议安装)

为了测试本地安装，先把全局安装的 webpack 和webpack-cli 卸载掉。分别执行以下 2 条命令卸载。
npm uninstall -g webpack
npm uninstall -g webpack-cli
进入项目根文件夹（webpack-demo1），输入以下命令：
#初始化项目 -y 是采用默认配置
cnpm init -y
安装 v4.42.0 ，不要少了 v ，开发依赖安装，发布之后不需要:
cnpm i -D [email protected] 【当前最新版本】
# 安装 CLI ，开发依赖安装，发布之后不需要:
cnpm i -D [email protected] 【当前最新版本】

cnpm view webpack version——查看 webpack 的最新版本
cnpm list webpack-cli——查看已安装 webpack-cli 模块信息，含有版本信息。

安装好后，查看下项目下的 package.json 文件，会发现多了下面代码：表示项目对 webpack 和 webpack-cli 产生了依赖，版本分别是 4 以上和 3 以上的
“devDependencies”: {
“webpack”: “^4.42.0”,
“webpack-cli”: “^3.3.11”}

注意：本地安装好了后，直接 webpack –v 是不行的，不能直接使用的。需要在项目下的 package.json 文件中的“scripts”节进行命令映射。
如上在 package.json 文件中命令映射好了后，在命令窗口中需要输入:
npm run showVersion
showVersion 就是映射的别名，但是表示执行的是后面的
webpack-v 命令。

四、webpack 快速入门实操（一）

【默认情况下， 模块化 JS 文件 浏览器不能识别，可通过
webpack 打包后让浏览器识别模块化 JS 文件】
在 上 面 的 webpack-demo1 文 件 夹 下 先 安 装 webpack 及webpack-cli 上面步骤已完成。接下来进行下面的步骤。

4.1、创建目录结构和文件

|-index.html——主页文件【单页面应用唯一的 html 文件】
|-src——存放源文件（项目核心文件）文件夹
	|-main.js——入口文件，其他的相关（js）模块文件都是通过它层层引入
	|-test.js
|-webpack.config.js—webpack 的配置文件，必须放在项目的根目录下
|-dist——打包输出目录
|-package.json——前面初始化项目时已产生（整个项目配置文件）

4.2、编写 test.js 文件（采用模块化编程）

// 在此写模块化代码，用的是 node.js 语法
//模块化编程，导出一个函数，即是提供对外调用的接口
module.exports=function(){
console.log(“大家好，我是 test 模块”)
}

4.3、编写入口文件 main.js 文件(采用模块化编程）

// main.js 为入口文件
//导入模块 test.js,变量 test 就表示模块 test.js
var test=require(‘./test.js’) //扩展名.js 可以省略
//调用 test()实际执行的就是 test.js 中提供对外调用的接口函数
test()

4.4、采用 node 运行下 main.js 文件

在 vscode 环境的左侧右击 src 文件夹——在终端中打开，然后输入 node main.js 即可。
注 意 ：
如 果 右 击 的 是 webpack-demo1 ， 那 么 就 是
node ./src/main.js，主要就是注意 main.js 的路径。如下图所示。运行结果正确，说明，上面编写的 2 个 js 文件没问题

4.5、在主页文件 index.html 引入 main.js（单页面应用就是一个 html文件）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initia
l-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./src/main.js"></script>
</body>
</html>

4.6、运行html页面

访问 index.html , 发现浏览器无法识别 JS 模块化文件，并给出了错误。原因就是因为浏览器无法识别 js 模块化文件，因此需要通过 webpack 对 js 模块文件进行打包并输出一个浏览器能够识别的文件。

如果 webpack 是全局安装，打包输出很简单，只需要在命令窗口中输入下面命令即可。
webpack ./src/main.js -o ./dist/bundle.js
webpack 是打包命令
./src/main.js 是要打包输出的 js 文件
-o 指定为输出（output）
.dist/bundle.js 为打包输出的路径及文件，bundle.js 文件名不是固定，可以自己任意取名。

但是因为采用的是本地安装的 webpack，所以上面报错，不识别 webpack 命令。那怎么办呢？在 package.json 文件中配置命令映射

五、webpack 快速入门实操 （二）

5.1、在 package.json 文件中配置打包命令映射

该文件是整个项目的配置文件，主要知道配置以下几个选项：
scripts: 配置一些需要执行的命令映射
dependencies：生产环境中的依赖
devdependencies： 开发环境中的依赖

5.2、通过映射后的命令执行打包

在 cmd 窗口下执行 npm run build 即可，如：之后可以查看下打包生成后的 bundle.js 文件，这个文件就是浏览器能够识别的文件，是一个压缩后的文件。
控制台的警告提示稍后解决。

5.3、调整主页文件 index.html 的引入文件

前面没有对 js 模块包前引入的是 main.js，由于浏览器对 js 文件不能识别，所以通过 webpack 对 js 文件进行了打包，打包为浏览器能够识别的 bundle.js 文件，此时只要引入该文件即可。

<body>
<!-- 将 index.html 引入的 JS 文件改为打包之后，浏览器可以识别
的 JS 目标文件 -->
<script src="./dist/bundle.js"></script>
</body>

此时再次运行，发现运行正常，看到正确结果:

注意：

（1）如果第 7 步配置命令映射时，如果命令名取“start”，
则在运行时可以省去“run”，也就说 start 是一个特殊的名称
（2）如果 js 文件（如 test.js）有修改，需要用 webapck 重新打包生成输出文件。
（3）上面的黄色警告如何取消，编写 webpack 的配置文件
webpack.config.js，下面黄色底纹代码设置 mode 属性，即可取消警告信息

5.4、编写配置文件webpack.config.js

编 写 webpack 的 配 置 文 件 webpack.config.js — — 这 是
webpack 项目的一个核心文件。该文件除设置 mode 属性之外，还会指定入口文件（要打包的文件）和出口文件（打包后的文件），具体代码编写如下：
//引用 node.js 中的 path 模块，用来处理文件路径
const path=require(“path”);
// 导出一个 webpack 具有特殊属性配置的对象
module.exports={
mode:‘production’,
//指定打包为生产环境 production、开发环境development（不会去压缩打包输出的文件）或者设置 none，表示不去匹配环境
//入口
entry:‘./src/main.js’,
// 入口模块文件路径，指要打包的文件，而且自动会把所有相关依赖的 js 文件全部打包
//出口对象
output:{
// path 必须是一个绝对路径 , __dirname 是当前配置文件
webpack.config.js 的绝对路径。然后与输出目录 dist 拼接成一个决绝对路径，bundle.js 是自己取的，建议一般取这个名字或者 build.js。
path:path.join(__dirname,‘./dist’),
filename:‘bundle.js’ }
}
含义：
读取当前目录下 src 文件夹中的 main.js（入口文件）
内容，把对应的 js 文件打包，打包后的 bundle.js 文件放入当前目录的 dist 文件夹下。该配置文件实质就是导出一个 webpack 具有特殊属性配置的对象。

提问：下面输出位置如何理解？

output:{
    
    
path:__dirname,//指定输出的位置，代表项目根目录，下面默认就是输出在项目根目录，因此可以不写
filename:'build.js' //输出文件名为 build.js，可以自定义的名称(习惯命名为 build.js)。默认就是输出在项目的根目录。然后在index.html 文件下要手动引入该文件。
}

说明：在此 webpack 配置文件中指明了入口文件和出口文件，那么在 package.json 文件中映射别名时的如下代码，就可以去掉后面的入口文件和出口文件，保留一个 webpack 即可。
“start”:"webpack ./src/main.js -o ./dist/bundle.js