# webpack学习

**Repository Path**: liuyaxiang/webpack-learning

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-10
- **Last Updated**: 2023-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 普通项目使用 webpack

- `npm install webpack@5.42.1 webpack-cli@4.7.2 --save-dev`
- `npm install webpack@5.42.1 webpack-cli@4.7.2 --D`

以上两种同等   -S 为 --save 的缩写  -D 为 --save-dev

# 配置webpack

- 在项目根目录下创建一个webpack.config.js 的webpack配置文件，并初始化基本配置

```JS
module.exports = {
    mode: 'development' // mode字段用于指定构建模式 可选值为开发模式与生产模式 'development' & 'production'
}
```

- 在初始化完毕后,在package.json的script节点中新增一个脚本
  - 在此节点中为可执行脚本,通过npm run 来执行对应命令
    - 在执行后会运行对应值的配置

```json
"dev":"webpack"
```

# 注意点

- 在运行脚本时,请注意文件夹结构

```sh
├── node_modules		# 下载的 npm 包资源
├── src					# 项目托管文件夹,源代码问价你
│   │── index.html		# HTML
│   └── index.js		# JS
├── package.json		# npm init 配置文件
├── package-lock.json	# npm 历史记录
└── webpack.config.js	# webpack 配置文件
```

- 在webpack 4.x 和 5.x 的版本中,会默认进行一下处理

  - 默认打包的入口文件为 src  -> index.js

  - 默认的输出为文件为 dist  -> main.js

  - 在需要修改默认情况时需要定义,在配置文件中添加以下字段

    ```js
    	entry: path.join(__dirname, './src/index.js'),
        output: { 
            path: path.join(__dirname, 'dist'), 
            filename: 'main.js'
        }
    
    npm uninstall webpack webpack-cli webpack-dev-server jquery
    ```
    


# webpack 中的插件

- 在使用中,随着代码的更新,每次需要预览效果时都需要反复的进行打包,导致速度大打折扣所以这时就需要一些插件完成自动打包

## webpack-dev-server

- 这个插件为根据文件的改动自动重新打包指向文件

- `npm install webpack-dev-server@3.11.2 -D`

- 安装完成后需要在package.json中修改脚本

  ```js
  "dev": "webpack server"
  ```

- 在使用此包时,在进行运行后随动打包的文件不会存储与实际物理磁盘中,为了防止物理存储盘的频繁读写,会将实际的打包文件放置于内存中.

  - 所以此时需要在index.html中应用内存中的打包资源

    ```html
     <script src="/main.js"></script>
    ```

## html-webpack-plugin

- 解决运行 npm run dev 时根据链接无法自动读取index.html的问题

  - 安装完成后需要在webpack.config.js 中进行调用配置

    ```js
    const htmlPlugin = require('html-webpack-plugin')
    const _htmlPlugin = new htmlPlugin({
        template: './src/index.html',
        filename: "./index.html"
    })
    ```

  - 配置完毕后需要在 plugins字段中添加此插件的实例.

    ```js
    plugins: [_htmlPlugin]
    ```

- 使用插件复制的页面同理也会将页面注入到内存中

- 此插件会在复制的页面中自动注入打包的文件

## webpack 中的 loader

- 在实际的开发过程中，webpack默认只能打包处理一些一 .js 为后缀文件名的模块。其他的非JS文件webpack默认不会进行打包等操作，此时需要一些loader加载进行打包处理.
- loader加载器的作用 ，就是协助webpack来打包特定文件，比如
  - css-loader  打包处理  .css 文件
  - less-loader    =>  .less
  - babel-loader    =>   处理webpack 无法处理的高级JS语法



<img src="src\assets\images\1666681687072.jpg" alt="s" style="zoom:100%;" />

### style-loader  、 css-loader

- 在使用时在 webpack 的 rules 中添加对应的 loader 规则

  - ` npm install  style-loader@3.0.0 css-loader@5.2.6 -D  `
  - 在webpack.config.js 中 添加一个module字段，并且在字段中添加一个为rules的字段来指定的文件及处理的加载器
    - 关于填写use字段的问题，需要根据对应的loader包文档填写.（因为正在webpack的loader中调用时是从后至前的）
      - 先把对应的文件(index.css)，转交给loader
      - loader 在根据rules规则查找对应处理，在css-loader 处理完成后，再继续转交给style-loader，处理完成后发现没有其他的预设loader
      - 将最后的结果转交给webpack  ，webpack获取到结果在合并到打包文件中，最后生成这个打包文件.

  ```js
  module: { 
          rules: [ 
              { test: /\.css$/, use: ['style-loader', 'css-loader'] }
          ]
  },
  ```

