Webpack处理样式

样式处理前需要在根目录下创建文件

webpack.config.js

 需要建立5大核心概念

const path = require("path");
module.exports = {
  entry: "./src/mian.js", //入口文件 指示Webpack从那个文件开始打包 路径相对路径
  output: {
    path: path.resolve(__dirname, "dist"), //文件输出路径 绝对路径
    filename: "main.js", //文件名
  }, //输出文件，指示webpack打包完的文件输出到哪里去，如何命名等
  module: {
    rules: [],
  }, //加载器 webpack本身只能处理js.json等资源，其他资源需要借助loader,Webpack才能解析
  plugins: [], //插件 扩展Webpack的功能
  mode: "development", //模式 主要由两种模式：开发模式：development 生产模式：production
};

处理css样式资源

‘下载包

1.npm i css-loader style-loader -D

2.npm install --save-dev css-loader

      {
        test:/\.css$/,
        use:['style-loader','css-loader',{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:['postcss-preset-env'],
            }
          }
        }],
      
      },

 处理less 样式

下载包

1.npm i less-loader -D

2.npm install less less-loader --save-dev

      {
        test:/\.less$/,
        use:['style-loader','css-loader',{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:['postcss-preset-env'],
            }
          }
        },
      'less-loader'
      ], 
      },

  处理scss 样式

下载包

 1. npm i sass-loader sass -D

 2.npm install sass-loader sass webpack --save-dev

      {
        test:/\.s[ac]ss$/,
        use:['style-loader','css-loader',{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:['postcss-preset-env'],
            }
          }
        },
      'sass-loader'
      ], 
      },

处理style 

      {
        test:/\.styl$/,
        use:['style-loader','css-loader',{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:['postcss-preset-env'],
            }
          }
        },
      'stylus-loader'
      ], 
      },

样式处理封装公共方法

const getStyleloaders=(pre)=>{
  return [
    'style-loader','css-loader',{
      loader:"postcss-loader",
      options:{
        postcssOptions:{
          plugins:['postcss-preset-env'],
        }
      }
    },
    pre
  ].filter(Boolean)
}

 处理图片

   //处理图片
      {
        test: /\.(png|jpg|gif|webp|svg)$/,
        type: 'asset',
       parser: {
         dataUrlCondition: {
          //小于10kb的图片转base64
          //优点：减少请求数量 缺点：体积会更大
           maxSize: 10 * 1024 // 一般来说10kb
         }
       }
      }

修改图片打包路径的

    //处理图片
      {
        test: /\.(png|jpg|gif|webp|svg)$/,
        type: 'asset',
       parser: {
         dataUrlCondition: {
          //小于10kb的图片转base64
          //优点：减少请求数量 缺点：体积会更大
           maxSize: 10 * 1024 // 一般来说10kb
         }
       },
       //修改图片位置
       generator: {
        //输出图片名称
        //[hash:10] hash值取前10位
        filename: 'static/[hash:10][ext][query]'
      }
      }

自动清空上次打包内容

  output: {
    path: path.resolve(__dirname, "dist"), //文件输出路径 绝对路径
    filename: "static/js/main.js", //文件名
    //原理：在打包前，将path整个目录内容清空再进行打包
    clean:true //清空上次打包结果
  }, //输出文件，指示webpack打包完的文件输出到哪里去，如何命名等

处理字体图标资源

阿里巴巴图标库

iconfont-阿里巴巴矢量图标库

需要注册，

      //处理图标
      {
        test: /\.(ttf|woff2?)$/,
        type: 'asset/resource',
       //修改图片位置
       generator: {
        //输出图片名称
        //[hash:10] hash值取前10位
        filename: 'static/media/[hash:10][ext][query]'
      }
      }

处理其他资源 如视频等信息

  //处理图标 如果存在其他资源请在test 里面添加
      {
        test: /\.(ttf|woff2?|map3|mp4|avi)$/,
        type: 'asset/resource',
       //修改图片位置
       generator: {
        //输出图片名称
        //[hash:10] hash值取前10位
        filename: 'static/media/[hash:10][ext][query]'
      }
      }

处理js资源（浏览完兼容性处理）

Eslint

1.下载包

1.npm i eslint -webpack-plugin eslint -D

2.npm install eslint-webpack-plugin --save-dev

3.npm install eslint --save-dev

如果 配置没生效，请vscode 安装 ESLint 插件

 const EslintWebpackPlugin=require('eslint-webpack-plugin')
 new EslintWebpackPlugin({
context:path.resolve(__dirname,'../src'),
exclude:'node_modules',
cache:true,
cacheLocation:path.resolve(__dirname,'../node_modules/.cache/.eslintcache'),
      })
    ]
  }

根目录下创建.eslintrc.js 文件，文件内容如下：

