初识webpack
webpack 概念
- webpack静态模块打包器
- 当webpack 处理应用程序时,它会递归地构建一个依赖关系围(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle
安装
- webpack依赖node.js,所以确保node.js安装
初始化项目
- 创建一个项目,运行cmd命令
npm init -y
初始化,且都是yes
安装webpack
npm install webpack -D
安装开发环境webpack
简单的构建—使用命令的方式
构建项目
-
在项目文件夹创建
dist文件夹
-
在文件夹下创建
index.html文件
-
在项目文件夹下创建
index.js文件
与header.js文件
-
index.js文件
// 导入header
import {header} from './header.js'
// 插入
document.body.append(header);
- header.js文件
// 创建
var header = document.createElement("div");
// 定义内容
header.innerHTML = "你好,webpack,你好世界";
// 导出
export {header};
使用webpack打包
-
npx webpack index.js
使用webpack打包index.js,生成main.js文件 -
在
index.html
文件中引用main.js
简单构建项目—使用配置文件的方式
创建src文件夹
- 放入
header.js
与index.js
创建配置文件—webpack.config.js
- 在项目根目录创建
webpack.config.js
文件
// 导出配置文件
module.exports = {
// 入口文件index.js
entry : "./src/index.js",
// 出口文件
output : {
// 出口文件名
filename : "main.js",
// 出口路径
// __dirname 当前路径
path : __dirname + "/dist"
}
}
在package.json文件中定义,运行指令
- 这个文件是标准的json文件,末尾不能有逗号,属性必须有双引号,不能注释
- 定义
"start"
命令 "start" : "webpack"
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start" : "webpack"
},
webpack配置
webpack配置文件
-
mode
模式development
开发模式,生成的文件未压缩production
产品模式,生成的文件已经压缩
-
以上,如果需要,不同的命令打印不同的模式文件怎么办?
-
entry
入口文件的路径 -
output
出口文件–这是个对象filename
出口文件名path
出口路径__dirname + "路径"
__dirname当前路径
// 导出配置文件
module.exports = {
// 配置模式
// development 开发模式
// production 产品模式
mode : "development",
// 入口文件index.js
entry : "./src/index.js",
// 出口文件
output : {
// 出口文件名
filename : "main.js",
// 出口路径
// __dirname当前路径
path : __dirname + "/dist"
}
}
package.json 配置
-
如果需要,不同的命令打印不同模式的webpack打包文件怎么办?
-
在package.json文件中定义两个命令,一个是
生产模式
,一个是产品模式
,使用--mode
来定义模式 -
"dev" : "webpack --mode development"
这个是生产模式,使用npm run dev
-
"build" : "webpack --mode production"
这个是产品模式,使用npm run build
-
使用这种时,在webpack配置文件中不能再使用mode了
"scripts": {
"start" : "webpack",
"dev" : "webpack --mode development",
"build" : "webpack --mode production"
},
安装html处理插件
-
npm install --save-dev html-webpack-plugin
-
再webpack配置文件中导入html处理文件
// 导入html处理插件
const htmlWebpackPlugin = require("html-webpack-plugin");
- 创建一个html处理插件并指定模板文件的位置
- 与webpack中的出口,入口,模式,等处在同一层
// 创建一个html处理插件并指定模板文件的位置
plugins : [
new htmlWebpackPlugin({
// 标题,
title : "我是标题",
// 处理html框架的压缩方式
mimify : true, // 能压缩就压缩,能删除就删除,注释,属性,空格等等
// 模板文件的位置
template : __dirname + "/public/index.html"
})
]
配置本地服务器—(等待扩展)
安装—webpack-dev-server
npm i webpack-dev-server -D
安装配置本地服务器的插件
配置本地服务器
- 再webpack配置文件中配置
devServer
与出口,入口,plugin等同级host
配置域名port
端口hot
是否热更新open
是否自动打开浏览器
// 配置本地服务器
devServer : {
// 配置域名
host : "localhost",
// 配置端口
port : "8080",
// 是否热更新
hot : true,
// 是否打开浏览器
open : true
}
配置运行指令
- 再package.json文件中配置运行指令
"名字": "webpack-dev-server"
使用npm run 名字
运行
"serve": "webpack-dev-server --mode development"
处理css—loader
安装
- 安装
css-loader
分析css关系,需要加载哪些css文件 - 安装
style-loader
把css插入到html中的head标签中npm i css-loader style-loader
配置webpack配置文件
module
使用module,与出口,入口,服务器同级rules
规则 数组test
匹配对应的css文件的后缀use : ["style-loader","css-loader"]
使用顺序,从右到左,是一个数组
// 处理css的
module : {
// 规则
rules : [
{
test : /\.css$/,
use : ["style-loader","css-loader"]
}
]
}
loader与plugin的区别
- loader加载器,让webpack有处理非js文件的能力
- plugin插件,在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
压缩和抽取css为单独的文件
安装
- 抽取css文件成为一个单独的文件
npm i mini-css-extract-plugin
- 压缩css压缩的具体方式
npm i optimize-css-assets-webpack-plugin
导入
- 导入抽取css成为单独文件的插件
// 导入压缩与抽取css的插件
const minCssExtractPlugin = require("mimi-css-extract-plugin");
- 导入压缩css的具体方式的插件
// 压缩css
const optimizeCSS = require("optimize-css-assets-webpack-plugin");
使用
使用抽取css成为单独文件的插件
- 再plugins中创建新的实例
// 创建一个html处理插件并指定模板文件的位置
plugins : [
// 创建一个处理css的实例
new minCssExtractPlugin({
// 压缩css之后的出口文件
filename : "style.css",
})
],
- 再module里面的规则使用里面再处理css
// 处理css的
module : {
// 规则
rules : [
{
test : /\.css$/,
// 处理css样式的loder
// minCssExtractPlugin.loader 使用css压缩loader
use : [minCssExtractPlugin.loader,/* "style-loader," */"css-loader"]
// webpack魔法注释
},
]
}
使用压缩css的插件
- 使用压缩器
// 压缩器
optimization: {
minimizer: [ new optimizeCSS()],
},
less 处理less文件
安装 less与less-loader
npm install less less-loader -D
使用
- 创建less文件,写入less语法
- 跟使用处理css语法的一样,再需要使用的地方导入less文件
- 再webpack文件中的module中再次定义一个处理less文件的规则
// 处理css的
module : {
// 处理less文件
{
test : /\.less/,
// 处理css样式的loder
// 顺序从右向左开始
// 先处理less文件,之后处理css,再压缩
use : [minCssExtractPlugin.loader,"css-loader","less-loader"]
}
]
}
浏览器的缓存机制
-
文件名没有改变,默认浏览器会自动缓存这个文件
第二次第n次去访问网站的时候,浏览器发起http请求会先从缓存列表查询, 如果有直接从缓存中读取,这样加快网页的加载 -
如果文件内容已经修改,浏览器还使用缓存文件(将会发生不可期的结果)
-
只有文件内容发生改变,修改下文件名称(文件指纹)通常使用
hash
算法,才能更新
三种hash
hash
只要项目里有文件更改,整个项目构建的hash就会改变contenthash
每次构建后生成的哈希值都不一样chunkhash
内容发生修改,就更改[name]
默认的chunkname[contenthash : 7]
截取7位
使用
- 再导出的出口文件中使用
// 出口文件
output : {
// 出口文件名
// 当内容改变时,得到hash值,取得7位
filename : "main-[contenthash : 7].js",
// 出口路径
path : __dirname + "/dist"
},
// 创建一个处理css的实例
new minCssExtractPlugin({
// 压缩css之后的出口文件
filename : "style-[[contenthash : 7]].css",
})
清除因为改变文件内容,产生的旧的导出文件
安装
npm i clean-webpack-plugin
导入
- 导入方法的方式,因为他不是一个构造函数
// 清理dist目录
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
使用
- 再plugins中,实例化这个方法
plugins:[
new CleanWebpackPlugin()
],