webpack5 学习笔记之基础篇准备工作准备 npm init -y 初始化项目配置安装 npm i webpa

准备工作

准备 npm init -y 初始化项目配置
安装 npm i webpack webpack-cli -D
使用 npx webpack ./src/main.js --mode=devolopment

npx 将根目录下的node_module 目录下的 .bin 临时添加为环境变量这样可以访问.bin 目录下的应用程序也就是webpack
./src/main.js 打包的入口文件
--mode=devolopment development 开发模式 production 生产模式（默认对代码进行压缩）

webpack 配置文件项目根目录下名称必须是 webpack.config.js因为是在node.js 中运行所以遵循 commonjs 规范即

// 暴露  module.exports = {}
//  引入 const fs = require('fs');

有了webpack.config.js文件再次使用 webpack 只需要 npx webpack 即可会自动寻找配置文件

webpack 核心配置 entry output module plugins mode

const path = require("path"); // nodejs核心模块，专门用来处理路径问题
module.exports = {
  // 入口
  entry: "./src/main.js", // 相对路径
  // 输出
  output: {
    // 所有文件的输出路径
    // __dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), // 绝对路径
    // 入口文件打包输出文件名
    filename: "/dist/main.js",
  },
  // 加载器
  module: {
    rules: [
      // loader的配置
    ],
  },
  // 插件
  plugins: [
  // 模式
  mode: "production",
};

处理样式文件

css 文件处理

npm i css-loader style-loader -D

module.exports = {
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        //  css-loader 将css资源 以 commonjs 规范打包到 js 中
        // style-loader  将 js 中的 css 资源 通过创建的style标签添加到 html 中生效
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

less 文件处理下载 less less-loader

npm i less less-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        // loader: 'xxx' 只能写一个loader
        //  less-loader 将less资源处理成css资源
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

处理 sass 文件下载 sass sass-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/,
        // loader: 'xxx' 只能写一个loader
        //  sass-loader 将.sass  .scss资源处理成css资源
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

处理 Styl 资源下载 stylus-loader

npm i stylus-loader -D

module.exports = {
  module: {
    rules: [
      {
        test: /\.styl$/,
        //  sass-loader 将.styl资源处理成css资源
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
};

处理图片资源 webpack5 之前 file-loader url-loader 现在已经内置不需要loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'assets',
        parser: {
          dataUrlCondition: {
          // 减少请求数量 // 缺点 体积会更大
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          },
      },
    ],
  },
};

更改输出的目录 js 资源打包到js 目录图片资源打包到静态资源 image 目录

module.exports = {
  entry: "./src/main.js",
  output: {
  //  path：定义打包输出的根目录 都打包在这个文件夹下
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到  path 定义下的 static/js 目录中
  },
  module: {
    rules: [
      {
        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]",
        },
      },
    ],
  },
};

自动清空上次打包的内

module.exports = {
  entry: "./src/main.js",
  output: {
  //  path：定义打包输出的根目录 都打包在这个文件夹下
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到  path 定义下的 static/js 目录中
    // 每次打包 将 path 下的内容清空
    clear: true
  }
 }

使用字体图标 iconfont 为例下载

打开阿里巴巴矢量图标库open in new window
选择想要的图标添加到购物车，统一下载到本地

添加到项目中

src/fonts/iconfont.ttf
src/fonts/iconfont.woff
src/fonts/iconfont.woff2
src/css/iconfont.css

引入 src/css/iconfont.css

注意 iconfont.css 中需要修改引入 .ttf .woff .woff2 的路径具体以项目实际放到了哪里为准最佳的实践就是创建 font 文件夹在静态 static 放入三个文件

使用

    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>

webpack 打包配置

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中
    clean: true, // 自动将上次打包目录资源清空
  },
  module: {
    rules: [
        {
        test: /.(ttf|woff2?)$/,
        // `type: "asset/resource"`和`type: "asset"`的区别：
        // 1.  `type: "asset/resource"` 相当于`file-loader`, 将文件转化成 Webpack能识别的资源，其他不做处理
        // 2.  `type: "asset"` 相当于`url-loader`, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ]
   }
  }

处理其它的资源比如 mp3 mp4 avi 只需要原封不动的打包输出到 path 目录下所以和上面处理字体基本一致

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

eslit 语法检查工具在编译之前检查第一步

在项目根目录下首先要写配置文件一下三种名称
.eslintrc
.eslintrc.js
.eslintrc.json 以 .eslintrc.js 为例

module.exports = {
  // 解析选项
  parserOptions: {
    ecmaVersion: 6, // ES 语法版本
    sourceType: "module", // ES 模块化
    ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
},
  // 具体检查规则
  rules: {
  },
  // 开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。
  extends: [],
  // ...
};

rules 规则

"off" 或 0 - 关闭规则
"warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
"error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

在webpack 中使用 eslit

下载包 eslit eslint-webpack-plugin 插件

npm i eslint-webpack-plugin eslint -D

webpack.config.js 中配置

const ESLintWebpackPlugin = require("eslint-webpack-plugin");
plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录 只检查 src 目录下的文件
      context: path.resolve(__dirname, "src"),
    }),
  ],

vsCode 插件 eslint 可以在编写代码是第一时间报告错误标红标黄等要忽略部分文件需要编写 .eslintignore 文件 eg:

# 忽略dist目录下所有文件
dist

babel 处理将 es6 高版本语法转换低版本语法向下兼容

配置文件
babel.config.*：新建文件，位于项目根目录
- babel.config.js
- babel.config.json
.babelrc.*：新建文件，位于项目根目录
- .babelrc
- .babelrc.js
- .babelrc.json
下载包

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

配置内容配置文件中文件写法

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

webpack.config.js 写法

    {
        test: /.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
        options: {
            presets: ["@babel/preset-env"]
        }
    }

处理HTML 资源

下载插件

npm i html-webpack-plugin -D

webpack.config.js

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

开发服务器自动化

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

下载

npm i webpack-dev-server -D

配置

wbpack.config.js

module.exports = {
...
 // 开发服务器
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  mode: "development",
}

启动服务

npx webpack serve

注意编译打包结果只存在内存中输出目录并不产生文件

打包 css 资源为单独文件

下载

npm i mini-css-extract-plugin -D

配置 webpack.prod.js 生产模式配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
原先所有用到style-loader 的地方改成  MiniCssExtractPlugin.loader
  rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
      {
        test: /.less$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /.styl$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "stylus-loader"],
      },
     ]

插件需要调用

// 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),

css兼容性处理

下载

npm i postcss-loader postcss postcss-preset-env -D

配置

rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  "postcss-preset-env", // 能解决大多数样式兼容性问题
                ],
              },
            },
          },
        ],
      },

package.json

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

css 压缩

下载

npm i css-minimizer-webpack-plugin -D

2 使用

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
plugins: [
    // 提取css成单独文件
    new MiniCssExtractPlugin({
      // 定义输出文件名和目录
      filename: "static/css/main.css",
    }),
    // css压缩
    new CssMinimizerPlugin(),
  ]

html 压缩

默认生产模式已经开启了：html 压缩和 js 压缩不需要额外进行配置

webpack5 学习笔记 之基础篇