webpack

webpack 前端工程自动化的解决方案

本质底层 nodejs

初始化项目

在你的桌面上新建一个文件夹 nodejs-73
进入到这个目录内进行初始化操作 npm init -y

拷贝以下的安装命令等待安装

npm install webpack@5.58.2 webpack-cli@4.9.0 clean-webpack-plugin@4.0.0 webpack-dev-server@4.3.1 html-webpack-plugin@5.3.2 style-loader@3.3.0 css-loader@6.4.0 less-loader@10.1.0 less@4.1.2 url-loader@4.1.1 file-loader@6.2.0 babel-loader@8.2.2 @babel/core@7.15.8 @babel/plugin-proposal-decorators@7.15.8  jquery

新建好基本的目录结构

新建一个存放源代码的文件夹 src
1. 新增一个代码入口文件 index.js
新建一个静态页面模版文件夹 public
1. 新建一个静态页面 index.html

在 index.html 来引入 index.js - 相对路径

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>index.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
    <!-- 引入 src/index.js -->
    <script src="../src/index.js"></script>
  </head>
  <body>
    <!-- 隔行变色 -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </body>
</html>

在 index.js 来编写以下代码

import $ from 'jquery';

$(function () {
  $('li:odd').css('background-color', '#ccffcc');
  $('li:even').css('background-color', '#ffccff');
})

webpack简单的打包处理js

修改一下 package.json 多添加一行命令即可

  "scripts": {
    "build": "webpack"
  },

运行命令 npm run build

webpack 默认会去找 src/index.js 做为入口文件
根目录下看到 main.js 就是 webpack 处理了 src/index.js 之后的文件

静态页面 public/index.html 之前引入 ~~src/index.js~~ 修改为 dist/main.js

    <!-- 引入 src/index.js -->
    <!-- <script src="../src/index.js"></script> -->
    <script src="../dist/main.js"></script>

webpack 配置文件

新建一个 webpack的配置文件 webpack.config.js (固定)

在它里面编写好多想要基于webpack的设置。。。

const path = require("path");

// 1 修改  项目的入口js文件 不想在使用 src/index.js

module.exports = {
  // 修改入口文件
  entry: path.join(__dirname, "src", "index.js")
}

去修改了 src/index.js 颜色

$('li:odd').css('background-color', 'red');

再次运行命令 npm run build webpack 先寻找根目录下有没有 webpack.config.js

有 => 读取它运行

没有 => 沿用默认的入口文件
刷新页面

设置了webpack的出口文件

修改了webpack.config.js

module.exports = {
 	...
  // 修改 出口
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  }
}

webpack修改打包模式

mode 节点的可选值有两个，分别是：

① development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

② production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js

module.exports = {
  // 修改打包模式
  // 开发 development 
  // 生产 production 
  mode: "development",
}

webpack来清除打包后无关的文件

清除dist目录下无关的文件

利用 webpack的插件的能力 clean-webpack-plugin

安装插件（早上安装过了）

在 webpack.config.js

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanwebpackplugin = new CleanWebpackPlugin();

module.exports = {
   ...
  // 插件
  plugins: [
    cleanwebpackplugin
  ],
}

重新运行（观察 dist里面旧的打包的文件还在不在）

webpack可以自动根据根据代码修改自动打包

src/index.js 文件发生了改变希望

webpack自动帮我们重新打包新代码

自动帮我们弹出浏览器。。

自动帮我们刷新浏览器（像vscode-live server）

步骤

安装依赖 *webpack-dev-server* 早上已经安装过了

修改 package.json 中 **scripts ** "dev":"webpack serve",

  "scripts": {
    "dev":"webpack serve",
    "build": "webpack"
  },

修改 webpack.config.js

  // 指定开发服务器的配置
  devServer: {
    // 指定 打开页面的端口号 
    port: 9099,
    // 是否自动弹出浏览器
    open: true
  }

修改 public/index.html 引用的js文件路径
```
<script src="/bundle.js"></script>
```

修改 webpack.config.js 中的配置 filename: "bundle.js"

  output: {
    // 指定目录 
    path: path.join(__dirname, "dist"),
    // 指定文件名称
    filename: "bundle.js"
  },

运行的命令 npm run dev 自动弹出浏览器和修改颜色自动生效表示该配置成功！！

实现原理

使用上 webpack-dev-server dist 下找不到编译后的 js文件了
将那一些文件存在内存中。
该工具，加载的js文件默认认为文件文件是存放在根目录下！！文件名 bundle.js

webpack自动的帮我们在静态页面中来插入编译后js

