【Webpack5笔记】处理打包各种资源（css资源、less资源、图片资源、字体图标、js资源（ESlint和Babel）、html资源）

webpack中文文档概念 | webpack 中文文档

一、处理css资源

首先安装css-loader

npm install --save-dev css-loader

想要webpack打包资源，需要在主文件中引入css文件

import css from 'file.css';

在webpack.config.js中，因为使用了style-loader，也需要安装

npm install style-loader

const path=require("path")  //nodejs核心模块
 
module.exports={
 
   //入口
   entry:"./src/main.js",  //相对路径
   //输出
   output:{
      //文件的输出路径
      //__dirname  nodejs的变量，代表当前文件的文件夹目录
      path:"path.resolve(__dirname,"dist")",  //绝对路径
      //文件名
      filename:"main.js",
  
   },
   //加载器
   module: {
    rules: [
      // loader的配置
      {
        test: /\.css$/,  //只检测.css的文件
        use: [ //执行顺序：从右到左（从下到上）从css-loader开始执行，然后执行style-loader
          'style-loader',  //将js中css通过创建style标签添加到html文件中生效
          'css-loader' ,//将css资源编译成commonjs的模块到js中
         ]
      }
    ]
  },
   //插件
   plugins:[
    //plugin的配置
  
   ].
   //模式
   mode:"development",
};

 每次修改完要在终端打包！！！！！！！！ 

npx webpack

 每次修改打包都要删除旧的比较麻烦，可以加上

clean:true

output:{
      //文件的输出路径
      //__dirname  nodejs的变量，代表当前文件的文件夹目录
      path:"path.resolve(__dirname,"dist")",  //绝对路径
      //文件名
      filename:"main.js",
      //自动清理上次打包的内容
      //原理，在打包前，将path整个目录内容清空，再进行打包
      clean:true;
   },

二、处理less资源

 安装less-loader

npm install --save-dev less-loader less

const path=require("path")  //nodejs核心模块
 
module.exports={
 
   //入口
   entry:"./src/main.js",  //相对路径
   //输出
   output:{