7、打包文件分类

打包文件分类

我们在打包时，可能要将css文件归类到css目录下，将img归类到img下，当然，我们也可能会在引用资源的时候加上域名前缀，这时候就用到了我们的打包文件分类。

归类

1. 给图片归类到img目录下

在url-loader下配置outputPath，大于limit的图片就会生成到dist下的img文件夹下，同时所有路径都会加上这个/img/

rules:[
		
	{
		test:/\.(png|jpg|gif)$/,
		use:{
			loader:'url-loader',
			options:{	limit:2,//200k，小于200k使用base64来转换
			outputPath:'/img/'//大于上面的limit的图片就会生成到dist下的img文件夹下，同时所有路径都会加上这个img/
			}
		}
	}
]

2. 给css归类到css目录下

plugins:[
	new MiniCssExtractPlugin({
		filename:'/css/[name].[chunkhash:8].css',//抽离出来的css的文件名称，并在dist下生成css文件夹，将该文件放到该css目录下，引入的时候会自动加上/css/
	})
],

加域名前缀

1. 对所有输出资源加域名前缀

在output配置下家属性publicPath

在引用的资源前，统一加上这个额publicPath，比如打包后的css路径是/css/main.css，那么引用的时候就会成为publicPath值+’/css/main.css’

output:{
	filename:'bundle.[hash:8].js', 
	path:path.resolve(__dirname,'./dist'),
	publicPath:'http://www.yuhua.com',//在引用的资源前，统一加上这个额publicPath，比如打包后的css路径是css/main.css，那么引用的时候就会成为publicPath值+'css/main.css'
},

2. 如果有些资源使用了CDN分发，有些没有使用，那么只需要对使用了的资源统一加上域名就可以了

比如图片使用CDN分发，那么在图片的loader加上publicPath配置

rules:[
			
	{
		test:/\.(png|jpg|gif)$/,
		use:{
			loader:'url-loader',
			options:{
				limit:2,//200k，小于200k使用base64来转换
				outputPath:'/img/',//大于上面的limit的图片就会生成到dist下的img文件夹下，同时所有路径都会加上这个/img/
				publicPath:'http://www.yuhua.com'
			}
		}
	}
]

注意

当然了，本身是引用线上资源的，是不会添加域名前缀的，比如html插一条:

<script src="https://lib.baomitu.com/jquery/3.3.1/jquery.js">

不会在src值的前面加配置好的域名