webpack5简单配置less或css里图片的显示

webpack.config.js文件配置

 1 const path = require('path'); //绝对路径
 2 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
 3 
 4 
 5 module.exports = {
 6     entry: './src/index.js',
 7     output: {
 8         path: path.resolve(__dirname, 'dist'),
 9         filename: 'builder.js',
10     },
11     module: {
12         rules: [
13             // css
14             {
15                 test: /\.css$/,
16                 use: ['style-loader', 'css-loader']
17             },
18             // less
19             {
20                 test: /\.less$/,
21                 use: ['style-loader', 'css-loader', 'less-loader'] //还需安装less
22             },
23             //处理css/less背景图片资源
24             {
25                 test: /\.(jpg|png|gif)$/,
26                 loader: 'url-loader', // url-loader file-loader下载
27                 options: {
28                     limit: 8 * 1024,
29                     esModule: false,//关闭es语法块
30                 },
31                 type:'javascript/auto' //转换 json 为 js
32 
33             },
34             // html文件中src图片资源
35             {
36                 test:/\.html$/,
37                 loader:'html-loader'
38             },
39         ]
40     },
41     plugins: [
42         // 打包html,会自动引入打包文件（css,js等），不需要打包前在html页面引入css\js文件
43         new HtmlWebpackPlugin({
44             template: './src/index.html'
45         })
46     ],
47     //模式：development, production 或 none 之中的一个
48     mode: 'development',
49 }

标签：webpack5,less,js,html,path,loader,css
来源： https://www.cnblogs.com/LXin17/p/15668417.html