webpack打包工具基本介绍及使用

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标签

展开阅读全文
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值