# Webpack

**Repository Path**: huatree/Webpack

## Basic Information

- **Project Name**: Webpack
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-19
- **Last Updated**: 2022-01-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack-examples

> wyh | 2021-04-19

**说明：**

1. 纯webpack配置搭建，无任何脚手架参与。

2. 每个例子包含`src`目录或`src`目录与`webpack.config.js`文件，替换运行即可。

3. `webpack.config.js`依赖`package.json`中引入的包。

4. 注意查看package.json引入依赖的版本，因为版本不同，对应的写法也有所改变。

## 00 webpack初体验

> 2021-04-19

五个核心：entry、output、loader、plugins、mode

1. webpack能处理js/json资源，不能处理css/img等其他资源

2. 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化

3. 生产环境比开发环境多一个压缩js代码。

## 01 打包样式资源

> 2021-04-19

**注意：**

`yarn less less-loader -D`中的less别忘了依赖下载

## 02 打包html资源

> 2021-04-19

用到插件：`html-webpack-plugin`

## 03 打包图片资源

> 2021-04-19

需下载：`url-loader` 、`file-loader`，能处理样式中url引入的图片，不能处理html中img引入的图片

```js
options: {
          limit: 8 * 1024 // 图片小于8kb，就会处理成base64
        }
```

优点: 减少请求数量（减轻服务器压力）

缺点：图片体积会更大（文件请求速度更慢）

`html-loader`解决html中img引入的图片，这里注意关闭es6模块化，使用commonjs解析，即`esModule: false`

## 04 打包其他资源

> 2021-04-19

打包字体样式等

用到：`file-loader`，合理利用排除法`exclude: /\.(css|js|html|less)$/`。

## 05 devServer

> 2021-04-19

**注意：**

用到`webpack-dev-server`是，可能会出现`Cannot find module 'webpack-dev-server/bin/cli-flags`错误，调整版本，结合官方文档配置

```json
"scripts": {
    "start": "webpack serve"
  },
```

## 06 开发环境基本配置

> 2021-04-19

**注意：**

 打包资源到对应的目录：`outputPath: 'xxx'`

## 07 提取css成单独文件

> 2021-04-19

用到插件`mini-css-extract-plugin`，loader的写法有所不同。

## 08 css兼容性处理

> 2021-04-20

```bash
yarn add postcss-loader postcss-preset-env -D
```

## 09 压缩 css

> 2021-04-20

```bash
yarn add optimize-css-assets-webpack-plugin -D
```

## 10 js语法检查

> 2021-04-20

```bash
yarn add eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D
```

**注意：**

别忘了package.json中添加如下配置：

```json
 "eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }
```

## 11 js兼容性处理

> 2021-04-20

```bash
yarn add babel-loader @babel/core @babel/preset-env @babel/polyfill core-js -D
```

1. 基本js兼容性处理 --> @babel/preset-env

   问题：只能转换基本语法，如promise高级语法不能转换

2. 全部js兼容性处理 --> @babel/polyfill

   问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~

3. 需要做兼容性处理的就做：按需加载  --> core-js

## 12 js压缩

> 2021-04-20

```js
// 生产环境下会自动压缩js代码
mode: 'production
```

## 13 html压缩

> 2021-04-20

```js
 plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      // 压缩html代码
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true
      }
    })
  ]
```

## 14 生产环境基本配置

> 2021-04-20

## 15 HMR

> 2021-04-21

热模块替换

HMR: hot module replacement 热模块替换 / 模块热替换

作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）

极大提升构建速度

样式文件：可以使用HMR功能：因为style-loader内部实现了~

js文件：默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码

注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。

html文件: 默认不能使用HMR功能.同时会导致问题：html文件不能热更新了~ （不用做HMR功能）

解决：修改entry入口，将html文件引入

**注意：**

`webpack.config.js`中添加配置：

```js
// webpack 5.x
target: process.env.NODE_ENV === 'development' ? 'web' : 'browserslist'
```

解决webpack5.0 使用webpack-dev-server时，无法自动刷新页面的问题。

<https://webpack.docschina.org/configuration/target/>

## 16 source-map

> 2021-04-23

source-map: 一种 提供源代码到构建后代码映射 技术 （如果构建后代码出错了，通过映射可以追踪源代码错误）

```js
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
```

