# webpack-code

**Repository Path**: lhyu/webpack-code

## Basic Information

- **Project Name**: webpack-code
- **Description**: webpack学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-26
- **Last Updated**: 2024-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

> 注意：node版本需大于16

# 初始化

> 输入命令 npm init -y  生成package.json文件

下载依赖

> npm i webpack webpack-cli -D   // 下载依赖
>
> npx webpack ./src/main.js --mode=development    // 打包命令

文件介绍

```json
{
  "name": "webpack-study", // 不可以叫webpack
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gitee.com/lhyu/webpack-code.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

# 五大核心概念

* entry（入口）

> 指示webpack从哪个文件开始打包

* output（输出）

> 指示webpack打包完的文件输出到哪里去，如何命名等

* loader（加载器）

> webpack本身只能处理js、json等资源，其他资源需要借助loader，webpack才能解析

* plugins（插件）

> 扩展webpack的功能

* mode（模式）

> 主要有两种模式
>
> * 开发模式：development
> * 生产模式：production

# 准备webpack配置文件

在项目根目录下新建文件：webpack.config.js

```js
module.exports = {
    // 入口
    entry: '',
    // 输出
    output: {},
    // 加载器
    module: {
        rules: [],
    },
    // 插件
    plugins: [],
    // 模式
    mode: ''
}
```

webpack是基于node.js运行的，所以采用common.js模块化规范

进行上述配置后打包命令简化为： npx webpack

# 处理CSS资源

## 1、下载包

> npm i css-loader style-loader -D

注意：需要下载两个loader

## 2、功能介绍

* css-loader：负责将css文件编译成webpack能识别的模块
* style-loader：会动态的创建一个style标签，里面放置webpack中css模块内容

此时样式就会以style标签的形式在页面上生效

```js
// 加载器
    module: {
        rules: [
            // loader的配置
            {
                test: /\.css$/, // 只检测.css文件
                use: [ // 执行顺序：从右到左（从下至上）
                    'style-loader', // 将js中css通过创建style标签添加html文件中生效
                    'css-loader', // 将css资源编译成commonjs的模块到js中
                ]
            }
        ],
    },
```

# 更改输出路径

* js【filename配置】

```js
output: {
        // 输出路径
        path: path.resolve(__dirname, 'dist'), // 绝对路径, __dirname nodejs的变量，代表当前文件的文件夹目录
        // 入口文件打包输出文件名
        filename: 'js/main.js'
    },
```

图片资源【generator配置】

```js
   {
                test: /\.(png|jpe?g|gif|webp|svg)$/, 
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        // 小于10kb的图片转base64
                        // 有点：减少请求数量，缺点：体积会更大
                        maxSize: 10 * 1024, // 10kb
                    }
                },
                generator: {
                    // 输出图片名称
                    // filename: 'static/images/[hash][ext][query]'
                    filename: 'static/images/[hash:10][ext][query]' // [hash:10] 限制文件长度最多为十位，hash值取前十位
                }
            },
```

# 自动清空上次打包结果

> webpack.config.js=>output=>clean:true
>
> 原理：在打包前，将path中配置的地址【本项目中指dist】整个目录清空，再进行打包

# 处理图标资源

* 阿里图标库加入购物车==》在购物车中加入项目==》下载生成的压缩包==》从压缩包里找到对应的woff、woff2、css、ttf等文件
* 更改webpack.config.js配置

```js
{
                test: /\.(ttf|woff2?)$/, 
                type: 'asset/resource', // 不会转成base64
                generator: {
                    // 输出名称
                    filename: 'static/media/[hash:10][ext][query]'// [hash:10] 限制文件长度最多为十位，hash值取前十位
                }
            },
```

# 处理其他资源

```js
{
                test: /\.(ttf|woff2?|mp3|mp4|avi)$/, 
                type: 'asset/resource', // 不会转成base64
                generator: {
                    // 输出名称
                    filename: 'static/media/[hash:10][ext][query]'// [hash:10] 限制文件长度最多为十位，hash值取前十位
                }
            },
```

# 处理js资源

## Eslint

【https://blog.csdn.net/qq_39933787/article/details/136314065?spm=1001.2014.3001.5502】eslint部分

安装

> npm i eslint-webpack-plugin eslint -D

```js
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
```

.eslintrc.js

```js
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6, // es6
    sourceType: "module", // es module
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

```

可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

* `.eslintignore`

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

# babel

下载

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

webpack.config.js

```js
{
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
```

# 处理html资源

> 下载： npm i html-webpack-plugin -D
>
> 引入：
>
> 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
>
> // 开发服务器
> devServer: {
> host: "localhost", // 启动服务器域名
> port: "3000", // 启动服务器端口号
> open: true, // 是否自动打开浏览器
> },
>
> // 运行指令发生变化
>
> npx webpack serve
>
> # 生产模式准备工作

创建config文件夹，分别创建webpack.dev.js和webpack.prod.js

> 开发模式没有输出，因此path可以设置undefined，其余的绝对路径需要回退../，相对路径指的是代码运行环境相对
>
> 运行指令： npx webpack serve --config ./config/webpack.dev.js

> 生产模式不需要devServer
>
> 运行指令：npx webpack --config ./config/webpack.prod.js

配置运行指令package.json

```json
"scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
```

以后启动指令：

* 开发模式：`npm start` 或 `npm run dev`
* 生产模式：`npm run build`

# 提取css成单独文件[提高效率]

解决网络慢的情况下js引入样式过慢的问题【通过打包生成css文件】

# css兼容性处理