module.exports={
  extends:['react-app'],//继承react官方规则
  parserOptions:{
    babelOptions:{
      presets:[
        //解决页面报错问题
        ['babel-preset-react-app',false],
        'babel-preset-react-app/prod',
      ]
    }
  }
}

Babel  javaScript 编译器

1.配置文件 

babel.config.js 新建文件位于项目根目录 

下载依赖 

npm install -D babel-loader @babel/core @babel/preset-env

{
  test:/\.jsx?$/,
  include:path.resolve(__dirname,'../src'),
  loader:'babel-loader',
  options:{
    cacheDirectory:true,
    cacheCompression:false
  },
}

 babel.config.js文件

module.exports={
  //预设
  presets:['@babel/preset-env'],
}

 处理Html资源

下载包

1.npm i html-webpack-plugin -D 

2.npm install html-minimizer-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');
  plugins: [
    new ESLintPlugin({
      context:path.resolve(__dirname, "src"),//哪些文件需要检查 检测src 下文件
    }),//ESlint
    new HtmlWebpackPlugin(
      {
        //以./public/index.html文件创建新的html文件
        //新的文件特点,1.结构和原来一致，2.会自动引入打包生成资源
        template:path.resolve(__dirname,'./public/index.html')
      }
    ),
  ], //插件 扩展Webpack的功能

前端目前资源已经全部处理了，

webpack 开发服务器&自动化

npm i webpack-dev-server -D

npx webpack serve  启动项目

​
  // 开发服务器
  devServer:{
host:"localhost",//启动服务器域名
open:true,//是否自动打开浏览器
  },

​

/*
 * @Description: 
 * @Author: 莲白
 * @Date: 2022-09-07 19:34:18
 * @LastEditTime: 2022-09-09 09:17:13
 * @LastEditors: 莲白
 */

/**
 * 生产模式的代码
 */
 const path = require("path");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 module.exports = {
   entry: "./src/mian.js", //入口文件 指示Webpack从那个文件开始打包 路径相对路径
   output: {
     path: path.resolve(__dirname, "../dist"), //文件输出路径 绝对路径
     filename: "static/js/main.js", //文件名
     //原理：在打包前，将path整个目录内容清空再进行打包
     clean: true, //清空上次打包结果
   }, //输出文件，指示webpack打包完的文件输出到哪里去，如何命名等
   module: {
     rules: [
       //处理css样式
       {
         test: /\.css$/i,
         use: ["style-loader", "css-loader"],
       },
       //处理less样式
       {
         test: /\.less$/i,
         use: ["style-loader", "css-loader", "less-loader"],
       },
       //处理sass样式
       {
         test: /\.s[ac]ss$/i,
         use: [
           // 将 JS 字符串生成为 style 节点
           "style-loader",
           // 将 CSS 转化成 CommonJS 模块
           "css-loader",
           // 将 Sass 编译成 CSS
           "sass-loader",
         ],
       },
       //处理图片
       {
         test: /\.(png|jpg|gif|webp|svg)$/,
         type: "asset",
         parser: {
           dataUrlCondition: {
             //小于10kb的图片转base64
             //优点：减少请求数量 缺点：体积会更大
             maxSize: 10 * 1024, // 一般来说10kb
           },
         },
         //修改图片位置
         generator: {
           //输出图片名称
           //[hash:10] hash值取前10位
           filename: "static/images/[hash:10][ext][query]",
         },
       },
       //处理图标 如果存在其他资源请在test 里面添加
       {
         test: /\.(ttf|woff2?|map3|mp4|avi)$/,
         type: "asset/resource",
         //修改图片位置
         generator: {
           //输出图片名称
           //[hash:10] hash值取前10位
           filename: "static/media/[hash:10][ext][query]",
         },
       },
       //babel 处理
       {
         test: /\.js$/,
         exclude: /(node_modules)/, // 排除node_modules文件不处理
         use: {
           loader: "babel-loader",
         },
       },
     ],
   }, //加载器 webpack本身只能处理js.json等资源，其他资源需要借助loader,Webpack才能解析
   plugins: [
     new ESLintPlugin({
       context: path.resolve(__dirname, "src"), //哪些文件需要检查 检测src 下文件
     }), //ESlint
     new HtmlWebpackPlugin({
       //以./public/index.html文件创建新的html文件
       //新的文件特点,1.结构和原来一致，2.会自动引入打包生成资源
       template: path.resolve(__dirname, "./public/index.html"),
     }),
   ], //插件 扩展Webpack的功能
   // 开发服务器
   devServer: {
     host: "localhost", //启动服务器域名
     // prot: 3333, //启动服务器端口号
     open: true, //是否自动打开浏览器
 
   },
   mode: "development", //模式 主要由两种模式：开发模式：development 生产模式：production
 };