webpack中關於Loader插件的使用

webpack中Loader插件的使用

webpack識別不了除js文件之外的資源文件，這個時候咱們就要用到Loader來幫忙打包。

​ file-loader的配置

//打開webpack.config.js文件
const path = require('path');

module.exports = {
	mode:'production',
	entry:{
		main:'./src/index.js'
	},
	mudule:{
		rules:[
			{
				//符合.jpg文件，那麼咱們就交給file-loader來處理
				test:/\.jpg$/,
				use:{
					loader:'file-loader' //前提咱們要下載file-loader插件
				}
			},
			{
				//符合.txt文件，那麼咱們就交給file-loader來處理
				test:/\.txt$/,
				use:{
					loader:'file-loader' //前提咱們要下載file-loader插件
				}
			},
		]
	},
	output:{
		filename:'bundle.js',
		path:path.resolve(_dirname,'dist')
	}
}
複製代碼

​ 若是咱們想要file-loader文件打包出來的文件不改變名字該怎麼作？

//打開webpack.config.js文件
mudule:{
		rules:[
			{
				//符合.jpg/png/gif文件，那麼咱們就交給file-loader來處理
				test:/\.(jpg|png|gif)$/,
				use:{
					loader:'file-loader', //前提咱們要下載file-loader插件
					options:{
						//佔位符 placeholder
						name:'[name].[ext]'
					}
				}
			},
			{
				//符合.txt文件，那麼咱們就交給file-loader來處理
				test:/\.txt$/,
				use:{
					loader:'file-loader', //前提咱們要下載file-loader插件
					options:{
						//佔位符 placeholder
						name:'[name].[ext]'
					}
				}
			},
		]
	},
複製代碼

​ 修改打包出文件的路徑？

//打開webpack.config.js文件
mudule:{
		rules:[
			{
				//符合.jpg/png/gif文件，那麼咱們就交給file-loader來處理
				test:/\.(jpg|png|gif)$/,
				use:{
					loader:'file-loader', //前提咱們要下載file-loader插件
					options:{
						//佔位符 placeholder
						name:'[name].[ext]',
						//生成的圖片在dist文件夾下的images文件夾下
						outputPath:'images/'
					}
				}
			},
		]
	},
複製代碼

更詳細配置請看官網：webpack.js.org/concepts/lo…