一、webpack简介

1. webpack是什么 静态资源打包器，根据入口文件，把不同的依赖引入，形成代码块chunk。根据不同的资源进行不同的处理，输出bundle文件。
2. webpack五个核心概念

• entry：webpack的入口文件，指示webpack以哪个文件为入口，进行打包，分析构建内部依赖图。
• output： webpack打包后的输出文件，指示webpack以哪个文件为输出，输出到哪个文件夹，以及如何命名。
• loader： webpack的加载器，指示webpack以什么方式去处理文件，比如js文件，css文件，图片文件，字体文件
• plugins： 插件，可以用于执行范围更广的业务，插件的范围包括，从打包优化和压缩，一直到重新定义环境变量等。
• mode： 指示webpack以什么模式去运行，有三种模式，development（开发模式），production（生产模式），none。

二、打包前端资源

1. 打包样式资源

//loader配置
module:{
    rules:[
        // 详细loader配置
        // 不同文件配置不同loader处理
        {
            //匹配那些文件
            test: /\.css$/,
            use:[
                // use执行顺序，从上到下，从左到右依次执行
                // 创建style标签，将js的样式资源插入进行，添加到head中生效
                'style-loader',
                // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
                'css-loader'
            ]
        },
        {
            test: /\.less$/,
            use: ['style-loader','css-loader','less-loader']
        }
    ]
}

2. 打包html资源

loader：下载，使用。 plugins：下载，引入，使用

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
	// html-webpack-plugin
	// 功能：默认创建一个空的html文件，自动引入打包输出的所有资源（js.css）
	// 需求：需要有结构的html文件
	new HtmlWebpackPlugin({
		// 复制index.html文件，并自动引入打包输出的所有资源
		template:'./src/index.html'
	})
]

3. 打包图片资源

module:{
	rules:[
		{
			test: /\.less$/,
			use: ['style-loader','css-loader','less-loader']
		},
		{
			// 默认不能处理html中img图片
			// 处理图片资源
			test: /\.(jpg|png|gif)$/,
			// 下载url-loader，file-loader
			loader: 'url-loader',
			options: {
				// 图片的大小小于8kb，base64处理
				// 优点：能够减少请求数量，减轻服务器压力
				// 缺点：图片体积会更大
				limit:8*1024,
				// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
                // 解析时会出问题：[object Module]
                // 解决：关闭url-loader的es6模块化，使用commonjs解析
				esModule:false,
				// 图片重命名
				// [hash:10]取图片的hash前10位
				// [ext]取原来的扩展名
				name: '[hash:10].[ext]'
			}
		},
		{
			test: /\.html$/,
			// 处理html文件的img图片
			loader: 'html-loader'
		}
	]
}

4. 打包其他资源

module:{
	rules:[
	{
		test:/\.css$/,
		use:['style-loader','css-loader']
	},
	//打包其他资源（除了html，css，js以外的）
	{
		exclude:/\.(css|js|html)$/,
		loader:'file-loader'
	}
	]
}

5. devServer

// 开发服务器devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
// 特点：只会在内存中编译打包，不会有任何输出
// 启动devServer指令为：npx webpack-dev-server
devServer: {
	// 项目构建后的路径
	contentBase: resolve(__dirname, 'build'),
	// 启动gzip压缩
	compress:true,
	// 端口号：8080
	port:8080,
	// 自动打开浏览器
	open:true
}