webpack概念
把所有文件 经过 webpack 处理,生成 html,css,图片,js
前端静态模块化打包器
webpack打包工具
gulp grunt sea.js require.js webpack依赖webpack.config.js打包
入口 entry 输出output(path:__dirname+"/dist"(__dirname当前目录),filename文件名称)
mode模式:production产品模式 development开发模式
webpack加载器(loader)
css-loader 处理.css文件
style-loader 把css加载到style标签
module:{
rules:[
{"test":/\.css/,loader:["style-loader","css-loader"]}
]
}
处理非js文件
webpack插件(plugins)
在webpack运行过程做打包,压缩,清理
01 安装
npm i html-webpack-plugin
02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
03 使用
plugins:[
new HtmlWebpackPlugin({template:"./public/index.html"})
]
使用
01 安装
npm i html-webpack-plugin
02 导入
const HtmlWebpackPlugin = require("html-webpack-plugin")
03 使用
plugins:[
new HtmlWebpackPlugin({template:"./public/index.html"})
]
html-webpack-plugin
把模板html 插件打包好的js 拷贝到 dist目录
把模板html 插件打包好的js 拷贝到 dist目录
清理 dist目录
clean-webpack-plugin
清理 dist目录
const { CleanWebpackPlugin} = require("clean-webpack-plugin")
const { CleanWebpackPlugin} = require("clean-webpack-plugin")
把css文件抽出为 单独的css文件
{"test":/\.css/,use:[ MiniCssExtractPlugin.loader, "css-loader"]},
mini-css-extract-plugin
把css文件抽出为 单独的css文件
{"test":/\.css/,use:[ MiniCssExtractPlugin.loader, "css-loader"]},
new MiniCssExtractPlugin({
filename: "style-[hash:7].css"
})
new MiniCssExtractPlugin({
filename: "style-[hash:7].css"
})
css优化插件
optimization: { //优化选项
minimizer: [
new CssMinimizerWebpackPlugin() ] // 实现优化
}
css-minimizer-webpack-plugin
css优化插件
optimization: { //优化选项
minimizer: [
new CssMinimizerWebpackPlugin() ] // 实现优化
}
webpack路径别名
resolve:{
alias:{
// 指定@代表当前目录下的src目录
"@":path.resolve(__dirname,"./src")
}
}
devServer 本地服务器
devSever:{
host:"域名",
port:"8080",
hot:"热更新",
open:"是否自动打开浏览器",
proxy:{},//代理
}
package.json
"script":{
"serve":"webpack serve"
}
npm run serve
浏览器缓存的机制提高了2次加载的速度
浏览器get 请求会缓存
如果浏览器第二次请求的地址在缓存中用就使用缓
web hash缓存
如果文件没有发生修改,使用一样名称
如果文件发送修改了,更改生成的文件名
没有发生更改的文件:缓存
修改的文件:更新