webpack入门

什么是webpack?

Webpack可以看做是模块打包机：它做的事情是，分析你的项⽬结构，找到JavaScript模块以及其它的⼀些浏览器不能直接运⾏的拓展语⾔（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使⽤。

安装

(前提先安装node环境)

• 全局安装 —不推荐

npm install webpack webpack-cli -g        //  webpack-cli 可以帮助我们在命令里使用npx、webpack等相关指令

webpack -v

\\卸载全局
 npm uninstall webpack webpack-cli -g

- 局部安装 —针对项目安装

npm install webpack webpack-cli -D

• 安装指定版本

npm info webpack   // 查看webpack 历史发布信息

npm install webpack@X.X  webpack-cli -D

webpack -v   //检查是否安装成功

总结：webpack 是⼀个模块打包⼯具，可以识别出引⼊模块的语法 ，早期
的webpack只是个js模块的打包⼯具，现在可以是css，png，vue的模块打
包⼯具。

webpack 配置文件

当我们不设置配置文件时，webpack会走内部默认配置，但那一般都不满足我们的项目需求，所以每个项目都需要根据特定需要去配置webpack。
webpack有默认的配置文件，叫做webpack.config.js，我们可以对这个文件进行个性化配置。
当然我们也可以用自定义的配置文件：

npx webpack --config webpackconfig.js   // 指定webpack使用webpackconfig.js文件来作为配置文件执行

webpack.config.js配置结构

module.exports = {
	entry: './index.js',		//打包入口文件
	output: './dist',			// 输出目录
	mode: 'development',  //打包环境
	module: {
		rules:[
			// loader 模块处理
				{
					test: /\.css$/,
					use: 'style-loader'
				}
			]
	},
	plugins: [new HtmlWebpackPlugin()]  // 插件配置
}

webpack 核心概念

• entry:

指定打包入口文件：webpack执行构建的第一步 将从entry开始，可抽象成输入

//单入口打包
entry: {
	main: './src/index.js'
}
// 简写
entry: './src/index.js'

//多入口   是一个对象
entry: {
	index: './src/index.js',
	login: './src/login.js'
}

• output:

打包转换后的文件输出到磁盘位置： 输出结果，在webpack经过一系列处理并得到最终想要的代码后输出结果。

output: {
	filename: 'bundle.js',   //输出文件的名称
	path: path.resolve(__dirname,"dist")   // 输出文件到磁盘的路径，必须是绝对路径
}，

//  多入口处理
output: {
	filename: '[name].js',   //这里的name 和多入口的配置对应 
	path: path.resolve(__dirname,"dist") 
}

//  这里还有一个点，每次修改文件后，由于浏览器缓存的原因，有时候会导致文件不能及时更新，修改没效果，
//所以这里输出文件可以设置一下hash值
output: {
	filename: '[name]_[chunkhash: 6].js',   //这里的chunkhash 是一个随机的字符串  6表示字符串的位数
	path: path.resolve(__dirname,"dist") 
}

• mode:

mode用来指定打包环境

• production
• development
• none

设置mode可以⾃动触发webpack内置的函数，达到优化的效果

如果没有设置，webpack将mode默认设置为production。
开发阶段的开启会有利于热更新的处理，识别哪个模块变化；
⽣产阶段的开启会有帮助模块压缩，处理副作⽤等⼀些功能。

• loader:
  模块解析，模块转换器，⽤于把模块原内容按照需求转换成新内容。
  webpack是模块打包⼯具，⽽模块不仅仅是js，还可以是css，图⽚或者其
  他格式。
  但是webpack默认只知道如何处理js和JSON模块，那么其他格式的模块处
  理，和处理⽅式就需要loader了。在使用loader的时候记得先npm install xxx-loader -D。

常见的loader

	 - style-loader 
	 - css-loader 
	 - less-loader 
	 - sass-loader
	 -  ts-loader //将Ts转换成js
	 - babel-loader//转换ES6、7等js新特性语法 
	 - file-loader//处理图⽚⼦图 
	 - eslint-loader

module:
模块，在 Webpack ⾥⼀切皆模块，⼀个模块对应着⼀个⽂件。Webpack
会从配置的 Entry 开始递归找出所有依赖的模块。

module:{
	rules:[
		 {
		 test:/\.xxx$/,//指定匹配规则
		 use:{
				 loader: 'xxx-load'//指定使⽤的loader
			 }
		 }
	 ]
}

