什么是webpack

前端资源文件
静态资源打包器

构建一个工具，把前端资源文件需要用的所有插件集成为一个工具。
引入所有代码，形成代码块chunk，最有输出文件bundle

webpack的五大部分

entry输入/output输出/loader翻译/plugins/mode:development开发|production生产

webpack初体验

1、需要npm管理 npm init生成package.json
2、npm i webpack webpack-cli -g//全局安装
3、npm i webpack webpack-cli -D//放在开发依赖（—save-dev)
至此项目文件下可以使用ES6module/commentJS规范了，可以实现模块化的根本
4、在根目录建build文件夹/出口
5、在src目录下建index.js/入口文件
6、在index.js中写一段console输出，测试运行指令
7、开发环境：webpack ./src/index.js -o ./build/built.js —mode=development
确定入口，出口，开发环境
注：这个步骤出现了一些概念：哈希值hash、资源asset
8、生产环境：webpack ./src/index.js -o ./build/built.js —mode=production
与开发环境相似，不过生成的是压缩文件，文件比较小
9、webpack可以直接处理的文件js|json文件，不能处理css/img资源

webpack.config.js文件的配置
注：与src项目文件内容不同，webpack是基于node平台支持。模块化默认采用commonjs（module.exports={}导出）
需求：给CSS文件打包
配置文件作用：指示webpack作什么，
1、该文件放在项目根目录与src同级
2、入口
entry:./src/index.js
3、出口
需要使用path路径: const{ resolve}=require(‘path’);//resolve用来拼接绝对路径的方法
output:{
filename:’built.js’,
path:resolve(__dirname,’build’)
},
4、loader配置
module:{
rules:[
{
test:/.css$/,
use:[//先下后上，先右后左，下面可以把css文件变成commonjs模块加载到Js中。上面的可以创建一个style标签，把js中的样式资源插入，再插入到head中。
“style-loader’,
‘css-loader’
}
]
]
}
5、plugins的配置
plugins:[
]
6、mode模式
mode:’development|production’

不同的文件，不同的loader需求

1、less文件//npm i less less-loader -D
‘style-loader’,’css-loader’,less-loader’

打包html资源

1、下载插件，引入插件，使用插件
2、npm i html-webpack-plugin -D//默认创造一个空的html文件，自动打包输出的所有资源
3、const HtmlWebpackPlugin=require(‘html-webpack-plugin’);
4、plugins:[
new HtmlWebpackPlugin({
template:’./src/index.html’
//复制’./src/index.html’文件，并自动引入打包输出的所有资源（js/css)
})
]

打包图片资源

注：图片类型为jpg/png/jpg,大小12k/74k/4k
{
test:/.(jpg|png|git)$/,
//下载 url-loader和file-loader
loader:’url-loader’,
options:{
//图片小雨8KB，就会被base64处理
//优点，减小请求数量
//缺点，图片体积大，请求速度更慢
limit:81024，
注：//默认处理不了html中引用的图片。
//url-loader默认使用es6模块化解析，而html-loader引入图片是common.js，所以解析会报错
//解决办法：关闭url-loader的模块化，使用commonjs解析
esModule:false,//解决html引入的图片问题
//取10位hash和原扩展名
name:’[hash:10].[ext]’,
*注：图片在打包后可能有路径问题，所以要加一个属性，根据你的打包路径进行设置。
publicPath:”../../“
}
}，
{
test:/.html$/,
//下载html-loader
//处理html文件的img图片，负责引入img，从而能被url-loader进行处理
loader:’html-loader’
}

加载其他资源

Iconfont阿里官方下载
icon
1、在html中引入

  1. <span class="iconfont icon-xxx"></span>

module:{
rules:[
{
exclude:/.(css|js|html|less)$/,
//这是排除资源，
loader:’file-loader’
options:{
name:”[hash:10].[ext]”
}
}
]
}