# webpack入门学习

**Repository Path**: eatball/introduction-to-webpack

## Basic Information

- **Project Name**: webpack入门学习
- **Description**: webpack入门学习（当前最新的5版本）
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2021-11-29
- **Last Updated**: 2021-11-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack5 学习

参考视频：

> https://www.bilibili.com/video/BV1964y1k7Hm

## 安装`webpack-dev-server` 热更新

```
npm i -D webpack-dev-server
```

再通过`Cli`的方式调用：

```
webpack serve
```

为了简便，可以在`package.json`

```
  "scripts": {
    "serve": "webpack serve --open"
  },
```

这样就会在本地`127.0.0.1:8080` 启动浏览器打开预览界面，提供的实时显示效果，但是**实际没有生成打包文件**，如果想修改本地的端口或者其他信息可以配置`webpack.config.js`:

```
   devServer: {
     host: '127.0.0.1',  // 配置启动ip地址
     port: 8080,  // 配置端口
     open: true  // 配置是否自动打开浏览器
   }
```

也可以加一个打包的“快捷键”(npm run build):

```
  "scripts": {
    "serve":"webpack serve --open",
   + "build":"npx webpack"
  },
```

之后，只需要`npm run serve`,本地服务器就会自动热更新

## CSS 相关处理

### CSS 背景图

`webpack4` 及其以前版本使用的是`file-loader`和`url-loader`

1. 打包 CSS 内的图片（图片和 CSS 文件在同一目录层级）
   如果想使用`url-loader`打包图片，则需要另外再添加两个配置：

```
     {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: "[name].[ext]",
              limit: 8192,
              esModule: false,  //webpack5不推荐使用url-loader,如果使用，这里需要添加这个配置,使用commonjs
            },
          },
        ],
        type: 'javascript/auto'  //webpack5不推荐使用url-loader,如果使用，这里需要添加这个配置
      }
```

> 当在 webpack 5 中使用旧的 assets loader（如 file-loader/url-loader/raw-loader 等）和 asset 模块时，你可能想停止当前 asset 模块的处理，并再次启动处理，这可能会导致 asset 重复，你可以通过将 asset 模块的类型设置为 'javascript/auto' 来解决。

> 参考：https://blog.csdn.net/w184167377/article/details/118930758

### CSS 抽取为单独文件

使用插件`MiniCssExtractPlugin`,而不是添加到`<style>`里面，因此最后需要使用`MiniCssExtractPlugin.loader`

```
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

plugins:[
     new MiniCssExtractPlugin({
       filename: "[name].css",
     })
]

  rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],

```

### 添加样式前缀

```
npm i -D  autoprefixer postcss postcss-loader
```

```
// postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ],
};
```

```
//webpack.config.js
     {
        test: /\.css$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',],
      },
      // 处理Less
      {
        test: /\.less$/,
        use: [
          // 'style-loader',
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'less-loader'
        ]
      },
```

### 使用 stylelint CS 格式校验

```
npm i -D stylelint stylelint-config-standard stylelint-webpack-plugin

//webpack.config.js
const StylelintPlugin = require('stylelint-webpack-plugin');
      new StylelintPlugin({
      //指定检查源文件所在目录
      files: ["./src/style/*.(css|less)"]
    }),

//package.json
   "stylelint":{
    "extends": "stylelint-config-standard"   //使用默认的规则集合
    "rules":{
      "number-leading-zero":"never"  //覆盖默认的规则取值
    }
  }
```

校验的规则集合：

> https://stylelint.io/user-guide/rules/list/

### CSS 优化和压缩

```
npm i -D css-minimizer-webpack-plugin

//webpack.config.js

  optimization: {
    minimize: true,   //开发环境优化CSS
    minimizer: [
      new CssMinimizerPlugin({
        parallel: true,  //使用多进程并发执行，提升构建速度
      }),
    ]
  },

```

**这个插件不是放在`plugins`里面**

## HTML 相关

### <img>图片

**处理`html-loader`通过 CommonJS 引入图片，而`url-loader`使用 ES 规范，因此`url-loader`需要配置`esModule:false`**

```
{
        test: /\.html$/,
        loader: "html-loader",
        options: {
          minimize: true
        }
      }
```

### HTML 打包

```
npm i -D html-webpack-plugin

//webpack.config.js
plugins:[
      new HtmlWebpackPlugin({
      title: 'webpack5',    //指定标题
      template: './src/index.ejs',   //指定模板
      filename: 'index.html',     //指定生成后的文件名
      meta: {
        keywords: '关键词'
      },
    }),
]
```

因为`html-webpack-plugin`和`html-loader`有冲突

> **`html-loader`会将内容以字符串形式导出**
> HtmlWebpackPlugin 支持 html 以及 ejs 模板语法，当在 webpack 中配置了 html-loader 后，就相当于全局设置以 html 模板语法进行解析，HtmlWebpackPlugin 解析 html 模板是以 string 类型进行解析，而解析 ejs 模板是以函数类型进行解析，在全局设置了 html-loader 后，HtmlWebpackPlugin 就不会认识 ejs 语法了，只会将它当成 string 直接输出。

，所以模板文件扩展名最好设置为`ejs`
模板变量使用方法，比如读取标题：`<%= htmlWebpackPlugin.options.title %>`
**对于图片链接则使用`require`函数:**

