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"]
		}
	]
}

浏览器的缓存机制

1. 文件名没有改变，默认浏览器会自动缓存这个文件
   第二次第n次去访问网站的时候，浏览器发起http请求会先从缓存列表查询， 如果有直接从缓存中读取，这样加快网页的加载

2. 如果文件内容已经修改，浏览器还使用缓存文件（将会发生不可期的结果）

3. 只有文件内容发生改变，修改下文件名称（文件指纹）通常使用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()
],