```js
source-map：外部
  错误代码准确信息 和 源代码的错误位置
inline-source-map：内联
  只生成一个内联source-map
  错误代码准确信息 和 源代码的错误位置
hidden-source-map：外部
  错误代码错误原因，但是没有错误位置
  不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map：内联
  每一个文件都生成对应的source-map，都在eval
  错误代码准确信息 和 源代码的错误位置
nosources-source-map：外部
  错误代码准确信息, 但是没有任何源代码信息
cheap-source-map：外部
  错误代码准确信息 和 源代码的错误位置 
  只能精确的行
cheap-module-source-map：外部
  错误代码准确信息 和 源代码的错误位置 
  module会将loader的source map加入

内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

  开发环境：速度快，调试更友好
    速度快(eval>inline>cheap>...)
      eval-cheap-souce-map
      eval-source-map
    调试更友好  
      souce-map
      cheap-module-souce-map
      cheap-souce-map

      --> eval-source-map：vue、react脚手架默认的配置  / eval-cheap-module-souce-map

  生产环境：源代码要不要隐藏? 调试要不要更友好
    内联会让代码体积变大，所以在生产环境不用内联
    nosources-source-map 全部隐藏
    hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

     --> source-map / cheap-module-souce-map
     考虑安全性的话，可以hidden-source-map / hidden-cheap-module-souce-map
```

## 17 oneOf

>2021-04-23

以下loader只会匹配一个

注意：不能有两个配置处理同一种类型文件

## 18 缓存

> 2021-04-24

```js
缓存：
babel缓存
cacheDirectory: true
--> 让第二次打包构建速度更快
文件资源缓存
hash: 每次wepack构建时会生成一个唯一的hash值。
  问题: 因为js和css同时使用一个hash值。
    如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样
  问题: js和css的hash值还是一样的
    因为css是在js中被引入的，所以同属于一个chunk
contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
--> 让代码上线运行缓存更好使用
```

babel缓存: `babel-loader`

```js
{
  test: /\.js$/,
  exclude: /node_modules/,
  loader: 'babel-loader',
  options: {
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: { version: 3 },
          targets: {
            chrome: '60',
            firefox: '50'
          }
        }
      ]
    ],
    cacheDirectory: true
  }
}
```

修改：output，文件加入hash值

## 19 tree shaking去除无用代码

> 2021-04-23

`tree shaking`想要生效，需满足如下条件：

前提：1. 必须使用ES6模块化  2. 开启production环境

  作用: 减少代码体积

  在package.json中配置

  "sideEffects": false 所有代码都没有副作用（都可以进行tree shaking）

  问题：可能会把css / @babel/polyfill （副作用）文件干掉

  "sideEffects": ["*.css", "*.less"]

```json
  "sideEffects": [
    "*.css"
  ]
```

## 20 代码分割

> 2021-04-23

**example1：**

单入口改多入口

```js
  // entry: './src/js/index.js',
  entry: {
    main: './src/js/index.js',
    test: './src/js/test.js'
  },
```

**example2：**

optimization

1. 可以将node_modules中代码单独打包一个chunk最终输出

2. 自动分析多入口chunk中，有没有公共的文件。如果有会打包成单独一个chunk

```js
entry: {
    main: './src/js/index.js',
    test: './src/js/test.js'
  },
optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
```

**example3：**(推荐)

```js
entry: './src/js/index.js',
optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
```

```js
// index.js
import(/* webpackChunkName: "test" */ './test')
.then((module) => console.log(module.multiply(1, 5)))
.catch((error) => console.log(error))
```

## 21 懒加载和预加载

> 2021-04-23

懒加载~：当文件需要使用时才加载~

预加载 prefetch：会在使用之前，提前加载js文件

正常加载可以认为是并行加载（同一时间加载多个文件）

预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源

**注意：**一般就搞到懒加载，预加载慎用

## 22 PWA

> 2021-04-24

渐进式网络开发程序（离线可访问），例如淘宝网

用到插件：`workbox-webpack-plugin`，一般在入口文件中配置serviceworker

package.json中加入

```json
"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  },
```

## 23 多进程打包

> 2021-04-24

 进程启动大概为600ms，进程通信也有开销。只有工作消耗时间比较长，才需要多进程打包。

## 24 externals

> 2021-04-24

用途：可以配置忽略如jQuery被打包进来

## 25 dll

> 2021-04-24

对某些库（第三方库：jQuery、react、vue...）进行单独打包

需用到插件：`add-asset-html-webpack-plugin`