webpack

什么是webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具 。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图 ，然后将你项目中所需的每一个模块组合成一个或多个 bundles ，它们均为静态资源，用于展示你的内容

• 打包： 将不同类型的资源按模块处理进行打包
• 静态：打包最终产出静态资源
• 模块：webpack 支持不同规范的模块化开发，如 ES Module、CommonJS 等可同时使用

安装 webpack

注意：全局安装可以直接使用 webpack 命令打包，但不推荐，避免将项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中， 可能会导致构建失败。

1、安装 webpack 和 webpack-cli， webpack-cli 是在 node 下运行所必须的

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

2、修改 package.json，增加"build": "webpack"

这里可以自行设置入口和出口，如 webpack --entry ./src/main.js --output-path ./build

{
   
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
   
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  }
}

3、运行 webpack 进行打包

npm run build

CSS loader

为什么需要 loader

默认情况下无法处理 css 、 less 文件，需要对文件进行转换，loader 就是起到一个转换的作用

css-loader 、 style-loader 、less-loader

css 并非 js 模块， 需要使用 css-loader 识别模块并解析出依赖关系， style-loader 才可以解析并生成样式

安装 css-loader 、 style-loader 、 less-loader

npm i css-loader -D
npm i style-loader -D
npm i less-loader -D

行内 css-loader

import "css-loader!../css/example.css";

配置文件中使用 css-loader 、 style-loader 、和 less-loader

webpack.config.js

const path = require("path");
module.exports = {
   
  entry: "./src/index.js",
  output: {
   
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },

  module: {
   
    rules: [
      {
   
        test: /\.css$/, // 一般是匹配我们所需要处理的文件类型正则表达式
        use: [
          // 注意顺序，需先添加 style-loader 才能解析样式
          // 按从上往下或从右往左顺序执行
          // 未配置 options 可简写未 use: ['style-loader', 'css-loader']
          {
   
            loader: "style-loader",
          },
          {
   
            loader: "css-loader",
          },
        ],
      },
      // 下面采用简写方式
      {
   
        test: /\.less$/,
        // 这里还是需要添加 css-loader
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
};

browserslistrc

为什么需要 browserslistrc

目前前端开发均采用工程化方式，不仅需要考虑对各类工具包的兼容性，需要考虑浏览器对 CSS 语法、 JS 语法的兼容性，browserslistrc 可以帮助我们完成目标环境配置。 browserslist 单独是没用的，需要结合 bable 、 autoprefixer 等工具来确定需转译的 JS 特性和需要添加的 CSS 浏览器前缀。它的查询数据来源于 Can I Use

配置 browserslistrc

package.json 增加如下代码，表示兼容市场占有率大于 1% 或最新两个版本或最近24个月有更新维护的浏览器

{
   
  "browserslist": [
    ">1%",
    "last 2 versions",
    "not dead",
    "not ie <= 8"
  ]
}

或

添加 .browerslistrc 配置文件书写如下代码

> 1%
last 2 versions
not dead
not ie <= 8

postcss

一个通过 JS 来转换样式的工具，以达到兼容性

安装 postcss

要在命令行中使用 postcss 还需安装 postcss-cli ，并安装 autoprefixer 添加前缀，最后生成待前缀的 css

npm i postcss -D
npm i postcss-cli -D
npx i autoprefixer -D
npx postcss --use autoprefixer  -o ret.css ./src/css/test.css

postcss-loader

应该放在 css-loader 之前加载，以加上前缀

{
   
  loader: "postcss-loader",
    options: {
   
    postcssOptions: {
   
      // plugins: [require("autoprefixer")],
      // postcss-preset-env 是一个预设——插件集合
      // 包含了autoprefixer，支持简写，当然 autoprefixer 也支持简写
      plugins: ["postcss-preset-env"],
    },
  }
}
// 顺序 [style-loader, css-loader, postcss-loader]

importLoaders 属性

在一个 css 文件中导入另一个 css 文件来使用其中的样式时，由于 css 被匹配到后 postcss-loader 先进行工作添加前缀，然后再把代码传递给 css-loader , css-loader 可以处理 @import 导入的内容或者 @import meida 、 url 之类的内容，但并不会再回头交给 postcss-loader 处理，而是直接交给 style-loader 进行展示，这样我们就需要用到 importLoaders 属性指定配置的 css-loader 作用于 @import 的资源之前有多少个 loader

{
   
  loader: "css-loader",
  options: {
   
    importLoaders: 1,
  },
}

File loader

安装 file-load

npm i file-load -d

使用 file-load

使用 file-loader 会在 /dist 目录中生成导出的图片，他会把文件名称、路径返回并拷贝到打包目录，还要分开请求图片，请求次数变多

img 标签中的图片

// 添加图片
function pckImg() {
   
  const oEle = document.createElement("div");
  const oImg = document.createElement("img");
  oImg.src = require("../img/webpack.png").default; // webpack5 得加 default
  oEle.appendChild(oImg);
  return oEle;
}

document.body.appendChild(pckImg());

// 配置 webpack rules
{
   
test: /\.(png|svg|gif|jpg|jpeg)$/,
use: ["file-loader"],
},

// 不使用 .default 的方法一
use: [
  {
   
    loader: "file-loader",
    options: {
   
      esModule: false, // 是否将导出的内容转为 esModule
    },
  },
],

// 不使用 .default 的方法二
import oImgSrc from "../img/webpack.png"
function pckImg() {
   
  const oEle = document.createElement("div");
  const oImg = document.createElement("img");
  oImg.src = oImgSrc;
  oEle.appendChild(oImg);
  return oEle;
}
document.body.appendChild(pckImg());

背景图片

// 添加盒子及 css
import "../css/img.css";
function pckImg()