1.webpack是什么
webpack是前端静态模块打包工具
主要作用:将(js[es6]/less/json/jpg/png等分块打包)
webpack可以处理js/json文件,不能处理css/img等资源,需要对应的loader来处理。
2.webpack五个核心概念
Entry
webpack以哪个文件为入口开始打包,分析构建内部依赖图
Output
输出Output指示wbpack打包后的资源bundles输出到哪里去
Loader
webpack只能理解javascript和json文件,这是webpack开箱即用的自带能力。loader能让webpack能够去处理类型的模块,并将他们转换成有效模块。
Plugins
相对loader使用范围更广,可以进行打包优化,资源管理,注入环境变量。
Mode
模式:
开发模式(development)
生产模式(production):生产模式会压缩代码
3.常用loader
配置css的loader
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
style-loader作用
创建style标签,将js种的样式资源插入进去,添加到head中生效
css-loader
将css文件变成commonjs模块加载到js中,里面内容都是样式字符串
use中loader的执行顺序是从右向左,从下到上
配置less的loader
// 处理less文件
{
test:/\.less/,
use:[
'style-loader',
// 将css文件转换成commonjs的模块
'css-loader',
// 将less转换成css
'less-loadr'
]}
css兼容性配置
需要使用使用postcss-loader及postcss-preset-env
使用方式:
//webpack.config.js
rules:[
{
test: /\.less/,
use: [
// 'style-loader',
// 将css文件转换成commonjs的模块
MiniCssExtractPlugin.loader,
'css-loader',
// 处理css兼容性
{
loader:'postcss-loader',
options:{
//webpack4写法
// ident:'postcss',
// plugins: () => [
// // postcss的插件
// require('postcss-preset-env')()
// ]
//webpack5写法
postcssOptions:{
plugins:[
['postcss-preset-env']
]
}
}
},
// 将less转换成css
'less-loader',
]
}
]
//package.json
//根据项目情况配置
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
//或者
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.1%",
"not dead",
"not op_mini all"
]
}
配置图片资源
{
test:/\.(jpg|png|gif))$/,
//当只有一个loader时,key用loader,否则用url-loader
loader:'url-loader',
options:{
//图片大小小于10mb时,将转换成base64格式
/*
*base64格式的优缺点
*优点:减少网络请求(减轻服务器压力)
*缺点:图片大小变大(文件请求速度变慢)
*/
limit:10 * 1024,
//关闭url-loader的es6模块化,使用commonjs模块化
esModule:false,
//图片重命名
name:'[hase:10].[ext]'
},
type:'javascript/auto'
},
//处理html中的img图片
{
test:/\.html$/,
loader:'html-loader'
}
webpack5使用url-loader需要配置type:
配置其他资源
iconfont、静态文件等等..
{
exclude: /\.(less|js|png|jpg|gif|less|html|css)$/,
loader: 'file-loader',
options: {
esModule: false,
outputPath:'/iconfont'
},
type: 'javascript/auto'
}
4.plugin
html-webpack-plugin
作用:在指定目录下生成一个html文件并自动引入打包编译好的js及css文件
使用方式:
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[
new htmlWebpackPlugin({})
]
}
mini-css-extract-plugin
作用:将css提取成单独的文件
注意:该插件需要在webpack 5及以上使用
使用方式:
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{
rules:[
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
css-loader
]
}
]
},
plugins:[
new MiniCssExtractPlugin({
//配置文件名
filename:'css/build.css'
})
]
optimize-css-assets-webpack-plugin
作用:压缩css,less文件
使用方式:
const OptimizeCssAssetsWebpackPlugin =
require('optimize-css-assets-webpack-plugin')
plugins:[
new OptimizeCssAssetsWebpackPlugin()
]
css-minimizer-webpack-plugin
作用:就像 optimize-css-assets-webpack-plugin 一样,但在 source maps 和 assets 中使用查询字符串会更加准确,支持缓存和并发模式下运行
示例:
CssMinimizerWebpackPlugin | webpack 中文文档
5.devServer
devServer是开发服务器,用来实现开发自动化(自动化编译,自动打开浏览器,自动刷新浏览器)
devServer:{
// contentBase:resolve(__dirname, './build'),
//打包编译之后文件路径
static:resolve(__dirname, './build'), //webpack5 及以上版本
//启用gzip压缩
compress:true,
//端口号
port:3000,
//是否自动打开浏览器
open:true,
//自动刷新浏览器
hot:true
}