webpack——webpack环境安装、开发环境devServer、package.json指令相关、开发依赖和生产依赖、面试题

webpack——webpack环境安装、开发环境devServer、package.json指令相关、开发依赖和生产依赖、面试题
目录

一、webpack介绍

二、webpack环境安装

1、项目入口配置

2、项目出口配置

3、加载器loader

3.1 css-loader & style-loader

3.2 file-loader

3.3 ts-loader

3.4 babel-loader

3.5 sass-loader

4、插件plugin

4.1 EslintWebpackPlugin

4.2 HtmlWebpackPlugin

三、开发环境devServer

四、package.json指令相关

五、开发依赖和生产依赖

六、面试题

1、名字解释 bundle，chunk，module 是什么?

2、说说webpack中常见的Loader？解决了什么问题？

3、loader 和插件plugin的区别

4、 less-loader 和 sass-loader的区别

5、url-loader 和 file-loader的区别

6、面试题:、webpack 与 grunt、gulp 的不同？

7、webpack的cli配置中有--watch的观察模式为什么还要配置服务?或者说devServer的优势是什么?

8、webpack 的构建流程是什么?从读取配置到输出文件这个过程

9、如何利用 webpack 来优化前端性能

10、webpack已经有--watch了，为什么还要用server

七、CDN

一、webpack介绍

官网:webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

从 v4.0.0 开始，webpack 可以不用再引入一个配置文件来打包项目，然而，我们为了学习它的原理和感受打包的整个流程,主要的学习任务就是学习打包的配置文件如何配置,好让整个工程运作起来.
一些核心概念：
- 入口(entry)
  
  打包项目的入口文件配置,就是上面那个蜘蛛网的起点
- 输出(output)
  
  打包完成以后的项目文件输出到哪里
- loader
  
  打包的时候,解析某些类型的文件需要按照语法去解析编码,不同类型的文件需求不同的加载器
- 插件(plugin)
  
  具有某类功能的工具
- 模式(mode)
  
  可以在配置文件中设定开发模式,用于未来开发脚手架的配置
- 浏览器兼容性(browser compatibility)
  
  低版本浏览器不能用
- 环境(environment)
  
  Webpack 5 运行于 Node.js v10.13.0+ 的版本。
二、webpack环境安装

最新版本5.0+

npm install webpack webpack-cli -g //不指定版本,默认下载最新版本,全局安装以后直接使用
mkdir webpack-demo //创建项目文件夹,随意名字同js变量名规则
cd webpack-demo //进入项目文件夹
npm init -y //生成项目配置文件

创建一个webpack.config.js的打包配置文件
代码:
module.exports={
项目入口配置,
项目出口配置,
加载器配置,
插件配置,
开发模式配置,
其他
}

1、项目入口配置

在webpack.config.js文件中
```
module.exports = {
    // 一、项目入口配置,
    //第一种:直接配置入口文件
    entry:__dirname+"/src/main.js"  //默认是__dirname+"/src/index.js"
 
    //第二种:配置基础目录,然后配置入口文件
    context:__dirname+"/src",    //basepath
    entry: "./main.js"   相对于context的路径
 
    //第三种：多入口
    context:__dirname+"/src",
    entry:["./test1.js","./main.js"]  //输出时默认为main.js,而且全部打包在一起
 
    //第四种：多入口  多出口
    entry: {
        a: "./src/main.js",  // //输出时默认为a.js
        test1: "./src/test1.js"
    }
 
    //第五种：入口配置
    context: __dirname + '/app',
    entry: {
        //输出时默认为a.js
        a: './test.js',
        //输出时默认为pages文件夹下的b.js  
        b: { import: './test2.js', filename: 'pages/[name].js' },
        //输出时默认为pages文件夹下的c666.js
        c: { import: './test3.js', filename: 'pages/[name]666.js' },
        //输出时默认为pages文件夹下的d+哈希值+666.js
        d: { import: './test4.js', filename: 'pages/[name][hash]666.js' },
        //输出时默认为pages文件夹下的e+3位哈希值+666.js
        e: { import: './test5.js', filename: 'pages/[name][hash:3]666.js' }
 
    }
}
```
总结:
1.[name]代表entry的当前属性名 [hash]代表哈希值
2.配置对象除了import和filename还有很多,比如做加载相关的asyncChunks,自行查官网了解

