webpack study notes three: load CSS, image pictures, fonts fonts

Load css

Installation dependencies

npm install --save-dev style-loader css-loader

Configuration file, webpack.config.js

module: {
    
    
		rules: [
			{
    
    
				test: /\.css$/,
				use: [
				'style-loader',
				'css-loader',
				],
			},
		],
   },

Load image image, and fonts

Installation dependencies

npm install --save-dev file-loader

Configuration file, webpack.config.js

module: {
    
    
	rules: [
		{
    
    
			test: /\.css$/,
			use: ["style-loader", "css-loader"],
		},
		{
    
    
			test: /\.(png|svg|jpg|gif)$/,
			use: ["file-loader"],
		},
		{
    
    
			test: /\.(woff|woff2|eot|ttf|otf)$/,
			use: ["file-loader"],
		},
	],
},