webpack02-

1.打包分类

图片分类

• 配置

webpack.config.js:
	module:{//模块
		rules:[//规则
			{//图片
				 test:/\.(png|jpg|gif)$/,
				 //做一个限制 当图片小于多少k的时候用base64转化
				 //否则用file-loader产生真实的图片
				 use:{
				 	loader:'url-loader',
				 	options:{
				 	limit:200*1024,//图片小于200k变成base64否则用file-loader产生真实的图片
				 	//输出路径
				 	outputPath:'/img/',//输出图片路径文件夹名img
				 }
			}
			{
				test:require.resolve('jquery'),
				use:'expose-loader?$' 
			}
			{
			 	test:/\.js$/,
				use:{
					loader:'ealint-loader', 
					options:{ 
						enforce:'pre',
					}
				},
			}
			{
				test:/\.js$/,
				use:{
					loader:'babel-loader',
					options:{
						presets:[
							'@babel/preset-env'
						],
						plugins:[
							'@babel/plugin-proposal-class-properties'
							'@babel/plugin-transform-runtime'
						]
					}
				},
				include:path.resolve(__dirname,'src'),
				exclude:/node_modules/,
			}
			{test:/\.css$/,use:['style-loader','css-loader']},
			{
				test:/\.css$/,
				use:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					'postcss-loader',
					]},
			{
				//处理less文件
				test:/\.less$/,
				use:[
					{
						loader:'style-loader',
						options:{
							insertAt:'top',
						}
					},
					'css-loader',
					'less-loader',
					]},
		]
	}
}

样式分类

配置

webpack.config.js
plugins:[//数组 放着所有的webpack插件
		new HtmlWebpackPlugin ({
			template:'./src/index.html',
			filename:'index.html',
			minify:{//压缩
				removeAttributeQuotes:true,
				collapseWhitespace:true,
				
			},
			hash:true,
		}),
		new MiniCssExtractPlugin({
			filename:'css/main.css',//样式分类文件名css
		})
	],

域名下的文件(CDN)

域名+路径 eg：http://www.yuming.cn/img/img.png
http://www.yuming.cn/css/main.css
配置

webpack.config.js
output:{//出口
		filename:'bundle.js',
		2.filename:'bundle.[hash:5].js',
		path:path.resolve（__dirname,'dist'）,
		publicPath:'http://www.yuming.cn'//域名
	},

域名单独处理图片或css

eg:单独处理图片

webpack.config.js
{//图片
				 test:/\.(png|jpg|gif)$/,
				 use:{
				 	loader:'url-loader',
				 	options:{
				 	limit:200*1024,
				 	outputPath:'/img/',
				 	publicPath:'http://www.yuming.cn',//域名
				 }
			}

2.打包多页应用