学webpack基础后小结

允我一世牵挂
146 阅读2分钟

为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

学习webpack打包工具的原因

Webpack 本身功能比较少，只能处理 js 资源，一旦遇到 css 等其他资源就会报错。 所以我们学习 Webpack，就是主要学习如何处理其他资源。

基本使用

正如官网定义中所说的，webpack 是一个静态模块打包工具，它是以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了，Webpack 输出的文件叫做 bundle。
但是不可否认的是，单纯使用Webpack无论是在开发模式下还是生产模式下都是有局限性的

下载依赖

npm i webpack webpack-cli -D

启用webpack

  • 开发模式
npx webpack ./src/main.js --mode=development
  • 生产模式
npx webpack ./src/main.js --mode=production

基本配置

  1. entry（入口） ==> 指示 Webpack 从哪个文件开始打包

  2. output（输出） ==> 指示 Webpack 打包完的文件输出到哪里去，如何命名等

  3. loader（加载器） ==> webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

  4. plugins（插件） ==> 扩展 Webpack 的功能

  5. mode（模式） ==> 主要由两种模式：开发模式：development,生产模式：production

module.exports = {
  // 入口 相对路径和绝对路径都行
  entry: "",
  // 输出 必须是绝对路径
  output: {
      //开发模式时没有输出，不需要指定输出目录，所以设置为undefined
      path:undefind,
      filename:""  //js文件输出位置
      //clean:true
  },
  // 加载器
  module: {
    rules: [
    {
        test:/\.css$/,//匹配文件类型
        loader:"",       //只用一个加载器时
        use:["",""],      //使用多个加载器时使用
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
    }
    ],
  },
  // 插件
  plugins: [],
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 模式
  mode: "",
};

开发模式

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

1. 编译代码，使浏览器能识别运行

开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

2. 代码质量检查，树立代码规范

提前检查代码的一些隐患，让代码运行时能更加健壮。

提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

生产模式

生产模式是开发完成代码后，我们需要得到代码将来部署上线。

这个模式下我们主要对代码进行优化，让其运行性能更好。

优化主要从两个角度出发:

  1. 优化代码运行性能
  2. 优化代码打包速度

开发模式和生产模式配置主要区别

  1. 开发模式不需要输出目录
  2. 生产模式不需要server，要输出
  3. mode配置不一样，开发模式是 development,生产模式是production

webpack基础优化

由于webpack本身功能比较少，只能处理js资源

所以我们要处理：

  1. 样式资源：css,less,sass,scss,styl
  2. 图片资源
  3. 字体图标资源
  4. 音视频资源
  5. js资源：ESLint,babel
  6. html资源：自动引入js

css兼容性处理

在生产模式中

可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度

{
  // 其他省略
  "browserslist": ["last 2 version", "> 1%", "not dead"]
}

处理图片资源

过去在Webpack4时，我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在Webpack5已经将两个 Loader 功能内置到Webpack里了，我们只需要简单配置即可处理图片资源 依旧是在module的rules中添加

{
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        }
      },
  1. 优点：对于小于10kb的图片来说，不用去向服务器发送请求，减小服务器的压力
  2. 缺点：图片转换成base64后体积会大1/4，增加代码的体积

资源类型

1.asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。

2.asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。

3.asset/source 导出资源的源代码。之前通过使用 raw-loader 实现。

4.asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。

avatar
文章
阅读
粉丝