Webpack5实战教程
1. 什么是webpack?
简介
- 首先,他是一个工具,就像扳手螺丝刀,等一系列工具.
工具的作用就是让我们更方便,更快捷方便的完成我们想做的事 - webpack的作用是文件打包,好!那么问题又来了,什么是打包?
- “打包”，如何理解？ 假设我们需要寄快递。我们将许多的物品都放进了一个纸皮箱，然后进行封箱。 这就是打包。 对应到前端开发来说，就是将很多的的 css文件，js文件，图片等“物品”，全都写进一个js文件，而不是在一个html页面通过script,link标签去引入多个静态资源。
- 而且我们的这个打包之后,还有更加强大的作用,我们打包的文件,如果版本不合适,我们的工具还可以帮助我们进行调整.
- 总而言之,webpack方便而又强大!!!
- webpack模块化，其实不同的css，不同的js就是一个模块。
比如说，一个index.html,通常会有一个index.css,
一个index.js，还有其他的css，js。
这些不同的文件都可以看做不同的模块。
不同的模块有各自的作用。
总结来说：用这个工具，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。
但是不仅仅如此，它还附加了一些功能。
例如:
1.CSS 预处理。将 Less, Sass 编译成css
2.ES6 语法 转成 ES5
webpack 是一种前端资源构建工具，一个静态模块打包器
2. 学习webpack使用的环境参数
node.js安装
- Nodejs 10版本以上
Node.js安装教程
如果过程中出错可以看评论
webpack安装
- Webpack 4.26版本以上
- 打开cmd命令行
- 输入命令 npm install webpack webpack-cli -g
3. 学习webpack的必备技能
- 基本Nodejs知识和Npm指令
- 操作终端我们需要用到Npm指令
- 熟悉Es6语法
4. 为什么使用webpack
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级JavaScript特性兼容度较低
<link rel='stylesheet' href='./index.less'>无法识别
我们就要使用我们的打包工具,进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。
例如:
将less编译成css，ES6 语法 转成 ES5等等。
5. 如何使用webpack
在VScode中打开终端,
使用npm init初始化
初始化后进行一次命名
后面全部按回车使用默认选项
然后使用npm i webpack webpack-cli -g全局安装
然后使用npm i webpack webpack-cli -D全局安装
6. webpack五个核心概念
- 入口(entry)
-
入口起点(entry point) 指示 webpack 应该
使用哪个模块来作为构建其内部 依赖图(dependency graph) 的开始. -
webpack会从起点文件开始，从起点寻找直接或间接依赖的其它所有的依赖，包括JS、CSS、图片资源等，作为将来打包的原始数据.
默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性来指定一个（或多个）不同的入口起点。例如：
webpack.config.js
module.exports = {
entry: './path/to/my/entry/file.js',
};
- 输出(output)
输出(Output)指示 webpack 打包后的资源
bundles 输出到哪里去，以及如何命名。
出口一般包含两个属性：path和filename。
用来告诉webpack打包的目标文件夹，以及文件的名称。
目的地也可以有多个。
- 加载器(loader)
Loader 让 webpack能够去处理那些非 JavaScript 文 件
webpack本身只识别Js文件，如果要加载非JS文件，
必须指定一些额外的加载器（loader），例如css-loader。
然后将这些文件转为webpack能处理的有效模块，
最后利用webpack的打包能力去处理。
- 插件(plugins)
插件可以扩展webpack的功能，
让webpack不仅仅是完成打包，
甚至各种更复杂的功能，
或者是对打包功能进行优化、压缩，提高效率
- 模式Mode
模式(Mode)指示webpack使用相应模式的配置.
| 选项 | 特点 |
|---|---|
| development | 能让代码本地调试 运行的环境 |
| production | 能让代码优化上线 运行的环境 |
7. webpack初始化配置
创建一个空目录
- 初始化 package.json
输入指令: npm init
环境初始化
- 下载并安装 webpack
自动生成依赖
输入指令:
全局安装 npm install webpack webpack-cli -g
本地安装 npm install webpack webpack-cli -D
8.编译打包应用
- 创建文件
在我们的webpack文件夹内创建一个src目录,
在里面创建一个index.js的文件
打开新终端输入 - 运行指令
开发环境指令：
webpack src/index.js -o build –mode=development
功能：webpack 能够编译打包 js 和 json 文件，
并且能将 es6 的模块化语法转换成 浏览器能识别的语法。
生产环境指令：webpack src/js/index.js -o build –mode=production
功能：在开发配置功能上多一个功能，压缩代码。
- 总结
webpack 能够编译打包 js 和 json 文件。
能将 es6 的模块化语法转换成浏览器能识别的语法。
能压缩代码。
- 留下的问题
不能编译打包 css、img 等文件。
不能将 js 的 es6 基本语法转化为 es5 以下语法。
9.注意!!!
在输入开发环境指令时,如果报错,首要查看打包文件路径!!!
10.每日总结
- 今天对webpack有了一个基本的了解
- 我们知道webpack是一个功能强大的打包工具
- 它能合并打包我们的各种文件
- 并且我们学会了如何使用它,
- 了解到了它的五个核心概念以及对它们的认识.
- 还学会了webpack初始化配置
今日的webpack学习到这里啦!
加油!明天更努力!