webpack学习
1.webpack构成
//webpack.config.js配置文件
//普通页面js文件中使用的是es6等语法
//但是webpack.config.js面向的是node 所以得用nodeJs中的commonJS语法
//所以使用 module.exports = {}
//引入nodejs中的path模块 用来拼接绝对路径
const { resolve } = require("path")
module.exports = {
//1.入口文件
entry: './src/index.js',
//2.输出
output: {
filename: 'main.js',
//__dirname 是nodejs的变量,代表当前文件的目录绝对路径 E:\WorkSpace\test\页面测试\
path:resolve(__dirname,'build')//E:\WorkSpace\test\页面测试\build
},
//3.loader配置
module: {
rules: [
{
//进行正则匹配,匹配所有以.css结尾的文件
test: /\.css$/,
//打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
use: [
//创建style标签内,将js里的样式资源插入到head中
'style-loader',
//将css文件变成commonJs模块加载到js中,里面的内容是字符串
'css-loader'
]
}
]
},
//4.插件配置
plugins: [],
//5.项目打包模式 development开发环境 productio生产环境
mode:'development'
}
注意:当要使用多个loader时使用use:[" “,” "],但是只有一个loader时可以直接用 loader:'url-loader’
2.webpack执行顺序
(1)从入口文件开始,在入口文件中找到其中引入的模块,例如下图中找到本身和index.css文件,
(2)将找到的这些文件与loader的规则进行正则匹配,将匹配到的文件使用对应的加载器进行逐步解析
(3)将解析的内容放到对应的出口文件中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQh8wvfy-1606808598706)(./img/1604556709373.png)]
3.webpack打包css less sass 资源
3.1普通打包
(1).css资源只需要下载css-loader和style-loader即可
(2).less资源打包需下载 less、less-loader、css-loader、style-loader
(3).sass资源打包需下载sass、sass-loader、css-loader、style-loader
//loader配置
module: {
rules: [
{
//进行正则匹配,匹配所有以.css结尾的文件
test: /\.css$/,
//打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
use: [
//创建style标签内,将js里的样式资源插入到head中
'style-loader',
//将css文件变成commonJs模块加载到js中,里面的内容是字符串
'css-loader'
]
},
{
//进行正则匹配,匹配所有以.less结尾的文件
test: /\.less$/,
//打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
use: [
//创建style标签内,将js里的样式资源插入到head中
'style-loader',
//将css文件变成commonJs模块加载到js中,里面的内容是字符串
'css-loader',
//将less语法转化成css的语法 需要下载less和less-loader加载器
'less-loader'
]
}
]
},
3.2.使用postcss-loader对css进行浏览器适配
(1)下载postcss-loader以及postcss-preset-env
(2)在package.json中添加browserslist配置项
(3)设置当前node的开发环境(默认为生产环境),使得其根据环境选择browserslist指定的css兼容性,
//设置环境变量 使得postcss-loader去找package.json中的browserslist的开发环境兼容性
process.env.NODE_ENV = "development";
//在module.exports = {}上面
以下是两种配置方式:
(1)直接在webpack.config.js文件中配置
{
//进行正则匹配,匹配所有以.css结尾的文件
test: /\.css$/,
//打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
use: [
//创建style标签内,将js里的样式资源插入到head中
//'style-loader',
//取代style-loader将本来要放在头部的css样式放到单独的css文件中
MiniCssExtractPlugin.loader,
//将css文件变成commonJs模块加载到js中,里面的内容是字符串
'css-loader',
{
loader: "postcss-loader",
options: {
postcssOptions:{
plugins:[
[
'postcss-preset-env',
{ident:'postcss'}
]
]
}
}
}
]
},
(2)新建postcss.config.js文件配置(与webpack.config.js同级)
module.exports = {
plugins: [
[
'postcss-preset-env',
{
ident: "postcss"
},
],
],
}
{
//进行正则匹配,匹配所有以.css结尾的文件
test: /\.css$/,
//打包文件时使用的loader 有执行顺序之分 use数组从后向前执行
use: [
//创建style标签内,将js里的样式资源插入到head中
//'style-loader',
//取代style-loader将本来要放在头部的css样式放到单独的css文件中
MiniCssExtractPlugin.loader,
//将css文件变成commonJs模块加载到js中,里面的内容是字符串
'css-loader',
'postcss-loader'
]
},
4.webpack打包html资源
插件的使用方法:1.下载 2.引用 3.使用
**(1)下载:**html资源的打包需要使用插件而不是loader,下载html-webpack-plugin插件
//插件下载:webpack5:npm i html-webpack-plugin@next -D
// webpack4:npm i html-webpack-plugin -D
(2)引入:
const HtmlWebpackPlugin = require('html-webpack-plugin')
(3)使用
//插件配置
plugins: [
//html-webpack-plugin
//功能:默认创建一个空的html文件 并自动在head引入打包输出的js/css文件
//此处根据需求可以打包出多个html文件
new HtmlWebpackPlugin({
filename:'index2.html' //打包后的名称 默认为index.html
}),
new HtmlWebpackPlugin({
//复制一份该路径下的index.html文件,并且仍然自动引入打包好的js css文件
template: './src/index.html',
})
],
5.webpack打包图片资源
图片资源主要分为两类:1.css里的图片路径 2.html页面中的图片路径,
所以对图片资源的打包也分两种方式:
对css文件中图片打包:
(1)下载对应的加载器:file-loader、url-loader
(2)配置loader规则
{
//该加载器只能打包css文件里的图片,不能处理html页面上的img标签图片
test: /\.(jpg|png|gif)$/,
//虽然只用一个loader 但是url-loader是依赖于file-loader的 所以需要下载两个 url-loader、file-loader
loader: 'url-loader',
options: {
//小于8kb的图片将被转化成base64格式
limit: 8 * 1024,
//esModule: false
//只取hash值的前十位作为图片名称
name:'[hash:10].[ext]'
},
},
对html文件中图片打包:
(1)下载对应的加载器:html-loader
(2)配置loader规则
{
//该加载器处理的是页面上的img标签中的图片
test: /\.html$/,
loader:'html-loader'
}
注意:
(1)webpack4中使用这两个规则时需要在url-loader的options中加入esModule: false,将他的解析方式由es6转换成commonJs,这样html-loader才能读懂,否则会报错;
(2)webpack5中使用这两个规则则需要在output中加入配置项publicPath:’./'
6.webpack-dev-server的使用
(1)下载webpack-dev-server :npm i webpack-dev-server -D
注意:在安装之前你得先在本地安装webpack-cli
(2)配置:添加devServer属性(和entry、output等参数同级)
devServer: {
//特点:只会在内存中编译打包,没有任何输出,不会影响到磁盘文件中的dist文件夹
//读取的文件来源,此时拿到的是打包后的文件
contentBase: resolve(__dirname, 'dist'),
//使用gzip压缩
compress: true,
//端口号
port: 3000,
//是否立即打开
open:true
}
(3)执行启动命令:npx webpack-dev-server
注意:
在普通使用webpack打包时output中的publicPath是**./,但是在启动devserver时,由于其读取的直接是内存中的文件,所以不能使用./,若是使用./则此时读取的还是本地磁盘的dist**文件夹内容,此时页面不会随着修改自动刷新,所以得改成 /
7.打包后清除无用的资源
(1)安装插件:npm i clean-webpack-plugin -D
(2)引入
//此时的版本为 "clean-webpack-plugin": "^3.0.0",
//它各个版本的使用方法有差异 注意看官网
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
(3)使用:
plugins: [
new CleanWebpackPlugin(),
],
附件:pachage.json
{
"name": "study1",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.2.1",
"postcss-loader": "^4.0.4",
"postcss-preset-env": "^6.7.0",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}