The use of Loader plug-ins in Webpack

Webpack cannot recognize resource files other than JS files. In this case, we need to use Loader to help package.

Configuration file – loader

// Open the webpack.config.js file
const path = require('path');

module.exports = {
	mode:'production'.entry: {main:'./src/index.js'
	},
	mudule: {rules:[
			{
				// The file is a.jpg file
				test:/\.jpg$/.use: {loader:'file-loader' // We need to download the file-loader plug-in}}, {// the file is a. TXT file
				test:/\.txt$/.use: {loader:'file-loader' // We need to download the file-loader plug-in}}},],output: {filename:'bundle.js'.path:path.resolve(_dirname,'dist')}}Copy the code

What if we want the file-loader to package out the file without changing its name?

// Open the webpack.config.js file
mudule:{
		rules:[
			{
				JPG/PNG/GIF files, so we give file-loader to process
				test:/\.(jpg|png|gif)$/.use: {loader:'file-loader'.// We need to download the file-loader plug-in
					options:{
						// placeholder placeholder
						name:'[name].[ext]'}}}, {// the file is a. TXT file
				test:/\.txt$/.use: {loader:'file-loader'.// We need to download the file-loader plug-in
					options:{
						// placeholder placeholder
						name:'[name].[ext]'}}},]},Copy the code

Change the path of the packaged file?

// Open the webpack.config.js file
mudule:{
		rules:[
			{
				JPG/PNG/GIF files, so we give file-loader to process
				test:/\.(jpg|png|gif)$/.use: {loader:'file-loader'.// We need to download the file-loader plug-in
					options:{
						// placeholder placeholder
						name:'[name].[ext]'.// The generated images are in the images folder under the dist folder
						outputPath:'images/'}}},]},Copy the code

More detailed configuration please see website: webpack.js.org/concepts/lo…