webpack的简介
一、webpack是一个静态打包器 ,他是有五个部分:
- entry(指示webpack以哪一个文件为入口七点进行打包,分析构建内部依赖图)
- output(指定webpack打包后的资源输出到哪里,以及文件的命名)
- loader(让webpack能够去处理非JavaScript的文件,例如css、img等。webpack自身是只能理解js和json文件)
- plugins(用于执行更为广泛的一些任务,包括打包文件的优化和压缩,重新定义环境变量等等)
- development:在本地调试代码的环境
- production:让代码优化线上的运行环境
二、webpack简单运行时的指令
1.首先需要安装webpack
npm i webpack webpack-cli -g
2.在src目录下建立一个index.js作为入口起点文件
运行指令:
开发环境:webpack ./src/index.js -o ./build/build.js --mode=development
webpack以 ./src/index.js为入口文件进行打包,打包后输出到./build/build.js。打包环境是development开发环境。
生产环境:webpack ./src/index.js -o ./build/build.js --mode=production
总结:
webpack可以处理js、json文件但是不能处理css、img等文件。将es6模块化编译成浏览器能识别的模块化。生成环境比开发环境多一个js压缩代码的功能。
三、webpack.config.js 文件代码解析
webpack.config.js 作用是当运行webpack指令时候,指示webpack去加载里面的配置
(所有构件工具都是基于nodejs平台运行的~模块化默认采用的是commonjs)
loader与plugins的区别:
loader需要下载、配置
plugins需要下载,引用,配置
//resolve用来拼接绝对路径
const {reslove} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export={
entry:'./src/index.js', //入口的起点
//输出
output:{
filename: 'build.js' //输出文件名字
// __dirname nodejs的变量,带边当前文件的目录的绝对路径
path: reslove(__dirname,build) //输出路径
},
// loader的配置
module:{
rules:[
// loader的详细配置
{
test: /\.css$/, //匹配哪些文件
// use数组中的loader执行顺序:从右到左,从下到上,依次执行
use:[
'style-loader',//创建style标签,将js的样式资源插入进去,添加到head中生效。
'css-loader'//将css文件变成commonjs模块,加载到js中,里面的内容是样式字符串
]
},
{ test: /\.less$/, //匹配哪些文件
// use数组中的loader执行顺序:从右到左,从下到上,依次执行
use:[
'style-loader',//创建style标签,将js的样式资源插入进去,添加到head中生效。
'css-loader',//将css文件变成commonjs模块,加载到js中,里面的内容是样式字符串
'less-loader'//将less文件编译成css ,需要less-loader less
]
},
{
//图片资源处理
// 问题:处理不了html中的img标签的图片
test: /\.(jpg|png|gif)$/, //匹配哪些图片
// 使用url-loader (需要下载url-loader file-loader)
loader:'url-loader',
options:{
// 优点:减少请求数量(减轻服务器的压力) 缺点:图片体积会更大(造成文件请求速度更慢)
limit: 8*1024, //图片大小大于8Kb,使用图片地址,小于8Kb,使用base64进行处理。 一般图片是设置:8Kb-12Kb
// 问题:因为url-loader默认使用es6模块化进行解析,html-loader引入图片是使用commonjs,
// 从而使img标签的src显示[object module]
// 解决办法:关闭url-loader 的es6模块化,使用commonjs进行解析
esModule:false,
name:'[hash:10].[ext]' //[hash:10]取图片的hash的前10位,[ext]取文件的原来扩展名
}
},
{
//处理html中的img标签的图片(负责引入img,从而能被url-loader进行处理)
test: /\.html$/, //匹配哪些图片
loader:'html-loader'
},
]
},
//plugins的配置
plugins:[
// htmlwebpackPlugin功能:默认会创建一个空的html文件,自动引入打包输出的所有资源(js、css)
new HtmlWebpackPlugin ({ template: './src/index.html' //复制./src/index.html文件,并自动引入打包输出的所有资源(js,css)
})
],
//模式
mode:development
}