【前端】webpack一本通_webpack和webpack-dev-server是强绑定的吗-CSDN博客

不定期补充，建议关注收藏点赞。

大纲

简介

webpack作用（自动整合压缩并剔除无用代码）
开发体验：模块化、热更新HMR、本地开发服务器、多环境配置
构建优化：代码转换、treeShaking、代码分割按需加载、压缩资源、缓存优化
减少文件数量、缩小代码体积、提高浏览器打开速度
优点

专注于处理模块化的项目，开箱即用
plugin扩展，完整好用灵活
loaders扩展, 能够把所有类型文件都解析打包

webpack定义
nodejs第三方模块包, 用于识别翻译压缩打包整合代码
支持所有类型文件的打包
支持less/sass => css
支持ES6/7/8 => ES5
压缩代码, 提高加载速度
基于node, 所以导出遵守CommonJS规范。
是打包模块化JS的工具，在webpack里【一切文件皆模块】，通过loader转换文件，通过plugin注入钩子，最后输出由多个模块组合成的文件，webpack专注构建【模块化】项目

python一切皆对象；
JavaScript 的“几乎一切皆对象” —— 但并不是绝对的。原始类型（Primitive Types）不是对象，它们是值类型（by value），不可变，不是对象，虽然原始类型不是对象，但当你调用它们的方法时，JS 会临时把它们“包装成对象”；特殊情况：null，这个是历史遗留的 bug ，虽然typeof null 为"object" 但 null 本质上不是对象，也不能调用方法。

安装

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

yarn init
yarn add webpack webpack-cli -D

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

核心概念

Loader和Plugin的不同

不同的作用
Loader直译为"加载器"。Webpack将一切文件视为模块，但是webpack原生是只能解析js文件，如果想将其他文件也打包的话，就会用到loader。所以Loader的作用是让webpack拥有了加载和解析非JavaScript文件的能力。
Plugin直译为"插件"。Plugin可以扩展webpack的功能，让webpack具有更多的灵活性。在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。
不同的用法
Loader在module.rules中配置，也就是说他作为模块的解析规则而存在。类型为数组，每一项都是一个Object，里面描述了对于什么类型的文件（test），使用什么加载器(loader)和使用的参数（options）
Plugin在plugins中单独配置。类型为数组，每一项是一个plugin的实例，参数都通过构造函数传入。

使用

默认src/index.js – 打包入口文件
引入到入口的文件才会参与打包
上述配置文件中的自定义命令，使得：执行package.json里build命令则执行webpack打包命令
默认输出dist/main.js的打包结果
借助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文件 ->引入加载器

有哪些常见的Loader？他们是解决什么问题的？（必会）
1、 file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
2、 url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
3、 source-map-loader：加载额外的 Source Map 文件，以方便断点调试
4、 image-loader：加载并且压缩图片文件
5、 babel-loader：把 ES6 转换成 ES5
6、 css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
7、 style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
8、 eslint-loader：通过 ESLint 检查 JavaScript 代码
处理css文件
css文件引入到入口里，webpack打包css文件依然会报错。如何让webpack能处理css文件：使用下面的两个加载器
css-loader 文档
 style-loader文档
css-loader 让webpack能处理css类型文件
style-loader 把css插入到DOM中（插入到head下style标签内）

下载加载器

yarn add css-loader style-loader -D

webpack.config.js配置

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

打包观察效果：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:

【前端】webpack一本通

目录

大纲

简介

核心概念

Loader和Plugin的不同

使用

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