webpack基础

1.webpack配置组成

2.Entry

作用：指定打包的入口，即指定源代码
（1）单入口：入口文件只有一个，entry是一个字符串

module.exports={
	entry:'./src/main.js'
}

（2）多入口：入口文件有多个，entry是一个字符串

module.exports={
	entry:{
		app:'./src/app.js',
		adminApp:'./src/adminApp.js'
	}
}

3.Output

作用：告诉webpack如何将编译后的文件输出到磁盘，即指定转换后的代码
（1）单入口配置

module.exports={
	entry:'./src/main.js'
	out:{
		filename:'bundle.js',
		pathL_dirname+'/dist'
	}
}

（2）多入口配置
通过占位符[name]确保文件名称的唯一性

module.exports={
	entry:{
		app:'./src/app.js',
		adminApp:'./src/adminApp.js'
	},
	out:{
		filename:'[name].js',
		path:path.join(_dirname,'/dist')
	}
}

运行完后webpack会在dist下生成app.js和adminApp.js

4.Loaders

（1）作用：webpack开箱即用只支持JS和JSON两种文件类型，如CSS、less、.vue文件等等webpack并不支持，webpack可以通过Loaders去支持其他文件类型并把它们转换成有效模块，并且可以添加到依赖图中。Loaders是一个函数，接收源文件作为参数，返回转换的结果。
（2）常见的Loaders

名称	描述
babel-loader	转换ES6、Es7等js新特性语法
css-loader	支持.css文件的加载和解析
less-loader	将less文件转换成css
ts-loader	将TS转换成JS
file-loader	进行图片、字体等打包
raw-loader	将文件以字符串的形式导入
thread-loader	多线程打包JS和CSS，加快打包速度

（3）Loaders的用法
test–指定匹配规则
use–指定使用的loader名称

const path = require('path');

module.exports = {
	output:{
		filename:'bundle.js'
	},
	module:{
		rules:[
			{test:/\.txt$/,use:'raw-loader'}
		]
	}
}

5.Plugins

（1）作用：用于bundle文件的优化、资源管理和环境变量的注入，作用于整个构建过程，也可以理解为loaders无法完成的事情由Plugins完成。
（2）常见的Plugins

名称	描述
CommonsChunkPlugin	将chunks相同的模块代码提取成公共js
cleanWebpackPlugin	清理构建目录
ExtractTextWebpackPlugin	将css从bundles文件里提取成一个独立的css文件
copyWebpackPlugin	将文件或文件夹拷贝到构建的输出目录
HtmlWebpackPlugin	创建html文件去承载输出的bundle
UgligyjsWebpackPlugin	压缩js
ZipWebpackPlugin	将打包的资源生成一个zip包

（3）用法

const path = require('path');

module.exports = {
	output:{
		filename:'bundle.js'
	},
	plugins:[
		new HtmlWebpackPlugin({template:'./src/index.html'})
	]
}

6.Mode

（1）作用：用来指定当前构建的环境是：production（生成环境）、development（开发环境）、还是none。设置mode可以使用webpack内置的函数，默认为production
（2）内置函数功能

名称	描述
development	设置process.env.NODE_ENV的值为development。开启NameChunksPlugin和NamedModulesPlugin
production	process.env.NODE_ENV的值为production。开启FlagDependencyUsagePlugin，FlagIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，OccurrenceOrderPlugin，SideEffectsFlagPlugin和TerserPlugin
none	不开启任何优化选项