webpack从入门到放弃（三：不同文件处理配置）

已于 2022-09-13 13:14:45 修改
阅读量341 收藏
点赞数 1
文章标签： webpack 前端 javascript
于 2022-09-09 22:08:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lmk666__/article/details/126767637
版权

处理样式资源

css

1、下载依赖

npm i css-loader style-loader -D

2、添加配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3、添加css资源

        现在添加css文件，main中引入就可以识别

        style-loader会动态 创建style标签插入到页面中

处理less资源

1、下载依赖

npm i less-loader -D

2、配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3、说明

less-loader的作用是将less资源转换为css资源，然后通过css-loader、style-loader解析

loader的生效顺序是自下而上、从右到左

处理 Sass 和 Scss 资源

1、下载依赖

npm i sass-loader sass -D

2、配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

处理 Styl 资源

1、下载依赖

npm i stylus-loader -D

2、配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

处理图片资源

webpack4中处理资源需要file-loader和url-loader，webpack5中不需要，直接添加配置就可以了

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
        //图片
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

这个时候会将图片打包成文件到dist中

优化图片资源

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
    ],
  },
  plugins: [],
  mode: "development",
};

这样会将体积较小的图片转换为base64格式，好处是页面加载图片是不需要请求，缺点是打包体积会变大

处理字体图标资源

阿里矢量图标

配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
    //解析图标资源
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

处理其他资源

音频视频等文件解析，只要加上匹配规则即可

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        
      },
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [],
  mode: "development",
};

JS资源处理

        js资源主要从两个角度考虑：语法规范检查和兼容性

        通过eslint检查语法规范，用babel兼容JS语法，这里只介绍如何配置，详细用法有机会补上

        Eslint

        webpack配置

        

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

        使用eslint检查需要添加eslint配置文件.eslintrc.js

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

下载vscode eslint插件可以不编译看到不符合配置的语法

babel

webpack配置

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

        同样需要添加babel配置文件 babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

        eslint和babel可以配置的内容比较多，这里暂时不详细介绍

处理html资源

        利用html-webpack-plugin插件，以index为模板生成html文件，并自动引入打包的js资源

        配置

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

补充

修改打包后的文件名称及自动清除之前打包内容

主要修改main.js打包文件名及图片打包命名，自动清除之前文件添加clean：true在output即可

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

以上配置用来在项目中添加单独类型文件解析和自学项目配置使用没问题，单独作为项目还远远不够，后面会介绍更多配置和优化方案

