【前端】webpack一本通

今日更新完毕，不定期补充，建议关注收藏点赞。

简介

官网

• webpack作用（自动整合压缩并剔除无用代码）
  减少文件数量、缩小代码体积、提高浏览器打开速度
• webpack定义
  一个第三方模块包, 用于分析, 并打包代码
  支持所有类型文件的打包
  支持less/sass => css
  支持ES6/7/8 => ES5
  压缩代码, 提高加载速度
  
  webpack基于node, 所以导出遵守CommonJS规范
• 安装

1. 初始化文件夹包环境, 得到package.json文件
2. 下载webpack等模块包
3. 在package.json自定义命令, 为打包做准备

yarn init
yarn add webpack webpack-cli -D

#在配置文件中 配置自定义命令 
scripts: {
	"build": "webpack"
}

使用

1. 默认src/index.js – 打包入口文件
2. 引入到入口的文件才会参与打包
3. 上述配置文件中的自定义命令，使得：执行package.json里build命令则执行webpack打包命令
4. 默认输出dist/main.js的打包结果
5. 借助webpack, 把模块和代码打包后，需要将打包结果引入到项目中生效。不希望“手动引入”这么麻烦的，可以安装html-webpack-plugin插件。其使用方法见后。

• 更改webpack打包默认的入口和出口
  新建webpack.config.js
  填入配置，entry设置为入口文件路径，output对象设置出口路径和文件名
  打包观察效果
  
• 例子：webpack打包代码–jquery实现功能
  注意：webpack打包后的js需要引入到html中使用才能生效
  步骤：
  ①：从0准备环境, 初始化包环境, 下载webpack和webpack-cli包, 配置自定义命令build
  ②：yarn下载jquery, 新建public/index.html,写入内容
  ③：src/main.js 引入jquery, 编写功能代码
  ④：执行打包命令
  ⑤：复制public/index.html到dist/, 然后引入打包后的js, 运行网页观察效果

webpack默认只能处理js文件 ->引入加载器

• 处理css文件
  css文件引入到入口里，webpack打包css文件依然会报错。如何让webpack能处理css文件：使用下面的两个加载器
  css-loader 文档
  style-loader文档
  css-loader 让webpack能处理css类型文件
  style-loader 把css插入到DOM中

1. 下载加载器

yarn add css-loader style-loader -D

2. webpack.config.js配置

module.exports={
	//其他配置 这里略
	module:{
		rules:[{
				test:/\.css$/i, //i 忽略大小写
				use:["style-loader","css-loader"]	
		}]
	}
}

3. 打包观察效果：css代码被打包进js文件中，style-loader会把css代码插入到head下style标签内

• 处理less文件
  加载器使用less-loader
  less-loader加载器作用: 识别less文件
  less作用：将less编译为css

yarn add less less-loader -D

//配置
	module:{
		rules:[
		//其他配置略
		{
			test:/\.less$/,
			use:["style-loader","css-loader","less-loader"]	
		}]
	}

步骤：新建src/less/index.less,把index.less引入到入口处,下载加载器和less来处理less文件,webpack.config.js针对less配置，（打包）转换成css后还需要css-loader和style-loader的处理。

• 处理字体文件、图片文件
  webpack5, 使用asset module技术实现字体文件和图片文件处理, 无需配置额外loader，文档: https://webpack.docschina.org/guides/asset-modules/
  以前用url-loader和file-loader来处理
  现在webpack.config.js – 针对图片文件设置type: “assets“，然后打包，小于8KB文件则转base64打包在js中, 大于8KB, 文件自动命名输出到dist下；字体和图片文件同理。

//配置
	module:{
		rules:[
		//其他配置略
		{
			test:/\.(png|jpg|gif|jpeg)$/i,
			type:'asset'
		}]
	}

为什么要区分8kb上下？
图片翻译成了base64, 放到了js文件中
-好处: 浏览器不用发请求了，直接可以读取, 速度快
-坏处: 图片太大，再转base64就会让图片的体积增大 30% 左右, 得不偿失

• 处理字体图标
  • 注意：字体图标 v.s. 字体文件
    字体文件 和 字体图标（icon fonts） 是两个相关但不完全一样的东西。

4. 字体文件，用于文本显示。常见格式包括：
   .ttf（TrueType Font）
   .otf（OpenType Font）
   .woff / .woff2（Web Open Font Format）
   .eot（Embedded OpenType）
5. 字体图标（Icon Fonts）将图标图形设计成字体的形式，用 CSS 和 HTML 字符来显示图标。
   典型例子：Font Awesome、iconfont 阿里巴巴、Material Icons (Google)
   它们通常包含以下资源：
   字体文件（.woff, .ttf, .eot, .svg）
   一个 style.css 或 iconfont.css，映射图标 class 到字体字符，通过字体的形式显示图标，比如 <i class="icon-home"></i> 就能显示一个小房子图标。

