webpack核心概念

1.Entry，Output，Loaders，Plugins，Mode用法：
单入口：entry是一个字符串

module.exports={
	entry: './path/to/my/entry/file.js',
	output: {
		filename: 'bundle.js',
		path: __dirname + '/dist'
	},
	module: {
		rules: [
			{test: /\.txt$/, use: 'raw-loader'} // test:指定匹配的名称  use:指定使用的loader名称
		]
	}
}

多入口：entry是一个对象

module.exports={
	entry: {
		app: './src/app.js',
		search: './src/search.js'
	},
	output: {
		filename: '[name].js', // 通过点位符确保文件名称的唯一
		path: __dirname + '/dist'
	},
	module: {
		rules: [
			{test: /\.txt$/, use: 'raw-loader'} // test:指定匹配的名称  use:指定使用的loader名称
		]
	},
	plugins: [  // 放到plugins数据里
		new HtmlWebpackPlugin({template: './src/index.html'})
	]
}

2.Loaders，常见的Loaders有下面几个

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

3.Plugins:插件用于bundle文件的优化，资源管理和环境变更的注入作用于整个构建过程：

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

4.Mode 用来指定的构建环境：production, development和none，设置mode可以使用webpack内置的函数，默认值为production

名称	描述
development	设置process.env.NODE_ENV的值为development开启NamedChunksPlugin和NameModulesPlugin
production	设置process.env.NODE_ENV的值为production 开启FlagDependencyUsagePlugin,FlgIncludedChunksPlugin,ModuleConcatenationPlugin, NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和TerserPlugin
none	不开启任何优化选项