[Webpack] Static module packaging tool (quick overview)

1. Introduction to Webpack

(1) Definition

• webpack is a tool for JavaScript applications静态模块打包工具

(2) Core concepts

concept	parse
Entrance (entry)	Packaged entry file, default is./src/index.js
Output (output)	Packaged output bundle, default value is./dist/main.js
additional device (loader)	Process other types of files and convert them转换 into valid modules
report (plugin)	Packaging optimization, resource management, injecting environment variables
Schematic (mode)	development, production or none

(3) Core configuration

• presentwebpack.config.jsplaced in sentence subject

const {
    
    resolve} = require('path') // 拼接绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
module export = {
    
    
	// 入口起点
	entry:'./src/index.js',
	// 输出
	output:{
    
    
		// 输出文件名
		filename:'bulid.js',
		// 输出路径
		path:resolve(__dirname, 'bulid')
	},
	// loader 配置，不同类型文件必须配置不同的loader。下载 => 使用
	module:{
    
    
		rules:[{
    
    
			// 1、匹配css文件
			test: /\.css$/,
			// 使用哪些loader进行处理
			use:[
				// use数组中loader执行顺序: 从右到左，从下到上 依次执行
				// 创建style标签，将js中的样式资源插入进行，添加到head中生效
				'style-loader',
				// 将css文件变成commonjs模块加载is中，里面内容是样式字符串
				'css-loader'
			]
		},{
    
    
			// 2、匹配less文件
			test: /\.less$/,
			// 使用哪些loader进行处理
			use:[	// 多个使用use		
				'style-loader',
				'css-loader',
				// 将less文件解析为css文件
				'less-loader'
			]
		},{
    
    
			// 3、匹配图片资源
			test: /\.(jpg|png|gif)$/,
			// 使用哪些loader进行处理，下载url-loader和file-loader
			loader:'url-loader',	// 一个直接使用loader
			options:{
    
    
				// 图片小于8kb，就会被base64处理
				// 优点: 减少请求数量(减轻服务器压力)
				// 缺点: 图片体积会更大(文件请求速度更慢)
				limit: 8 * 1024,
				// 问题: url-loader默认使用es6模块化解析，html-loader引入图片是commonjs，解析时会出问题: [object Module]
				// 解决: 关闭url-loader的es6模块化，使用commonjs解析
				esModule: false,
				// 给图片进行重命名 => [hash:n]取图片的hash的前n位 [ext]取文件原扩展名
				name:'[hash:10].[ext]',
				// 确定图片打包后存放在build中的文件位置
				outputPath:'images'
			}
		},{
    
    
			// 4、匹配html中img资源
			test: /\.html$/,
			// 处理html文件的img图片(负责引入img，从而能被url-loader进行处理)
			loader: 'html-loader'
		},{
    
    
			// 5、匹配其他资源(除了html/js/css资源以外的资源)
			// 排除css/js/html资源
			exclude: /\.(css|js|html)$/,
			loader:'file-loader'
		}]
	},
	// plugin 配置，下载 => 引入 => 使用
	plugins:[
		new HtmlWebpackPlugin({
    
    	// 默认创建一个空的HTML，自动引入打包输出的所有资源 (JS/CSS)
			// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)
			template: './src/index.html'
		}) 
	],
	// mode 配置
	mode:'development', // 'production'
	// 开发服务器 devServer
	// 特点: 开启自动化(自动编译，自动打开浏览器，自动刷新浏览器)，只会在内存中编译打包，不会有任何输出
	// 启动devServer指令: npx webpack-dev-serverdevServer
	devServer:{
    
    
		// 项目构建后路径
		contentBase: resolve( __dirname, 'build'),
		// 启动gzip压缩
		compress: true,
		// 端口号
		port: 3000,
		// 自动打开浏览器
		open: true
	}
}