### less-loader

- 需要下载 less 的核心包

  - npm install less  less-loader -D

  ```js
   { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
  ```

  - less 不需要在任何地方声明使用，它是一个内置依赖项.

### url-loader、file-loader

- 在项目的图片处理中，每一次的图片使用都占用一次浏览器的网路请求
- 为了减少此类的网络请求我们可以使用 Beas64编码图片来处理

```html
<img src="./assets/images/1666681687072.jpg" alt="" />
```

- npm install url-loader file-loader
  - file-loader 会在url-loader 使用时查找并使用

```
{ test: /\.png|jpg|gif$/, use: 'url-loader' }
```

### babel-loader

-  在书写一些JS的新特性时可能导致webpack不识别，这时需要一些loader来进行处理.

```js
function info(target) {
    target.info = 'Person info'
}

@info
class Person { }

console.log(Person); 
```

- npm install babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
  - exclude 为排除项

```js
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
```

- 在配置完毕后需要在根级目录下创建一个 babel.config.js 
  - 用于定义babel 使用那些插件 
  - 实际配置方法可以查阅babel官网



# 打包配置 build

- 在package.json 的scripts节点中添加一个 任意命令 （build),并且赋值为 `webpack --mode production`

```json
"scripts": {
    "dev": "webpack server",
    "build": "webpack --mode production"
},
```

- 每次执行时都会去读取webpack的配置，这里需要修改模式为生产模式

## 打包文件的分类存储

- 在继续默认的打包处理时，各类型文件比较杂乱.

- 在 output 中配置

  ```json
  filename: 'js/main.js'
  ```

- 在图片处理的lodaer中修改字段

  - 配置多参数时参考URL传参使用

  ```js
  { test: /\.png|jpg|gif$/, use: 'url-loader?limit=22229&outpurPath=imgaes' }
  ```

  或者使用(不推荐)

  ```js
  {
      test: /\.png|jpg|gif$/,
      use: {
          loader: 'url-loader',
          options: {
              limit: 22229,
              outputPath: 'images'
          }
      }
  }
  ```

## 自动删除上一次的dist（打包文件夹)

- 每次重新打包时自动清理掉上一次打包的dist文件夹,防止出现重复文件和旧文件残留问题.

- 安装插件 `clean-webpack-plugin`

  - `npm install --save-dev clean-webpack-plugin`

  ```js
  // 在webpack.config.js中导入方法
  const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  // 在plugins字段中添加方法
  plugins: [_htmlPlugin, new CleanWebpackPlugin()]
  ```

  

# Source Map

- 在项目打包完成后以  .map 为后缀的文件为文件位置信息文件.
- Source Map 为信息文件，里面存储的文件位置信息，其中存储的压缩混淆后的代码所对应的之前的位置信息,在获取出现报错或者代码错误时可以快速的获取问题原始代码的文件信息与位置信息以及具体行号.

- 在默认的情况下 Source Map 记录的是生成后的代码位置.导致运行报错的源代码行号与当前报错行号不符.
- 需要对 Source Map 进行配置
  - 仅为开发阶段的配置，在生产时需要关闭此字段

```js
// 在webpack.config.js 中添加devtool字段赋值为eval-source-map
devtool:'eval-source-map'
```

- 如果需要在线上模式也能定位至源码中的行号而不暴露源码文件

```json
devtool:'nosources-source-map'
```



# 配置文件资源路径

-  在项目中资源引入在多级操作时会因为文件的引入造成地址拼接繁琐且杂乱

  - 文件会以当前路径进行查找
  - 统一资源查找，在webpack.config.js 中添加resolve字段配置alias

  ```js
  resolve: {
          alias: {
              '@': path.join(__dirname, './src/')
          }
  },
  ```

- 配置完成后在引入资源时 @ 则为项目根目录.