webpack使用

1.什么是webpack 参考网站 webpack官网

• 静态模块打包器
• 还能翻译和压缩代码
• 减小代码包体积, 让浏览器更快速打开网页

2.为什么需要webpack

我们在开发一个项目需要引入很多文件，在开发完成后项目文件很大，我们需要将项目文件分析, 翻译, 压缩, 打包,

我们需要用到打包工具打包

 3.webpack使用前准备

1.   webpack依赖Node环境   需要npm或yarn等模块管理工具
2. 步骤 ： 1.创建项目文件夹 （命名要是英文） 2.初始化 npm init 得到.json文件 3.安装webpack 和webpack-cli 两个包 4.在.json 文件中配置scripts 自定义命令 "build": "webpack" 启动命令

 

 4.基本使用 

1.打包两个js文件

1. 新建src/add/add.js 结构

    2.在add.js中写入功能 index.js引入使用 index.js是打包的入口

    3.  使用命令 npm run build 启动打包工具webpack 打包完成后发现多出一个文件夹dist 里面还有一个main.js 文件 里面放的就是压缩后的代码

 

 

 打包关系

 代码变化 重新输入打包命令 

2.如何修改默认出口和入口

我们发现webpack需要有指定的入口 ，出口文件才能执行 如果我们创建的入口文件名称不是指定的文件就会报错

那么我们如何修改入口文件和出口文件？

通过查阅文档 找到webpack配置文件

 

 我们首先需要创建一个webpack.config.js文件在项目的根目录下  将基本配置复制

 

 我们通过entry 修改入口 通过 output 修改出口  

3.我们需要知道运行打包命令后 内部发生了什么?

通过一张图来看

 4.生成html文件 

我们的项目中不只有js文件 还有html文件 那么我们怎样通过打包工具生成html文件？

通过一个案例 隔行变色来解释

准备 一个文件夹(publish) 在文件家中创建html文件 注意文件夹与src同级

 我们需要将index.html放到dist文件夹下 然后手动引入打包后的js文件 就可以

这样虽然可以实现 但我们每次都需要手动引入 有没有什么方法可以自动引入？

如果想实现这样的效果 我们需要借助插件 html-webpack-plugin 

 通过下载包 在webpack.config.js加入配置项 就可以实现

 运行打包命令后 项目文件夹结构与html文件 我们发现dist文件夹下多了一个html文件并且html文件也被打包 还已经自动引入了打包后的js文件 就很方便

 网页效果

 5.如何打包css文件

除了html,js文件外 还有css文件 那webpack是如何处理css文件的？？

目标：通过css去除li的小点

创建一个css文件夹 在下面创建一个index.css文件 里面写css样式

 在index.js中引入css

 运行打包命令 看效果 

 报错！！！！

想想为什么？

因为webpack不认识css文件 

我们需要加载器让他认识css文件

下载 css-loader   style-loader  -D 这两个包 帮助webpack打包css

在webpack.config.js加配置项

 网页效果

 6.如何打包less文件

我们经常将样式写在less文件下 那么webpack又是怎样处理css文件

我们再写less文件时会用到vscode 的插件 自动将less文件转换为css

通过这一点我们想到打包的办法 将less转换为css 再打包css就可以

那么如何将less转换为css文件 我们需要加载器

下载两个包 less   less-loader   -D

webpack.config.js 配置

 网页效果 我给body加了一个黑色背景

 7.如何打包图片

网页中除了文本还有图片 图片怎么打包

我们不需要下载包 webpack给我们内置了

在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

 在css/less/index.less - 把小图片用做背景图

 我们只需要加配置项

网页效果 图片已经出了

 两张图片的区别

小图片是base64格式 大图片是一个路径 指向dits文件

 

 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)

 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)

 8.如何打包字体图标

webpack已经内置 我们只用配置就可以

 引入font文件夹下的css文件 创建i标签 也可以加在html里

 在js中创建i

 网页效果

 8.降级处理

浏览器有时候不认识一些高级语法 比如箭头函数 需要降级处理

写一个箭头函数

 安装三个包-D babel-loader   babel/core   babel/preset-env

写配置项

 效果 将箭头函数转为普通函数

 

9 .webpack-开发服务器

目标：开发时, 快速自动打包查看效果

现在的问题:

每次修改代码, 重新打包, 才能看到最新的效果

实际工作中, 打包非常费时 (10-30s) 之间, 影响开发效率

原因：

1. 构建入口和所有模块依赖关系图

2. 磁盘读取对应的文件到内存, 才能加载

3. 用对应的 loader 进行处理和翻译

4. 将处理完的内容, 输出到磁盘指定文件内

5. 以后代码变化, 从1重新开始

怎么实现

1.下载  webpack-dev-server -D

2.配置自定义命令serve

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

3.开启命令 npm run serve

 给我们一个地址 通过这个地址就可以访问文件

4.我们通过配置开发服务器还可以改变端口号 并且运行后会自动打开浏览器

 

10.webpack-项目打包发布

1. 执行之前的yarn build产生dist目录

   所有代码, 被整合打包

2. 把dist目录交给后台/运维, 部署给客户使用即可

   开发环境的代码不用发