dn_666666
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack-----文件处理
Mori_Life的博客
10-12 224
一、CSS\less文件的处理 1）通过npm安装使用的loader npm install --save-dev css-loader 安装后出现+ css-loader@3.2.0即可配置成功！ css-loader只负责加载不负责解析css文件 npm install --save-dev style-loader 安装后出现+ style-loader@1...
webpack不同环境下的配置文件
weixin_45047039的博客
11-30 458
webpack不同环境下的配置文件前言一、通过函数方式指定打包模式二、多配置文件 前言 webpack中一些用法和特性都可以让我们在开发阶段拥有更好的开发体验，而这些开发体验提升的同时，我们的打包结果也会变得越来越臃肿。 那是因为在这些过程中，webpack为了实现这些特性，自动往打包结果中添加一些额外的内容，例如source map和HMR，它们都会往输出结果中添加额外的代码来实现各自的功能，但是这些额外的代码对于生产环境来说是冗余的。因为生产环境与开发环境有很大的差异，在生产环境中我们强调以更少量更
webpack - 文件处理
LYP_0320的博客
12-03 245
图片处理的场景 CSS中引入的图片 自动合成雪碧图 压缩图片 Base64 编码 用到的技术或插件 file-loader //css中引入图片 url-loader //base64 编码 img-loader //压缩图片 postcss-sprites //合成雪碧图 ...
26 webpack中文件处理
sinat_41212418的博客
12-13 289
文件处理 开发项目的时候，会使用许多文件资源，比如各种格式的图片，Svg，字体图标等等，这些都是需要配置相应的Loader转换之后，Webpack才能够正确解析它们。在本章节，我们将介绍如何在Webpack中处理各种文件资源。 处理图片资源 针对各种类型的图片处理最常用的就是File-loader和Url-loader。 File-loader的使用 File-loader的使用很简单，如其他Loader使用一样，需要在module.rules中进行配置： module.exports = { mo
Webpack学习笔记（二） —— 相关文件处理
miles-zh
02-27 276
处理sass npm i -D node-sass sass-loader 安装 sass-loader和node-sass webpack.config.js文件中module.exports对象中module模块rules增加规则 module:{ rules:[ // 用style-loader和css-loader处理css文件 ...
Webpack 从零入门到工程化实战.rar
12-29
在“Webpack 从零入门到工程化实战”中，你将学习到以下关键知识点： 1. **Webpack 基本概念**： - **Entry（入口）**：Webpack 构建的起点，定义了项目中的主文件。 - **Output（输出）**：配置构建后的文件路径...
webpack2-starter-kit：Webpack 2入门套件
01-30
一个简单的入门包，用于使用Webpack2，ES6（Babel）和Sass进行前端开发 要求 Node.js v6.9 + 纱线或npm客户 包括什么？ Webpack验证器 Webpack捆绑分析器 丑化 HotModuleReload（HMR） Sass> PostCSS（自动...
webpack5-starter-kit：Webpack 5入门套件
02-02
webpack5-starter-kit 具有webpack-dev-server配置（和Web组件）的Webpack 5。依存关系节点v12.16.0（或更高版本） 纱线v1.22（或更高版本）| NPM v6.13.4（或更高版本）通过CLI安装安装w5kit-cli npm install -g w5...
webpack4-starter-kit：Webpack 4入门套件
01-31
具有webpack-dev-server配置（和Web组件）的Webpack 4。 依存关系 节点v12.16.0（或更高版本） 纱线v1.22（或更高版本）| NPM v6.13.4（或更高版本） 通过CLI安装 安装w4kit-cli npm install -g w4kit-cli 启动...
webpack配置文件和常用配置项介绍
01-02
1、安装webpack 1.全局安装webpack：npm install webpack -g 或者转化了cnpm则将npm改为cnpm进行安装 2.进行初始化建立package.json文件记录插件，...一个项目可以设置多个配置文件，每个都可以有不同的功能。 2.webpa
webpack的基础使用、配置以及文件处理方式（图文为主）（一）
青椒的博客
03-28 365
1.简介 webpack是一个现代的js应用的静态模块打包工具 前端模块化 ■前端模块化: 在前面学习中,我已经用了大量的篇幅解释了为什么前端需要模块化。 而且我也提到了目前使用前端模块化的一些方案: AMD、CMD、CommonJS、 ES6。 在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。 并且在通过模块化开发完成了项目后,还需要处理模块间的各 种依...
webpack处理第三方文件的配置
程序员徐小白的博客
02-13 346
1.webpack处理第三方文件的过程 当发现不是js文件，会先去配置文件找有没有对应的第三方loader规则 如果找到对应的规则就会调用相应的loader处理这种文件，如果没有，就会报错 调用loader的顺序是从后往前 当最后一个loader处理完毕后，会将结果直接交给webpack进行打包 2.处理css的第三方loader 导入css 在导入页面的js文件中 import './css...
webpack中的loader(webpack遇到以非.js结尾的文件如何处理)
qq_46547179的博客
03-01 553
loader概述 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块，其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。 loader加载器的作用，协助webpack打包处理特定的文件模块，如： css-loader可以打包处理.css相关文件 less-loader可以打包处理.less相关文件 babel-loader可以打包处理webpack无法处理的高级JS语法 了解loader调用的过程 1.打包处理css文件
webpack处理不同文件下的图片
xYY_X_xYY的博客
08-05 185
文章目录一、使用file-loader处理CSS中的图片1.安装 css-loader 和 mini-css-extract-plugin2.配置loader和plugin处理css文件3. 安装file-loader依赖4. 配置file-loader依赖5. webpack 处理之后的效果二、使用html-withimg-loader处理HTML中的图片1.安装 html-withimg-loader依赖2. 配置html-withimg-loader依赖3. 安装 file-loader依赖4.配置f
webpack自定义loader解析指定后缀名文件
最新发布
学无止境
09-13 1123
webpack自定义loader解析指定后缀名文件
webpack-配置文件
weixin_45002586的博客
11-14 569
webpack-配置文件
2. Webpack配置文件
m0_71902265的博客
10-29 656
webpack
【Webpack基础】Webpack的定义、配置文件
小管打天下的博客
04-23 1153
目录1 Webpack的定义1.1 定义1.2 模块1.3 支持的模块类型2 配置文件2.1 基础2.2 基本配置2.2.1 入口文件2.2.2 目录名字2.2.3 配置文件起别名2.3 build命令执行webpack3 目录整理 1 Webpack的定义 1.1 定义 Webpack 只知道模块相关的事情（模块导入和导出） webpack 是一个模块打包的工具 常见的模块化规范有ES Module、CommonJS、AMD、CMD，而 Webpack 可以对这些模块化规范进行打包 官网解释： 1.
建立项目的webpack配置文件
zjsfdx的博客
10-19 677
1.在当前目录下新建2个文件夹 mkdir src mkdir dist(存放静态资源的文件夹)2.在当前目下新建index.html文件，引入打包后的bundle.js文件<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值