```
<img src="<%=require('/path/to/image') %>" />
```

## JS 相关

### 打包 编译 JS （ES6=>ES5）

```
npm install -D babel-loader @babel/core @babel/preset-env

//webpack.config.js
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //排除本地需要编译的目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

```

`@babel/preset-env`包含所有最新的转换规则
**不是所有的最新 ES 语法(主要是 API，比如 Array.of())都支持** ，所以需要 polyfill:

```
npm i -D @babel/polyfill
```

再全局引入

```
import '@babel/polyfill'
```

> 但是这么操作，打包之后的 bundle 文件非常大，怎么样可以按需转换 JS？

```
npm i -D  core-js


//导入全部polyfill
// 如果是按需加载polyfill 注释下面的导入
// import '@babel/polyfill'
```

然后配置:

```
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, //排除本地需要编译的目录
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', {
              useBuiltIns: 'usage',   //按需转换JS
              corejs: 3,              //指定版本
              targets: [
                  chrome:'58',
                  edge:'17',
              ]

            }]
          }
        }
      }
```

## 图片相关

### 打包图片（过滤并图片输出到目录）

图片打包可以使用`url-loader`或`file-loader`

```
npm i -D file-loader /url-loader

//webpack.config.js

 // 处理图片
      // {
      //   test: /\.(png|jpe?g|gif)$/i,
      //   use: [
      //     {
      //       loader: 'url-loader',
      //       options: {
      //         name: "images/[name].[hash:8].[ext]",
      //         limit: 1024 * 8,
      //         esModule: false, // 关闭url-loader的ES6模块化，使用commonJS
      //       },
      //     },
      //   ],
      //   type: 'javascript/auto'
      // },
      // 发送图片到目录并过滤
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "[path][name].[hash:5].[ext]",
              emitFile: true,
              esModule: false, // 关闭loader的ES6模块化，使用commonJS
            },
          },
        ],
        type: 'javascript/auto'
      },

```

## 字体相关

```
      //处理字体文件
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        use: [{
          loader: 'file-loader',
          options: {
            name: 'fonts/[name].[hash:5].[ext]',
            esModule: false,  //配置这个保证资源输出格式正确可用
          }
        }],
        type: 'javascript/auto'  //因为webpack5的Asset会处理资源文件，所以配置这个防止资源重复打包。
      },
```

**使用`webpack5`打包资源文件（图片，音频，视频，字体）等等，并且使用`file-loader`或者`url-loader`，出现资源重复打包或者资源文件显示不正常，一定要配置：**

```
esModule: false,
type: 'javascript/auto'
```

## 使用资源模块 (asset module)

资源：字体，图片，图标，HTML，音频

> https://webpack.docschina.org/guides/asset-modules/

不用`file-loader`和`url-loader`也可以加载图片等资源

`webpack5` 之前：
`raw-loader` 将文件导入为字符串
`url-loader` 将文件作为 data URI 内联到 bundle 中
`file-loader` 将文件发送到输出目录

与之对应的`webpack5` 使用 4 种新的模块类型：
`asset/source` ，导出资源源代码，类似`raw-loader`
`asset/inline`，导出资源的 data URI，类似`url-loader`
`asset/resource`，发送一个单独的文件并导出 url，类似`file-loader`

`asset`在导出一个 data URI 和发送一个单独的文件之间自动选择（`asset/resource|asset/inline`），类似添加了`limit`属性的`url-loader`,

```
//使用 file-loader
  {
    test: /\.(eot|svg|ttf|woff|woff2)$/i,
      use: [{
        loader: 'file-loader',
        options: {
        name: 'fonts/[name].[hash:5].[ext]',
          esModule: false,
        }
      }],
        type: 'javascript/auto'
  },

// 使用asset/resource
{
  test: /\.(eot|svg|ttf|woff|woff2)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'fonts/[name].[hash:5].[ext]'
  }
},
```

> 特别注意，在`webpack5`使用资源模块的时候`[ext]`变量已经包含了`.`

## webpack dev devServer 自动更新配置

```
npm i -D webpack-dev-server


//webpack.config.js

devServer:{
    contentBase: resolve(__dirname, 'dist'),
    host: '127.0.0.1',  // 配置启动ip地址
    port: 8080,  // 配置端口
    open: true, // 配置是否自动打开浏览器
    compress: true,
    liveReload:true, //热更新

}
 target: 'web'  //这个不能少

```

再在`package.json`添加脚本

```
  "scripts": {
    "serve": "webpack serve --open",
  },
```

只需执行`npm run serve`一次就可以保持热更新状态

## 本地跨域 Proxy 配置

```javascript
  devServer: {
    //配置代理 解决跨域
    proxy: {
      // http://localhost:8080/api
      "/api": {    // 这里的`/api`是自定义的
        // http://localhost:8080/api/users = >  https://api.github.com/api/users
        target: "https://api.github.com/", //这里是真实的接口baseURL
        //http://localhost:8080 => https://api.github.com
        changeOrigin: true,
        ws: true,
        secure: false,
        pathRewrite: {
          //去掉 '/api/'
          // http://localhost:8080/api/users = >  https://api.github.com/users
          "^/api": "", // 这里的`^/api`也是是自定义的
        },
      },
    }
  },
```