webpack基础篇

编程语言 2022-06-02 15:21:44 阅读次数: 0

目录

前言：

1.核心概念介绍

2.处理Css资源

3.处理图片资源

4.修改输出资源的名称和路径

5.自动清空上次打包资源

6.处理字体图标资源

7.处理其他资源

8.处理js资源

9.处理HTML资源

10.开发服务器&自动化

前言：

这篇文章目的是学习如何使用webpack，至于其他的不做过多废话。

Webpack 是一个静态资源打包工具。可以将一些文件（如es6语法、sass、less）编译成浏览器认识的代码，从而运行.

1.核心概念介绍

1.entry（入口）

   指示 Webpack 从哪个文件开始打包

2.output（输出）

  指示 Webpack 打包完的文件输出到哪里去，如何命名等

3.loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

4.plugins（插件）

扩展 Webpack 的功能

5.mode（模式）

主要由两种模式：

  • 开发模式：development
  • 生产模式：production

在项目根目录下新建文件：webpack.config.js

//Webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范
//运行指令 npx webpack

#修改配置文件
// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

2.处理Css资源

 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

Loaders | webpack 中文文档

2.1 配置css

步骤：先下载后配置

 下载：

npm i css-loader style-loader -D

 配置：

const path = require("path");

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

2.2 配置less 

还是先下载后配置

下载：

npm i less-loader -D

配置：

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"],
      },
------------------配置less start-----------------------------------------------
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
------------------配置less end---------------------------------------------
    ],
  },
  plugins: [],
  mode: "development",
};

小结：

以上实例，处理css资源无非先下载然后再配置，使用其他样式插件也是这样配置

3.处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

为什么样式资源没有呢？
因为经过 style-loader 的处理，样式资源打包到 入口文件（main.js） 里面去了，所以没有额外输出出来

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
     
--------------------处理图片资源 start---------------------
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
--------------------处理图片资源 end---------------------
    ],
  },
  plugins: [],
  mode: "development",
};

3.2  对图片资源进行优化

将小于某个大小的图片转化成 data URI 形式（Base64 格式）

注意：图片转base64优点是转为字符串不再发请求，缺点是体积会变大一点点

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
----------------------转base64 start----------------
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
----------------------转base64 end----------------
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4.修改输出资源的名称和路径

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
-------------将 js 文件输出到 static/js 目录中 start--------------------
    filename: "static/js/main.js", 
-------------将 js 文件输出到 static/js 目录中 end--------------------
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
-------------将图片文件输出到 static/imgs 目录中 start--------------------
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
-------------将图片文件输出到 static/imgs 目录中 end--------------------
      },
    ],
  },
  plugins: [],
  mode: "development",
};

5.自动清空上次打包资源

clean: true, // 自动将上次打包目录资源清空

在配置文件中的位置如图所示：

6.处理字体图标资源

在配置文件中的位置是module中的rules中：

      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },

7.处理其他资源

 开发中可能还存在一些其他资源，如音视频等，我们也一起处理了

注意哈:type: "asset",意思是转base64,这里是type: "asset/resource",意思就是原样输出(不做改变)

    {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        //就是在处理字体图标资源基础上增加其他文件类型，统一处理即可
        },
      },

8.处理js资源

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

8.1 Eslint 

 使用步骤还是先下载后配置

下载：

npm i eslint-webpack-plugin eslint -D

配置：(注意要新建文件 )   .eslintrc.js

一般我们都是使用继承，vue或react都有使用。

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

还要在webpack.config.js中配置：


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

module.exports = {
 
  module: {
    rules: [
     
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};

8.2 Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

使用步骤：

 下载：

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

配置：新建babel.config.js

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

配置webpack.config.js

    {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },

9.处理HTML资源

优点就是自动帮你引入，减少路径错误，省事

还是先下载包：
 

npm i html-webpack-plugin -D

配置：


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

module.exports = {
 
  module: {
    rules: [
   
    ],
  },
  plugins: [
    
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  mode: "development",
};

10.开发服务器&自动化

这个相信大家都不陌生，平时npm run dev 、serve、start、build之类的命令都是它的功劳。

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化

还是下载和配置

下载： 

npm i webpack-dev-server -D

配置：

//运行命令：npx webpack serve 
// 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

 

猜你喜欢

转载自blog.csdn.net/wanghaoyingand/article/details/125055826
今日推荐
周排行
常见的Web漏洞——CSRF
print2flash 使用
西瓜生活
Educational Codeforces Round 43 (Rated for Div. 2)
GPU内存详解
数学之美：脊回归 （ridge regression）
Golang学习笔记（三）打印格式化
2018中国大学生程序设计竞赛网络选拔赛补题
洛谷P1038 神经网络题解
Web前端---HTTP协议
每日归档
更多
2025-02-01(0)
2025-01-31(0)
2025-01-30(0)
2025-01-29(0)
2025-01-28(0)
2025-01-27(0)
2025-01-26(0)
2025-01-25(0)
2025-01-24(0)
2025-01-23(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022