.icon-home:before {
  content: "\e600";
}

• 如何处理字体图标

1. src/assets 下 放入fonts字体相关文件夹
2. src/main.js 引入 assets/fonts/iconfont.css import '@iconfont/iconfont.css';
3. src/main.js 创建一个i标签, 使用字体图标标签添加到body上;或者html中使用图标<i class="icon-home"></i>
4. 添加针对字体文件的加载器规则, 使用asset/resource(直接输出文件并配置路径)

const path = require('path');

module.exports = {
 // 其他配置...
 module: {
   rules: [
     // 处理字体图标文件
     {
       test: /\.(woff2?|eot|ttf|otf|svg)$/,
       type: 'asset', //或asset/resource,
       generator: {
         filename: 'fonts/[hash][ext][query]', // 输出路径
       },
     },
//其他配置略...
   ],
 },
};

5. 打包后运行网页观察效果：在webpack.configjs的rules里针对字体图标文件类型设置asset/resource, 直接输出到dist下

对JS语法降级，兼容低版本语法

babel: 一个javascript编译器, 把高版本js语法降级处理输出兼容的低版本语法
babel-loader: 可以让webpack转译打包的js代码
babel官网: https://www.babeljs.cn/
babel-loader文档: https://webpack.docschina.org/loaders/babel-loader/

1. 在src/main.js – 定义箭头函数, 并打印箭头函数变量 (千万不能调用, 为了让webpack打包函数, 看降级效果)
2. 下载加载器

yarn add babel-loader @babel/core @babel/preset-env -D

3. 配置到webpack.config.js上

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude:/(node_modules|bower_components)/,
        use:{
			loader:'babel-loader',
			options:{
				presets:['@babel/preset-env']
			}
		}
      },
//其他配置略...
    ],
  },
};

4. 打包观察是否降级

合并文件

• 2个js文件 ->打包成1个js文件
  新建src下的资源：add.js – 定义求和函数并导出，index.js – 引入add模块并使用函数输出结果
  执行 yarn build 自定义命令, 进行打包 (确保终端路径在src的父级文件夹)
  打包后默认生成dist和dist/main.js, 观察其中代码

再次打包

• 代码增加后, 如何打包呢?

1. 确保在src/index.js引入和使用
2. 重新执行yarn build打包命令

进阶

• 把css文件都独立打包提取成一个css文件在dist下
• 把vue文件让webpack打包使用(百度vue-loader官网)

工作原理

• yarn build
  所有要被打包的资源都要跟入口产生直接/间接的引用关系
  

html-webpack-plugin插件

文档

yarn add html-webpack-plugin -D #下载

webpack.config.js中添加配置

const HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
	//其他配置 这里略
	plugins:[
		new HtmlWebpackPlugin({
			template:'./public/index.html' //webpack打包时自动生成html文件
		})
	]
}

webpack开发服务器

webpack开发服务器, 把代码运行在内存中, 自动更新, 实时返回给浏览器显示。
打包在内存中, 速度快；自动更新打包变化的代码, 实时返回给浏览器显示；

引入

每次修改代码, 重新 yarn build 打包, 才能看到最新的效果, 实际工作中, 打包 yarn build 非常费时 (30s - 60s)；
原因:
从0构建依赖
磁盘读取对应的文件到内存, webpack开始加载
再用对应的 loader 进行处理
将处理完的内容, 输出到磁盘指定目录
解决：起一个开发服务器, 缓存一些已经打包过的内容, 只重新打包修改的文件, 最终运行在内存中给浏览器使用

使用webpack-dev-server模块：热更新

webpack-dev-server文档: https://webpack.docschina.org/configuration/dev-server/

1. 下载模块包yarn add webpack-dev-server -D
2. 在package.json-配置自定义命令:自定义webpack开发服务器启动命令serve在package.json里

"scripts":{
	"build":"webpack",
	"serve":"webpack serve"
}

3. 启动当前工程里的webpack开发服务器yarn serve，webpack-dev-server会给一个地址+端口浏览器，访问即可看到在内存中打包的index.html页面
4. 重新编写代码, 观察控制台和浏览器是否自动打包和更新
5. 改变webpack-dev-server配置
   webpack-dev-server配置文档: https://webpack.docschina.org/configuration/dev-server/#devserverafter
   在webpack.config.js中添加如下配置，重启webpack开发服务器即可
   都是去文档中找配置项的名字，在webpack.config.js – devServer选项里添加

module.exports={
	//其他配置略
	devServer:{
		port:8888 //自定义端口号
	}
}