1.什么是webpack

webpack是一个前端工程化工具，主要用于前端代码的打包工作
webpack的作用

将前端项目开发时，编写的大量css文件，js文件以及各种静态文件，进行统一的整理
目的：优化前端项目在部署到生产环境时，网页中对静态文件的请求数量

2.webpack常见配置

webpack作为一个工具、工作的核心主要依赖于配置文件：webpack.config.js
1.entry
工程打包的入口文件，一般使用相对路径

//webpacl.config.js
module.exports = {
	entry: './public/js/main.js' //入口文件，打包时主要处理的文件
}

2.output
工程打包后的目标文件，一般使用绝对路径

//webpack.config.js
module.exports = {
	entry:...,
	output: {
		path:path.join(__dirname,'dist'), //将打包后的文件输出到dist目录
		filename: 'bundle.js' //打包后的文件名称
	}
	
}

3.mode
工程化操作可以将文件打包成开发环境中使用的文件格式，也可以将文件打包成生产环境使用的文件格式（production、development）

....
mode:'production' //默认配置production
....

4.module
打包过程中需要加载的一些模块操作规则，可以包含文件查询规则以及对应处理的加载器
5.plugin
打包过程中需要的一些插件，用于扩展打包功能

3.js文件打包

全局安装webpack

npm i webpack webpack-cli -g

1.打包单个js文件
添加配置文件webpack.config.js

module.exports = {
	entry: './public/js/main.js',
	output: {
		path: path.join(__dirname,'dist'),
		fillename: 'bundle.js'
	}
}

运行webpack命令，完成打包处理

2.打包多个js文件

module.exports = {
	entry: [
	'./public/js/main.js',
	'./public/js/other.js'
	],
	output: {
		path: path.join(__dirname,'dist'),
		fillename: 'bundle.js'
	}
}

3.打包生成多个js文件

module.exports = {
	entry: {
	main:'./public/js/main.js',
	ohter:'./public/js/other.js'
	},
	output: {
		path: path.join(__dirname,'dist'),
		fillename: '[name].js' //[name]就是一个变量，使用entry配置中的key替换
	}
}

4.打包处理css文件

运行npm i style-loader -D命令，安装处理css文件的loader
在webpack.config.js 的module->rules数组中，添加loader规则

module:{
	rules: [
		{test: /.\css$/,use:['style-loader','css-loader']}
	]
}

注:use数组中指定的loader顺序是固定的
多个loader的调用顺序是从后往前调用

5.打包处理less文件

运行 npm i less less-loader -D

...
{test: /\.less$/,use:['style-loader','css-loader','less-loader']}
...

6.打包处理scss文件

运行 npm i node-sass sass-loader -D
运行 npm i less less-loader -D

...
{test: /\.scss$/,use:['style-loader','css-loader','sass-loader']}
...

7.配置postCss自动添加css的兼容浅醉

运行npm i postcss-loader autoprefixer -D
在根目录中创建配置文件postcss.config.js,并初始化如下配置

const autoprefixer = require('autoprefixer')
module.export = {
	plugin:[autoprefixer] //挂载插件
}

在webpack.config.js的module->rule数组中，修改css的loader规则如下

...
{test:/\.css$/,use:['style-loader','css-loader','postcss-loader']}
...

8.打包样式表中图片和字体文件

安装babel转换器相关的包： npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
在项目根目录中，创建babel配置文件babel.config.js并初始化基本配置如下

module.exports = {
	persets: ['@babel/preset-env'],
 plugin:['@babel/plugin-transform-runtime','babel/plugin-proposal-class-properties']
}

exclude为排除项，表示babel-loader不需要处理node_modules中的文件
{test:/\.js$/,use: 'babel-loader',exclude:/node_modues/}