webpack5（一）

什么是webpack

webpack是一个静态资源打包工具，它会以一个或者多个文件作为打包的入口，将整个项目的所有文件编译组合成一个或多个文件输出出去。输出的文件就是变异好的文件，可以在浏览器端运行。一般将 webpack 输出的文件称为 bandle 。

webpack 本身的功能也是有限的，一共有两种模式：

开发模式：仅能编译js中 ES Module 语法。

生产模式：可以编译js中 ES Module 语法，还可以压缩 js 代码。

为什么需要打包工具

开发时，一般会使用框架、ES6模块化语法、css预处理器等语法进行开发，这样的代码如果想在浏览器运行必须经过编译，成为浏览器能识别的 js、css 等语法后才能运行。

打包工具就是用来编译代码的。同时还可以压缩代码、做兼容性处理、提升代码性能等。

目前一些常用的打包工具：

Grunt、Gulp、Parcel、Webpack、Vite 等等。

npm 和 npx

npm是用来下载包的

npx 是将node_modules文件夹中的 .bin 目录临时添加为环境变量，这样就可以访问该环境变量下的应用程序

npx的作用如下：

1.默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；

2.如果存在，它将执行；

3.若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；

假设有一个名为my-package的软件包，想要执行它。

好吧，若没有npx，要执行一个软件包，必须通过其本地路径运行来完成，如下所示：

./node_modules/bin/my-package

或在 package.json文件的 scripts section中将其定义为单独的脚本，如下所示：

{
    "name":"something",
    "version": "1.0.0",
    "scripts": {
        "my-package":"./node_modules/bin/my-package"
    }
}

然后使用npm run my-package运行。

现在，运用npx，只需运行npx my-package.，即可轻松实现此目的。

webpack的配置有哪些？核心概念？

webpack有5大核心概念：

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

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

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

4. plugins（插件）扩展webpack的功能。

5. mode（模式）开发和生产两种模式 development/production。

⚠️注意：output 中的 path 是全部文件的输出路径；但 filename指的只是入口文件输出后的路径。

clean：true，设置打包前清空

webpack.config.js 文件：

const path = require("path") //固定写法 node中的核心模块，专门用来处理路径问题

//依赖于node中的common.js模块化
module.exports = {
    //入口
    entry:'./src/main.js',//相对路径
    //出口 文件的输出路径 一个对象 包含路径和文件名
    output:{
        // __dirname node.js中的变量 用来表示当前文件的文件夹目录
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'main.js',
        clean:true,//自动清空上次打包的内容，其实就是在打包前，将整个path目录进行清空，再打包
    },
    //loader 加载器
    module:{
        rules:[
            //loader的配置
        ],
    },
    //plugin 插件
    plugins:[
        //plugin的配置
    ],
    //模式
    mode:'development'//或 production
}

什么是开发模式

如何处理样式资源

如果需要webpack进行打包，那么必须在入口文件进行引入。

css/less/sass/stylus 都有自己对应的loader，不同的是，如果使用预处理器，预处理器的loader会先将预处理器处理为css文件，然后再继续执行，即将css代码编译成coomonjs模块放入js，再将js中的css文件通过创建style标签的方式加入到html中。

1.npm install 需要下载的loader

2.配置方式/内联方式（不推荐）

在webpack.config.js中进行配置：

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, //只检测.css文件
        //执行顺序为从右到左，从下至上
        use: [
              'style-loader',//将js中css文件通过创建style标签添加到html中生效
              'css-loader'//将css代码编译为common.js模块放到js中
             ]
      },
    ],
  },
};

3.将需要打包的资源在入口文件引入。

如何进行图片和字体图标处理

webpack4 中通过 file-loader 和 url-loader 进行图片资源的处理，但是在 webpack5 中，已经将两个 loader 内置到 webpack 中了，只需要简单配置。

项目中的图片优化：

习惯将小于10kb的图片转换为base64（DataUri），减少请求，减轻服务器压力。

对于过大的图片，不适合转为base64，因为转为base64文件体积会变大，越大的图片增加的体积越大，导致整体页面的加载速度变慢。

module.exports = {
  module: {
    rules: [
      { test: /\.(png|jpg|gif)$/, //需要查看的图片后缀
        type:"asset",
        parser:{
            dataUrlCondition:{
                //小于10kb的图片转换为base64
                maxSize:10*1024,//10kb
      },
    ],
  },
};

处理字体图标资源

此时不需要进行 base64 的转换，type 类型也是 asset 下的 resource

module.exports = {
  module: {
    rules: [
      { test: /\.(ttf｜woff2?)$/, //需要查看的图片后缀
        type:"asset/resource",
        //也是可以设施generator的值
        generator:{
            filename:"static/media/[hash]/[ext]/[query]",
        }

    ],
  },
};

怎样操作输出文件的打包目录

当我们希望打包出来的文件不是全部堆砌在.dist目录下，希望进行 js/image 的分级目录时：

output中更改 js 输出后的文件路径：

output:{
        path:path.resolve(__dirname,'dist'),//绝对路径
        filename:'static/js/main.js',
    },

module下 rule 中和 asset 同级定义generator

module: {
    rules: [
      { test: /\.(png|jpg|gif)$/, //需要查看的图片后缀
        type:"asset",
        parser:{
            dataUrlCondition:{
                //小于10kb的图片转换为base64
                maxSize:10*1024,//10kb
        },
        generator:{
            //输出的图片名称
            //hash指的是打包完成后，图片会被打包为一串字母数字，此值即为hash值，
            //hash值如果觉得太长可以设置为[hash:10],为只取前十位
            //ext 指的是文件后缀名
            filename:"static/image/[hash]/[ext]/[query]",
        }
    ],
  },

此时，.dist目录下会有一个static文件夹，static文件夹下有两个文件夹，js文件夹下是打包好的入口文件，image文件夹下是打包好的图片资源。