一、什么是webpack? 作用有哪些?
webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到javascript模块以及其它的一些不能直接运行的拓展语言(scss\TypeScript等),并将其转换和打包为合适的格式供浏览器使用;
webpack的工作方式是:把你的项目当做一个整体,通过一个给定的入口文件(如:index.js),webpack将从这个文件开始找到你的项目的所有依赖文件,使用loaders处理它们,最后打包为一个(或多个)浏览器可识别的javascript文件。
其实webpack还具备其它强大的功能。比如:
搭建服务器、语法检验、压缩、合并 ......
二、webpack与gulp的区别
webpack和gulp没有什么可比性,gulp是一种能前端工程化的工具,而webpack是一种模块化的解决方案
模块化:就是将复杂的程序细化为小的文件;
好处:(1)命名空间方面,解决了命名冲突问题
(2)复用性高
(3)方便查找对应模块
三、打包流程
webpack是建立在module智商进行打包的
css js img 都叫module模块
![](https://i-blog.csdnimg.cn/blog_migrate/f452a913d3bd01a462c41782518c5be6.png)
流程:
(1)全局安装webpack
cpm install webpack@3.5.3 -g
(2)创建一个文件夹,先初始化项目
npm init -y
作用:将当前的文件夹变成一个node的包
(3)局部安装webpack
cnpm install webpack@3.5.3 --save-dev
(4)创建webpack.config.js配置文件
创建src文件夹 ---开发阶段
创建dis文件夹 ---部署阶段
(5)做配置文件webpack.config.js
<1>引入path模块
![](https://i-blog.csdnimg.cn/blog_migrate/2168072c2b6c04ee9939c7fb738e54ca.png)
<2>定义出口文件路径和入口文件路径
![](https://i-blog.csdnimg.cn/blog_migrate/39d13aca1c30cd5ab6822037d1504dbe.png)
注:入口路径的文件引入其他所依赖的文件。
在index.html只需要引入打包好的app.js文件就可以了
<3>写webpack配置
配置入口文件:
![](https://i-blog.csdnimg.cn/blog_migrate/e4f26612fa1a1017b451b26d88bd2180.png)
配置出口文件:
![](https://i-blog.csdnimg.cn/blog_migrate/ab70f9e3e2d3ebf14b502c5815c83697.png)
注:这里面的name就是入口文件里面的key值,也就是app
filename后面配置的是写入文件的名称
path是配置到的地址
配置处理模块使用的一些loader ---- 转换不同语言
![](https://i-blog.csdnimg.cn/blog_migrate/2abc73b920c63a99929abf29d494c726.png)
注:解析js文件:
test里写正则表达式,来选择要处理的文件类型;
use类似于配置项,里面配置loader,babel-loader---用来解析js的loader
如果遇到了浏览器不识别的语言,则需要配置options,里面配置presets,里面配置@babel/env用来转换es6代码, @babel/react用来转换react代码
解析css文件:
test里面写正则表达式,来处理css或scss文件
use来配置所需loader
下载处理js所需的第三方包:
cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react
下载处理css所需的第三方包:
cnpm install --save-dev style-loader css-loader sass-loader node-sass
插件:html-webpack- plugin -----用来自动在dist之中创建html并在里面自动引入app.js文件
cnpm install html-webpack-plugin --save-dev
下载之后再webpack.config.js配置文件里面引入:
![](https://i-blog.csdnimg.cn/blog_migrate/b335329c5b2420477cab7efe9ff5ef30.png)
然后配置plugins:
![](https://i-blog.csdnimg.cn/blog_migrate/0cd3d1787c86e4289db3b18196c9552f.png)
注:filename 生成的文件名称
template生成所用模版 ---- 这个要自己创建,在大文件夹下。
title 在模版index.html文件中写
![](https://i-blog.csdnimg.cn/blog_migrate/c4249c19c6b4376bc93beb0e4ef3bed4.png)
可以让以这个模版创建的html页面的title都初见配置项里title的内容。
arr可以在模版里面进行逻辑操作:
![](https://i-blog.csdnimg.cn/blog_migrate/cd808f85545ba595f031cb9d2f9e69a7.png)
下载一个服务器插件 -- webpack-dev-server 用来同步刷新页面
cnpm install webpack-dev-server@2 -g
下载之后再package.json里面配置一个指令
![](https://i-blog.csdnimg.cn/blog_migrate/b2692d4e8c19afc8a675e7ca9ea4c5ea.png)
启动: npm run dev 修改代码浏览器页面同步更新。