当webpack处理到不认识的模块时，需要在webpack中的module处进⾏
配置，当检测到是什么格式的模块，使⽤什么loader来处理。

• ⽂件监听:
  轮询判断⽂件的最后编辑时间是否变化，某个⽂件发⽣了变化，并不会⽴
  刻告诉监听者，先缓存起来
  webpack开启监听模式，有两种

//1.启动webpack命令式 带上--watch 参数，启动监听后，需要⼿动刷新浏览器
scripts:{
 "watch":"webpack --watch"
}
//2.在配置⽂件⾥设置 watch:true
watch: true, //默认false,不开启
 //配合watch,只有开启才有作⽤
 watchOptions: {
	 //默认为空，不监听的⽂件或者⽬录，⽀持正则
	 ignored: /node_modules/,
	 
	 //监听到⽂件变化后，等300ms再去执⾏，默认300ms,
	 aggregateTimeout: 300,
	 
	 //判断⽂件是否发⽣变化是通过不停的询问系统指定⽂件有没有变化，默认每秒问1次
	 poll: 1000 //ms
 }

• plugins:

plugin 可以在webpack运⾏到某个阶段的时候，帮你做⼀些事情，类似于
⽣命周期的概念
扩展插件，在 Webpack 构建流程中的特定时机注⼊扩展逻辑来改变构建结
果或做你想要的事情。

• HtmlWebpackPlugin

htmlwebpackplugin会在打包结束后，⾃动⽣成⼀个html⽂件，并把打包
⽣成的js模块引⼊到该html中。插件需要使用npm进行安装

npm install --save-dev html-webpack-plugin

配置：

title: ⽤来⽣成⻚⾯的 title 元素
filename: 输出的 HTML ⽂件名，默认是 index.html,也可以直接配置带 有⼦⽬录。
template: 模板⽂件路径，⽀持加载器，⽐如 html!./index.html
inject: true | ‘head’ | ‘body’ | false ,注⼊所有的资源到特定 的 template 或者templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body元素的底部，‘head’ 将 放置到 head 元素中。 favicon: 添加特定的 favicon 路径到输出的 HTML ⽂件中。
minify: {} | false , 传递 html-minifier 选项给 minify 输出
hash: true | false, 如果为 true, 将添加⼀个唯⼀的 webpack 编译 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache很有⽤。
cache: true | false，如果为 true, 这是默认值，仅仅在⽂件修改之后 才会发布⽂件。
showErrors: true | false, 如果为 true, 这是默认值，错误信息会写 ⼊到 HTML ⻚⾯中
chunks: 允许只添加某些块(⽐如，仅仅 unit test 块)
chunksSortMode: 允许控制块在添加到⻚⾯之前的排序⽅式，⽀持的 值：‘none’ | ‘default’ | {function}-default:‘auto’
excludeChunks:允许跳过某些块，(⽐如，跳过单元测试的块)

WebpackDevServer

提升开发效率的利器，每次改完代码都需要重新打包⼀次，打开浏览器，刷新⼀次，很麻烦，我们可以安装使⽤webpackdevserver来改善这块的体验，启动服务后，会发现dist⽬录没有了，这是因为devServer把打包后的模块，不会放在dist⽬录下，⽽是放到内存中，从⽽提升速度。

 npm install webpack-dev-server -D

修改下package.json

"scripts": {
 	"server": "webpack-dev-server"
 },

在webpack.config.js配置：

devServer: {
	 contentBase: "./dist",
	 open: true,
	 port: 8081
 },

跨域：联调期间，前后端分离，直接获取数据会跨域，上线后我们使⽤nginx转
发，开发期间，webpack就可以搞定这件事，启动⼀个服务器，mock⼀个接⼝：

// npm i express -D
// 创建⼀个server.js 修改scripts "server":"node server.js"
//server.js
const express = require('express')
const app = express()
app.get('/api/info', (req,res)=>{
 res.json({
 name:'开课吧',
 age:5,
 msg:'欢迎来到开课吧学习前端⾼级课程'
 })
})
app.listen('9092')
//node server.js
http://localhost:9092/api/info

项⽬中安装axios⼯具

//npm i axios -D
//index.js
import axios from 'axios'
axios.get('http://localhost:9092/api/info').then(res=>{
 console.log(res)
})

这样会存在跨域问题，修改webpack.config.js 设置服务器代理

proxy: {
	 "/api": {
	 	target: "http://localhost:9092"
	 }
 }

修改index.js

axios.get("/api/info").then(res => {
 console.log(res);
});