Webpack 打包文件
自动化构建工具
1.将一些浏览器不支持代码(比如es6,css预编译)编译为浏览器可识别的代码
2.打包压缩js,css代码
3.打包压缩image代码
4打包压缩html代码
5.自动补全css3属性前缀等....
自动化构建工具
webpack (最火 vue脚手架,react脚手架都是基于webpack构建的) gulp grunt
一,webpack
1.安装
cnpm install -g webpack webpack-cli
2.使用
执行webpack命令,webpack工具就会进行打包编译默认情况下webpack会打包执行webpack命令的光标所在目录为标准,打包src目录下的index.js(作为入口文件),最终打包完毕自动生成dist目录下的main.js,我们在页面中引入的是打包后的main.js
默认情况下webpack只可以打包js
3.语法
设置打包环境
webpack --mode=development :开发环境打包,代码不会压缩
webpack --mode=production :生产环境打包,代码会压缩(默认)
二.package.json
包说明管理文件,我们项目依赖的包名字全部存在该文件
1生成
在项目目录下执行npm init, 一路回车
2属性说明
1)添加执行命令
"script":{"build":"webpack --mode=development"}
我们通过运行npm run build ,实际上就是运行package.json中的script内命令
2)添加依赖
"devDependencies":{"webpack":"^5.1.3"}放置打包编译依赖的包
"devpendencies":{"webpack":"^5.1.3"}放置项目依赖的包
安装包需要添加 --save-dev -D
例如 cnpm install webpack --save dev
cnpm install webpack-cli -development 安装包是需要添加 --save
例如 cnpm install jquery --save
三.webpack.config.js
webpack配置文件,执行webpack命令时,webpack会自动跟据该文件的配置进行相关的打包编译操作
1.配置文件必须叫webpack.config.js如果需要修改webpack配置文件名称运行时需要执行config文件 webpack --config webpack.config.my.js
2.搭建本地服务器(webpac-dev-server)用于搭建本地服务器,作用可以自动打开浏览器,监听代码改变自动编译,浏览器热更新等
全局安装cnpm install webpack-dev-server -g
查询是否安装成功 webpack-dev-server --version
运行webpack-dev-server
SPA
webpack.config.js
devServer:{
prot:3007,端口
open:true,自动打开默认浏览器
progress:true设置显示打包过程进度
}
注意:通过webpack-dev-server运行项目,它不会打包生成文件但其实维护了模拟文件,模拟文件可以直接浏览器访问
3.插件(plugins)
loder被用于转化某些类型模块
1)html-webpack-plugin处理html文件,将处理后的html内部自动引入相关打包文件的js和css压缩html
new HtmlWebpackPlugin({
template:'./index.html',模板文件
filename:'index.html'.最后生成的文件
title:'hello world app',指定页面标题
favicon:'./dist/favicon.ico',
minfy:{
removeCommnets:true ,移除html中的注释
collapseWhitespace:true,清除html中标注
minifyCSS:true压缩内联css
}
})
4 loader
loader 让webpack 能够去处理那些非JavaScript 文件(webpack自身 只理解 JavaScript).loader 可以将所有类型的文件转化为webpack 能够处理的有效模块,然后就可以利用webpack的打包能力,对文件进行处理
1)编译css
安装loader :style-loader css-loader
webpack.config.js配置
{
test:/\'css$/,注意:style-loader一定要放前面
use:[
'style-loader',在页面中生成style.
'css-loader',将css代码整合到style内
]
}
2)编译sass/less
安装loader:sass-loader node-sass less-loader less
webpack.config.js 配置
{
test:/\.(c|sc)ss$/,
use:[
'style-loader',
'css-loader',
'sass-loader'
]
}
3)自动补全css3属性前缀(-webkit- -moz-)
安装 loader :postcss-loader 3.0.0
安装插件:autoprefixer 9.8.2
配置
rules:[
{
test:/\.(c|sc)ss$/,
use:[
'style-loader',
'css-loader',
'sass-loader',
{
loader:'pistcss-loader',
options:{
plugins:[require('autoprefixer')]
}
}
]
}
]
package.json配置
"browserslist":[
">02.%",
"last 10 versions"
]
4)抽取css文件
默认cssb被编译在js中的,如果将css 内容单独收取css文件
安装插件 mini-css-extract-plugin 配置
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
plugins:[
new MiniCssExtractPlugin({
将css内容单独抽取成css 文件
filename:'css/main.css'
})
]
rules:[
{
text:/\.(c|sc)ss$/,
use:[
MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
'sass-loader'.
处理sass语法
{
loader:'postcss-loader',
options:{
plugins:[require('autoprefixer)]
}
]
}
]
5).压缩打包后的css
安装插件: optimize-css-assets-webpack-plugin
new OptimizeCssAssetsWebackpackPlugin()
6)编译图片
安装 loader: file-loader url-loader
配置:
rules:[
{处理css中图片,转化为base64编码
test:/\.(jpg|png|gif|svg|jpeg)$i/,
loader:'url-loader',
options:{
限制图片大小500kb
limit:1023*500, 就是让require语法可以正常导入文件资源并且用url-loader进行转化
esModule:fasle
}
}
]
在html页面内引入本地图片路径处理方式
<img width='100' src="<%= require('img/01.jpg')%" alt=" 你好帅">
因为通过html-webpack-plugin插件渲染模板内部的是ejs语法,本地图片路径会当作node的路由去处理
