一、webpack基础概念

webpack核心概念

1、Entry

设置入口文件，指定webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

2、Output

输出，指定webpack打包后的资源bundles输出到哪里去，以及如何命名输出文件。

3、Loader

loader让webpack能够去处理那些非JavaScript文件

webpack自身只能处理JavaScript

4、Plugin

插件，用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量等。

5、Mode

模式，指定webpack使用相应模式的配置

选项	描述	特点
development	会将process.env.NODE_ENV的值设置为development， 启用NamedChunksPlugin和NamedModulesPlugin	能让代码本地调试运行的环境
production	会将process.env.NODE_ENV的值设置为development。 启用FlagDependencyUsagePlugin,FlagincludeedChunksPlugin ,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin ,SideEffectsFlagPlugin和UglifyJsPlugin	能让代码优化上线运行的环境

6、配置文件:webpack.config.js

const { resolve } = require('path') 
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
	//入口文件
	entry:'./src/index.js',
	//输出
	output:{
		//输出文件名
		filename:'build.js',
		//输出路径
		path:resolve(__dirname,'build')
	},
	//loader的配置
	module:{
		rules:[
		//具体的每一个loader配置
		{
			//匹配css文件
			test:/\.css$/,
			//使用哪些loader进行处理，执行顺序是倒序执行
			use:[
				//创建style标签，将JS中样式文件，添加到head中生效
				'style-loader',
				//将css文件变成commonJS模块加载到js文件中，里面的样式是字符串
				'css-loader'
			]	
		},
		{
			//匹配less文件
			test:/\.less$/,
			use:[
				'style-loader',
				'css-loader',
				'less-loader'
			]	
		},
		{
			//处理图片文件
			test:/\.(jpg|png|gif|webp)$/,
			//下载 url-loader、file-loader
			loader:'url-loader',
			option:{
				//图片小于8kb，就会进行base64处理
				limit:8 * 1024,
				//url-loader默认使用es6的方式解析，而html-loader引入的图片是commonJS
				//解析的时候会出现问题，需要关闭url-loader的es6模块化
				esModule:false，
				//给图片进行重命名,取图片哈希值的前十位，扩展名不变
				name:'[hash:10].[ext]',
				outputPath:'img'
			}
		},
		{
			//html-loader 处理html文件中的img图片
			test:/\.html$/,
			loader:'html-loader'
			
		}
		{
			//用于处理其他资源
			exclude:/\.(html|js|css|less|png|jpg|gif|webp)/,
			loader:'file-loader',
			option:{
				name:'[hash:10].[ext]'
			}
		}
		]
	},
	//plugins的配置
	plugins:[
		//具体的plugins的配置
		//html-webpack-plugin 会基于模板文件创建一个html文件，并自动引入打包之后的资源
		new HtmlWebpackPlugin({
			template:'./src/index.html'
		})
	],
	//模式二选一
	mode:'development',
	//mode:'production',
	
	//配置devServer：用于热更新
	//启动指令：npx webpack-dev-server
	devServer:{
		//项目构建后的路径
		contentBase:(resolve(__dirname,'build')),
		//启动gzip压缩
		compress:true,
		//端口号
		port:3000,
		//自动打开浏览器
		open:true
	}
	
}