-
前端发展史
-
早期阶段
早期前端只负责写静态页面,纯粹的展示功能,js也就是简单的做一些表单的验证,特效渲染等 -
现阶段的Web
前端可以管理数据以及和用户互动。由于用户交互、数据交互的需求增多,也就出现了jQuery
这样的前端工具,再到目前的三大框架Vue、React、Angular
,开发方式也冲原来的js
的ES5
语法到ES6、7、8、9、10
,到Type Script
,包括编写CSS
的预处理器less、scss
等
-
-
webpack到底是干什么的
冲上文的发展史知道现阶段的Web
开发涌现了许多新的开发方式,比如:ES5
语法到ES6、7、8、9、10
,到Type Script
,包括编写CSS
的预处理器less
、scss
等,但是浏览器并不能识别less、sass、scss
等语言,为了兼容浏览器能识别开发者写出的代码就需要将浏览器不能识别的代码转换成浏览器能否识别的代码,webpack
作用就在此,所以webpack
就是一个打包工具,它会分析你的项目结构,找到JavaScript
模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript
等),并将其打包为合适的格式以供浏览器使用。这里附上一个webpack
官网的图片,从这张图片可以形象的说明webpack
的作用 -
webpack官方文档
- 官方文档:webpack.js.org/
- 中文文档:webpack.docschina.org/
- 文档目录说明:
- API:,提供相关的接口,可以自定义编译的过程(比如自定义
loader
和Plugin
可以参考该位置的API
) - CONCEPTS:概念,主要是介绍一些
webpack
的核心概念,比如入口、出口、Loaders、Plugins
等等,但是这里并没有一些对它们解析的详细API; - CONFIGURATION:配置,
webpack
详细的配置选项,都可以在这里查询到,更多的时候是作为查询手册; - LOADERS:
loaders,webpack
的核心之一,常见的loader
都可以在这里查询到用法,比如css-loader、babel-loader、less- loader
等等; - PLUGINS:
plugins,webpack
的核心之一,常见的plugin
都可以在这里查询到用法,比如BannerPlugin、 CleanWebpackPlugin、MiniCssExtractPlugin
等等;
- API:,提供相关的接口,可以自定义编译的过程(比如自定义
-
webpack的依赖
Webpack
的运行是依赖Node环境的,所以我们电脑上必须有Node
环境 -
webpack的安装
webpack
的安装需要安装两个东西,一个是webpack
、还一个是webpack-cli
两者之间的关系是:- 执行
webpack
命令,会执行node_modules
下的.bin
目录下的webpack
- 但是如果没有安装
webpack-cli
执行webpack
命令会报错 webpack-cli
中代码执行时,才是真正利用webpack
进行编译和打包的过程; (使用第三方脚手架生成的项目是没有安装webpack-cli
的,他是利用类似自己的vue-service-cli的东西)webpack
命令打包流程如下:
- 执行
-
webpack的默认打包
默认情况下webpack
打包是将src
文件夹下的index.js
文件作为入口的,所以当前目录没有src
文件夹或者src
文件夹下面没有一个index.js
文件的话会直接报错。然后从入口开始,会生成一个依赖关系图,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、 字体等),然后遍历图结构,打包一个个模块(根据文件的不同使用不同的loader
来解析); 打包成功后会默认在跟目下下生成一个dist
文件夹生成一个main.js
文件,此时将main.js
文件引入到index.html
后那些通过浏览器不能识别的语法书写的代码就能正常执行了比如写一个简单的减价法运算通过commonJS
的方案引入到index.js
示例代码如下 运行结果:-
没有打包之前(直接引入index.js) 会报错,应为浏览器不识别
commonjs
中的require
函数 -
打包之后(引入打包之后的js) 发现能正常运行。
此时可以看一下打包后生成的main.js
文件 发现文件中的代码被压缩丑化了,但是去除了commonjs
语法将所有的关联文件中的代码都堆在一个文件中,但是还是存在一些const
关键字、箭头函数等(这些都是es6
语法,现在比较新的浏览器支持这种语法,但是一些老大的浏览器还是不支持),这里可以通过配置webpack
使用babel
来进行转换和设置。
- 如果直接在终端使用
webpack
命令,此时使用的是全局的webpack
,如果没有安装全局的webpack
即使本地安装了局部的webpack
也会报错找不到命令 - 如果安装了局部的
webpack
想使用本地的webpack
打包此时应该使用的是node_module
文件夹下的.bin
文件夹下的webpack
进行打包,所以可以使用使用./node_modules/.bin/webpack
来调用本地的webpack
- 除了上述方案使用本地
webpack
之外还可以使用npx webpack
命令来使用npx
会直接执行node_modules
下的某一个命令 - 可以在
package.json
添加一个脚本命令如下图 此时就可以直接使用yarn build
,该命令会找到package.json
里面的scripts
里面所创建的build
,然后就会执行里面的命令,而package.json
中的命令会优先去找node_modules
里面的命令,如果node_modules
没有对应的命令则会去找全局的
-
-
webpack的配置文件
在通常情况下,webpack
需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然 是不可以的。我们可以在根目录下创建一个webpack.config.js
文件,来作为webpack
的配置文件:默认webpack
回到根目录下的webpack.config.js
文件中读取配置,如果想更改文件名称可以通过--config
来修改默认的配置文件名称如下图: