【Webpack】静态模块打包工具（快速一览）

一、Webpack 简介

（一）定义

• webpack 是一个用于 JavaScript 应用程序的静态模块打包工具

（二）核心概念

概念	解析
入口 (entry)	打包的入口文件，默认为./src/index.js
输出 (output)	打包的输出 bundle，默认值为./dist/main.js
加载器 (loader)	处理其他类型文件，并将其转换为有效模块
插件 (plugin)	打包优化，资源管理，注入环境变量
模式 (mode)	development，production 或 none

（三）核心配置

• 在webpack.config.js文件中配置

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
	}
}