webpack打包工具
1,webpack的介绍
webpack,gulp,grunt都是打包工具,它们区别
webpack打包图片,样式,资源,总结一句话:他就是一个打包工具
1.1,为什么要用打包工具
1,打包
减少http请求次数
解决文件的依赖
2,可以进行转换
通过各种loader把浏览器不认识的转成认识的
3, 前端的优化
代码的压缩,图片的压缩
4,可以开发(搭建)服务器
1.2,webpack的版本
webpack4.x
1.3webpack相关知识
Entry:入口文件
Output:出口文件
Loaders:转换器
Plugins:插件
Mode:模式(环境配置(生产环境,开发环境))
devServer:开发的服务器
Browser compatibility:浏览器兼容
2,webpack的安装
2.1,确保有node环境
2.2,准备一个项目
src:
前端代码
dist:
打包后的文件
packa.json
webpack.config.js webpack的配置文件
2.3 安装webpack
先全局安装,再局部安装
npm i webpack -cli -g
验证是否安装成功
webpack -v
局部安装
npm i webpack webpack-cli -D
3,webpack的使用
node自带了path模块
__dirname:当前文件的目录(绝对路径)
webpack.config.js名字能不能改
能:webpack --config xxx.config.js
自定义执行的指令
package.json
3.2mode
production:生产环境 会压缩文件,类似console.log这样的调试代码
development:开发环境
3.3entry
1,当配置文件不写entry 的时候,默认会找 ‘./src/index.js’
2,在webpack 里,entry后面可以跟
字符串 一个js文件
array 可以放多个js文件地址,默认会合并成一个文件
json对象(做多页面应用时,才会使用)
3.4 plugins插件
关于html的插件,默认不会打包HTML,需要一个插件
html-webpack-plugin
1,下载
npm i html-webpack-plugin -D
2,引入插件
const htmlwebpackplugin=require(“html-webpack-plugin”)
3,使用插件(配置)
plugins :[
new htmlwebpackplugin()
]
注:htmlwebpackplugin 此插件,把output输出的js,加入到html’中
默认只会打包一个html文件,如果js文件有多个,会生成多个script标签