note/2019/12/webpack原理.md

webpack原理

1.webpack是啥 webpack是一个js文件打包器，在处理应用程序时，会将程序用到的静态文件构建成一个依赖关系图 并把他们打包成一个或多个 bundle.js 2 webpack 包含： 入口 （entry），出口 （output） ,loader， 插件（plugins）

(1) entry ：定义依赖图的 开始 配置：（webpack.config.js）

moudle.export={
	entry:""//路径+文件名

}

（2） 出口:outputb 规定 webpack创建 bundle.js的路径

配置：

moudle.export={

entry:"",
output:{
		path:"" //最终bundle.js 生成的文件路径,
		filename:""  //编译完成后生成的文件名 默认为 bundle.js
	}
}

(3) loader 让js文件可以加载其他文件类型（支持所有文件类型）

配置时有两个参数

text 指明是哪个类型的文件

use 指明使用哪个loader

webpack 常用的loader:

样式：style-loader、css-loader、less-loader、sass-loader等

文件：raw-loader、file-loader 、url-loader等

编译：babel-loader、coffee-loader 、ts-loader等

校验测试：mocha-loader、jshint-loader 、eslint-loader等

配置（webpack.config.js）：

moudle.export={

	entry:"",
	output:{
		path:"",
		filename:""
	},
	loader:{
		text:""// 文件类型的正则，
		use:""// 指定 使用的loader  	
	}	

}

(4) Plugins: 用来处理各种功能

配置： 在webpack.config.js中

1.require所要用的模块

2.在plugin数组中实例化
const HtmlWebpackPlugin=require("")  //引入模块
moudle.export={
		entry:"",
	output:{
		path:"",
		filename:""
	},
	loader:{
		text:""// 文件类型的正则，
		use:""// 指定 使用的loader  	
	}	
	plugins:[
		new HtmlWebpackPlugin(...参数)
	]	
}