2、项目出口配置

`output` 位于对象最顶级键(key)，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

**webpack.config.js文件**
```
module.exports = {
	mode: "none",
	context: __dirname + '/app',
	// entry:'./test.js',
	entry: {
		a: './test.js'
	},
	output: {
		asyncChunks: true, //创建按需加载的异步 chunk。
		
		path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
		
		// filename: 'bundle.js', //输出的文件名
		filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
			
		
		// library: 'hqyj',//库名
		library: {
			name: 'MyLibrary', //库名
			type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
		},
		// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]
		
		
		
		
		auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
		//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
		// auxiliaryComment: {
		// 	root: 'Root Comment',
		// 	commonjs: 'CommonJS Comment',
		// 	commonjs2: 'CommonJS2 Comment',
		// 	amd: 'AMD Comment',
		// },	
 
 
		clean: true, // 在生成文件之前清空 output 目录
		// clean: {
		//       dry: true, // 小黑窗打印而不是删除应该移除的静态资源
		//     },
		// clean: {
		// 	keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删
		// 	// keep(asset) {
		// 	// 	return asset.includes('ignored/dir');//同上
		// 	// },
		// },		
	}
};
```
3、加载器loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。**loader** 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 [模块](https://webpack.docschina.org/concepts/modules)，以供应用程序使用，以及被添加到依赖图中。

**loader 用于对模块的源代码进行转换**。loader 可以使你在 `import` 或"加载"模块时**预处理文件**。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中引入CSS文件！

当我们项目中用js引入css 就会出现解析打包失败的情况

3.1 css-loader & style-loader
```
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
console.log(myaxios,myaxios2)
var a=100;
 
//webpack.config.js文件:
module.exports = {
	mode: "none",
	context: __dirname + '/src',
	// entry:'./test.js',
	entry: {
		a: './main.js'
	},
	output: {
		asyncChunks: true, //创建按需加载的异步 chunk。
 
		path: __dirname + "/dist", //输出的目录,绝对路径,默认dist
 
		// filename: 'bundle.js', //输出的文件名
		filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
 
 
		// library: 'hqyj',//库名
		library: {
			name: 'MyLibrary', //库名
			type: 'umd', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
		},
		// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理，因为我们可能在未来放弃对 output.libraryTarget 的支持。]
 
 
		auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)	  
		//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
		// auxiliaryComment: {
		// 	root: 'Root Comment',
		// 	commonjs: 'CommonJS Comment',
		// 	commonjs2: 'CommonJS2 Comment',
		// 	amd: 'AMD Comment',
		// },	
		// clean: true, // 在生成文件之前清空 output 目录
		// clean: {
		//       dry: true, // 小黑窗打印而不是删除应该移除的静态资源
		//     },
		clean: {
			// 	keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删
			keep(asset) {
				// return asset.includes('ignored/dir'); //同上
				return asset.includes('index.html');
			},
		},
	},
	module:{
		rules:[
			{test:/\.css$/,use:["style-loader","css-loader"]}
		]
	}
 
};
```
**外部文件形式生成css资源**

npm i mini-css-extract-plugin --save-dev
```
module: {
		rules: [
			//运行bundle时直接以style标签形式动态写入到页面
			// {test:/\.css$/,use:["style-loader","css-loader"]},
			{
				test: /\.css$/,
				//css生成到css文件中,项目中以形式引入使用
				use: [MiniCssExtractPlugin.loader, 'css-loader']   //use数组的加载是从后往前
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[hash].css' //css生成到css文件中,项目中手动以形式引入使用
		})
	]
```
3.2 file-loader

项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包

npm i file-loader --save-dev
```
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
import img1 from "./1.png"
import vd1 from "./1.mp4"
console.log(myaxios,myaxios2)
var a=100;
window.onload=function(){
	var touxiang=document.createElement("img")
	touxiang.src=img1
	document.body.appendChild(touxiang)
	
	var v=document.createElement("video")
	v.src=vd1
	v.controls=true
	document.body.appendChild(v)		
}
 
//webpack.config.js文件:
module: {
	rules: [
		//直接以style标签形式动态写入到页面
	    {test:/\.css$/,use:["style-loader","css-loader"]},
        //项目中引入了以下结尾的文件就会启动file-loader
		{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
	]
},
```
3.3 ts-loader

将 TypeScript 转为 JavaScript

npm install ts-loader webpack typescript --save-dev

项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件)
```
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
import img1 from "./1.png"
import vd1 from "./1.mp4"
import test from "./test.ts" 
console.log(myaxios,myaxios2)
var a=100;
console.log(test(),111)
window.onload=function(){
	var touxiang=document.createElement("img")
	touxiang.src=img1
	document.body.appendChild(touxiang)
	
	var v=document.createElement("video")
	v.src=vd1
	v.controls=true
	document.body.appendChild(v)		
}
 
 
//webpack.config.js文件:
module: {
		rules: [
			//直接以style标签形式动态写入到页面
			// {test:/\.css$/,use:["style-loader","css-loader"]},
			{
				test: /\.css$/,
				//css生成到css文件中,项目中以形式引入使用
				use: [MiniCssExtractPlugin.loader, 'css-loader']
			},
			{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
			{ test: /\.ts$/, use: 'ts-loader' },
		]
	},
```
3.4 babel-loader