实现在 public/index.html 自己引入编译好的js 文件

步骤

安装依赖 html-webpack-plugin

修改 public/index.html 把里面引入js的代码的部分注释掉

    <!-- 引入 src/index.js -->
    <!-- <script src="../src/index.js"></script> -->
    <!-- <script src="/bundle.js"></script> -->

修改 webpack.config.js

// 自动帮我们在 public/index.html 插入 编译好的js 
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlwebpackplugin = new HtmlWebpackPlugin({
  // 告诉它  我们的静态页面在哪个位置
  template: path.join(__dirname, "public", "index.html")
  // 会自动的找 js文件  bundle.js 
});

module.exports = {
  plugins: [
 htmlwebpackplugin
  ]
}

重新运行命令即可

webpack支持样式 css

loader webpack中专门用来处理 js和json之外的那一些文件

css -> loader

less -> loader

.png -> loader

*.vue ->

在 webpack中一切都是模块！！

所有功能相关的代码都可以在js中来实现！！！

后期引入样式文件的写法

新建了一个样式文件 css/index.css
```
ul > li {
  font-size: 100px;
}
```
找到 src/index.js 引入样式文件的代码
```
import "../css/index.css";
```

修改 webpack.config.js


  module: {
    rules: [
      // 识别  txt文件，交给  raw-loader
      // { test: /\.txt$/, use: 'raw-loader' }
      // 处理css  style-loader css-loader 
      // css-loader 用来解析css文件
      // style-loader 负责把css代码 内嵌的方式 插入到 html文件中 
      // 顺序 右 -> 左 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ],
  },

可以识别出 css文件！！

webpack支持 less

用法类似上面 支持css

新建一个 less文件 less/index.less
```
ul {
  li {
    color: red;
  }
}
```
在 src/index.js 来引入该文件
```
import "../less/index.less";
```

修改 webpack.config.js

  module: {
    rules: [
      // 处理css  style-loader css-loader 
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      // 识别less
      { test: /\.less$/, use: ['style-loader', 'css-loader', "less-loader"] },
    ],
  },

重启命令

webpack来识别图片

图片也是一种资源，自己一套使用图片的写法

存放一张图片 images/1.png

使用图片 src/index.js

// 引入图片
import imgSrc from "../images/1.png";

$('li:odd').css("background-image", `url(${imgSrc})`);

修改 webpack.config.js 去支持图片文件
```
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', "less-loader"] },
      // 处理图片文件
      { test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
    ],
  },
```
现在配置碰到了webpack- loader url-loaderbug

webpack 分有 4 和 5 版本

我们现在用得新 5的版本

新5版本中关于处理图片问题两种解决方案
1. 继续使用 4 版本推荐 url-loader （出现了问题）
2. 直接使用 5 版本内置 assets module
步骤：
1. 移除以前 url-loader 相关代码 **webpack.config.js **
```
// { test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },

    { test: /\.(jpg|png|gif)$/, type: 'asset/resource' }, 
```
base64

文件的格式

以前理解每一种文件都会有一个独特后缀名

base64 一串很长的字符串图片标签加载这段字符串的时候也能显示处理本来图片的模样

应用场景

网页中图片的话

图片比较小 1kb ，通过工具把它转成 base64 ，直接在页面中写上这个地址

减少http请求
图片比较大原图输出了不去做转换！！

调整目录结构

webpack使用babel来处理高级的js语法

在 src/index.js 编写了高级的语法

// js装饰器
function info(target) {
  target.abc = '哈哈哈哈哈哈哈，这是新语法';
}

// 下面的语法，表示给Person加了一个abc属性
@info
class Person { }

console.log(Person.abc);

修改配置 webpack.config.js

  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', "less-loader"] },
      { test: /\.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },
        // 使用babel 来处理 高级的js语法
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ],
  },

在根目录下新建关于 babel 配置文件 babel.config.js

module.exports = {
  // 声明 babel 可用的插件
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

WEBPACK配置

webpack

初始化项目

新建好基本的目录结构

webpack简单的打包处理js

webpack 配置文件

设置了webpack的出口文件

webpack修改打包模式

webpack来清除打包后无关的文件

webpack可以自动根据根据代码修改自动打包

步骤

实现原理

webpack自动的帮我们在静态页面中来插入编译后js

步骤

webpack支持样式 css

后期引入样式文件的写法

webpack支持 less

webpack来识别图片

现在配置 碰到了webpack- loader url-loaderbug

base64

调整目录结构

webpack使用babel来处理高级的js语法

现在配置碰到了webpack- loader url-loaderbug