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