Babel 是一个 JavaScript编译器，它是一个工具链，主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件，就交给babel处理。

npm install babel-loader @babel/core @babel/preset-env webpack -D
```
//webpack.config.js文件
module: {
		rules: [
			//直接以style标签形式动态写入到页面
			// {test:/\.css$/,use:["style-loader","css-loader"]},
			{
				test: /\.css$/,
				//css生成到css文件中,项目中以形式引入使用
				use: [MiniCssExtractPlugin.loader, 'css-loader']
			},
			{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
			{ test: /\.ts$/, use: 'ts-loader' },
			//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码
			 {
			      test: /\.js$/,
			      exclude: /(node_modules|bower_components)/,
			      use: {
			        loader: 'babel-loader',
			        options: {
			          presets: ['@babel/preset-env'],
			          plugins: ['@babel/plugin-proposal-object-rest-spread']
			        }
			      }
			    }
		]
	},
```
总结:babel-loader 很慢！解决办法：要排除 node_modules，参考文档中的 loaders 配置的 exclude 选项。

参考官网:https://webpack.docschina.org/loaders/babel-loader/#install

3.5 sass-loader

把Sass代码转化为css代码

npm install sass-loader sass webpack --save-dev
```
//mian.js文件:
import './style.scss';
 
//style.scss文件:
$color1: red;
.box {
  color: $color1;
}
 
//webpack.config.js文件:
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [        
          'style-loader',  //不用单独引入 直接运行js代码 动态写入页面    
          'css-loader',
          // 将 Sass 编译成 CSS
          'sass-loader',
        ],
      },
    ],
  },
```
4、插件plugin

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

4.1 EslintWebpackPlugin

eslint插件是一个非常强大的语言查错工具, vscode 编辑器中有提供 eslint 插件，下载插件并启用，自动就可以检测代码的语法错误，但是它只在你写代码的时候提示,我们希望打包项目的时候有相关提示,就可以配置它.

eslint-webpack-plugin插件就是使用 [`eslint`](https://eslint.org/) 来查找和修复 JavaScript 代码中的问题。

*eslint-webpack-plugin 3.0 仅支持 webpack 5。对于 webpack 4 请查看* [2.x 分支](https://github.com/webpack-contrib/eslint-webpack-plugin/tree/2.x)*。*

环境准备:

npm install eslint-webpack-plugin --save-dev

如果未安装 `eslint >= 7` ，你还需先通过 npm 安装：

npm install eslint --save-dev

插件配置:
```
const ESLintPlugin = require('eslint-webpack-plugin');
 
module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};
 
 
//options的参数配置:
context:__dirname+"/src" //指定文件根目录
extensions:String|Array[String] //指定需要检查的扩展名.不配置默认为"js"
exclude:"node_modules" //指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。
files:String|Array[String] //指定目录、文件或 globs ，必须是相对于 options.context 的相对路径。 如果是目录则递归查找所有匹配 options.extensions 选项的文件。 
 
//测试时在main.js中故意写个错误语法:
let a=20;
let a=90;
```
4.2 HtmlWebpackPlugin

该插件将生成一个HTML5 文件，在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。但是每次生成的模板都是新的

[`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 [lodash 模板](https://lodash.com/docs#template)提供模板，或者使用你自己的 [loader](https://webpack.docschina.org/loaders)。

安装:

npm install --save-dev html-webpack-plugin
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: 'index.js',
  output: {
    path:__dirname+'/dist',
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin()],
};
//该插件将为你生成一个HTML5 文件， 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。 
//但是每次生成的模板都是新的 
```
如果希望用自己的html文件作为模板

可以在参数中进行配置:https://github.com/jantimon/html-webpack-plugin#options

补充:minify压缩配置太多自行查文档:https://github.com/terser/html-minifier-terser

例子：
```
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: 'index.js',
  output: {
    path:__dirname+'/dist',
    filename: 'bundle.js',
  },
  plugins: [new HtmlWebpackPlugin({
			title: "hqyj-app", //html的标题默认为"Webpack App",
			filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
			template: __dirname + "/public/index.html", //模板html文件的路径,
			inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
			publicPath: "./", //The publicPath used for script and link tags,
			favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",
			//"洗澡":压缩项配置
			// minify:true,
			minify: {
				collapseWhitespace: true, //是否压缩HTML:空格回车
				keepClosingSlash: true,//在单元素上保留末尾的斜杠  比如说
				removeComments: true, //是否清除HTML注释  
				removeRedundantAttributes: true,    
				removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
				removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
				minifyJS: false, //是否压缩页内JS  ,
				minifyCSS: true //是否压缩页内CSS  
			},
			cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
			
			
		})],
};
```
三、开发环境devServer

我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器

安装: npm install --save-dev webpack webpack-dev-server webpack-cli

配置参数: https://webpack.js.org/configuration/dev-server/
```
module.exports = {
    devServer: {
		//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
		open: true, //cli中 webpack serve --open					
						
		//本地服务器监听的端口
		port: 8080,
		
		//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
	    hot: true,
		
		//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
        //让你同桌访问 然后你改项目代码 他就会刷新
		host: '192.168.2.60',
		
		//启用gzip压缩
		compress: true,
			
		//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
		proxy: {
			'/api': 'http://localhost:7001',
		},
		 // proxy: {
		 //      '/api': {
		 //        target: 'http://localhost:7001',
         //        secure:true,//如果代理的target是https接口,需要配置它 
		 //        pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
		 //      },
		 //    },
	   }		
	}
```
配置好以后小黑窗的服务启动指令: **webpack server**

四、package.json指令相关
```
//package.json文件: 
 "scripts": {
    "dev": "webpack server",
	"build": "webpack"
  },
      //开发阶段 npm run dev 不会打包到磁盘 
      //生产阶段 npm run build 打包生成到磁盘
```
启动指令：

webpack

webpack server

cli指令：小黑窗中直接带参数，可以进行打包配置：webpack --watch

cli指令：小黑窗中直接带参数，可以进行打包配置：webpack server --config webpack.config.js

(cli是小黑窗的指令，不同的指令有不同的功能)

"dev":" webpack server --config myvueconfig.js"

"lint":"webpack server --config webpack.config.js"

"build":"webpack"

五、开发依赖和生产依赖

当我们的项目开发环境集成到现在,就可以开始做项目了,但是我们的项目中也会使用很多第三方SDK, 直接把模块js文件下载到node_modules中然后引入到项目中就可以使用了比如

npm i axios --save

然后再main.js中引入:

import axios from "axios"

那么有一个问题.我们的项目依赖下载到node_modules中环境依赖也是安装到node_modules中 ,很明显开发依赖只是开发阶段需要比如css加载器,当开发完毕以后就不需要了.而项目依赖的axios的js代码依然需要打包到生产代码中为了区分下载时就应当把这两类SDK分别标记

项目依赖:在pakage.json中写入dependencies,打包后的项目中会包含这些模块的代码

npm i 模块1,模块2,模块3 --save

npm i 模块1,模块2,模块3 (npm 版本>5.6)

npm i 模块1,模块2,模块3 -S

开发依赖 : 在pakage.json中写入devDependencies 打包后的项目中不会包含这些模块的代码

npm i 模块1,模块2,模块3 --save-dev

npm i 模块1,模块2,模块3 -D

六、面试题

1、名字解释 bundle，chunk，module 是什么?

答案:

1、module：开发中的每一个文件都可以看作是 module，模块不局限于js，也包含css，图片等

2、chunk：表示代码块，一个 chunk 可以由多个模块组成

3、bundle：最终打包完成的文件，一般就是和 chunk 一一对应的关系，bundle就是对 chunk 进行编译压缩打包等处理后的产出
2、说说webpack中常见的Loader？解决了什么问题？

答题模板:1.解释什么事loader 2.说出你用过或者了解的loader 3.说他们各自的特点和用途 4.说说你的亲身经历

答案:loader用于对模块的"源代码"进行转换，在 import 或"加载"模块时预处理文件

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。

在webpack内部中，任何文件都是模块，不仅仅只是js文件

默认情况下，在遇到import或者load加载模块的时候，webpack只支持对js和json文件打包

像css、sass、png等这些类型的文件的时候，webpack则无能为力，这时候就需要配置对应的loader进行文件内容的解析,当 webpack 碰到不识别的模块的时候，webpack 会在loader配置的中查找该文件解析规则.

loader根据不同文件的编码分类,有很多种,我在华清学习时,手动配置并使用过的loader如下:
- style-loader: 将css添加到DOM的内联样式标签style里
- css-loader :允许将css文件用js引入，并返回css代码
- less-loader: 处理less
- sass-loader: 处理sass
- eslint-loader: 错误语法检测
- postcss-loader: 用postcss来处理CSS
- autoprefixer-loader: 处理CSS3属性前缀，已被弃用，建议直接使用postcss
- file-loader: 分发文件到output目录并返回相对路径
- url-loader: 和file-loader类似，但是当文件小于设定的limit时可以返回一个Data Url (比如base64编码的图片)
- html-minify-loader: 压缩HTML
- babel-loader :用babel来转换ES6文件到ES
- ts-loader :用typescript来转换TS文件到JS
3、loader 和插件plugin的区别

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

4、 less-loader 和 sass-loader的区别

5、url-loader 和 file-loader的区别

6、面试题:、webpack 与 grunt、gulp 的不同？

答案:

1、三者之间的区别三者都是前端构建工具，grunt 和 gulp 在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用 gulp 来处理，比如单独打包CSS文件等

1.1grunt 和 gulp 是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个 web 的构建流程。

1.2webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展webpack功能。

2、构建思路的区别

2.1gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个`Task`，并合理控制所有`Task`的调用关系

2.2webpack 需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工

3、从知识背景区别

3.1gulp 更像后端开发者的思路，需要对于整个流程了如指掌

3.2webpack 更倾向于前端开发者的思路

7、webpack的cli配置中有--watch的观察模式为什么还要配置服务?或者说devServer的优势是什么?

答案:devServer的功能是:当文件发生修改，通知各个模块进行更新加载，加载到计算机内存，刷新浏览器

1.项目中加载的东西很多.内存刷新比磁盘刷新反应快

2.热更新使得开发调试效率更高

3.自动配置代理比手动设计代理服务器更方便

8、webpack 的构建流程是什么?从读取配置到输出文件这个过程

答案:

webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

1、初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数

2、开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译

3、确定入口：根据配置中的 entry 找出所有的入口文件

4、编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理

5、完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系

6、输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会

7、输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统，在以上过程中，webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用webpack 提供的API改变 webpack 的运行结果

9、如何利用 webpack 来优化前端性能

1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩css代码

2、利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用webpack对于 output 参数和 loader 的 publicpath 参数来修改资源路径

3、删除死代码（tree shaking），css 需要使用 Purify-CSS

4、提取公共代码集成为模块：假如项目中引入了多次相同nodule，webpack只会打包一次。

10、webpack已经有--watch了，为什么还要用server

cli指令：小黑窗中直接带参数，可以进行打包配置：webpack --watch

七、CDN

CDN==>内容分发网络

公共库，大家一起使用

CDN依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取内容，降低网络延迟，提高访问速度。简单来讲，CDN是用来进行加速的，它可以让用户更快获得所需的数据。

比如axios，可以自己下载下来，引入。也可以直接用官网的，这个方法较好，

优点：

项目公共的东西尽量的用CDN托管

1、本地的缓存加速，让用户加载得更快

2、就近加载原则
相关阅读:
阿里云ESSD云盘最大和最小IOPS说明
 外卖项目（项目优化3）12---前后端分离开发
 RobotFramework+Eclispe环境安装篇
 【无标题】
重金属行业经销商渠道管理系统：完善客户管理体系，规范渠道销售管理
 一文读懂！机器人自动化解决方案的应用领域和前景
 IDEA使用Maven
程序员追星 - Hal Abelson
【C++】map的使用
 PaddleNLP通用信息抽取模型：UIE【信息抽取{实体关系抽取、中文分词、精准实体标。情感分析等}、文本纠错、问答系统、闲聊机器人、定制训练】
原文地址：https://blog.csdn.net/qq_52301431/article/details/126537850

一、webpack介绍

二、webpack环境安装

1、 项目入口配置

2、 项目出口配置

3、加载器loader

3.1 css-loader & style-loader

3.2 file-loader

3.3 ts-loader

3.4 babel-loader

3.5 sass-loader

4、插件plugin

4.1 EslintWebpackPlugin

4.2 HtmlWebpackPlugin

三、开发环境devServer

四、package.json指令相关

五、开发依赖和生产依赖

六、面试题

1、名字解释 bundle，chunk，module 是什么?

2、说说webpack中常见的Loader？解决了什么问题？

3、loader 和 插件plugin的区别

4、 less-loader 和 sass-loader的区别

5、url-loader 和 file-loader的区别

6、面试题:、webpack 与 grunt、gulp 的不同？

7、webpack的cli配置中有--watch的观察模式 为什么还要配置服务?或者说devServer的优势是什么?

8、webpack 的构建流程是什么?从读取配置到输出文件这个过程

9、如何利用 webpack 来优化前端性能

10、webpack已经有--watch了，为什么还要用server

七、CDN

1、项目入口配置

2、项目出口配置

3、loader 和插件plugin的区别

7、webpack的cli配置中有--watch的观察模式为什么还要配置服务?或者说devServer的优势是什么?