webpack | 任先生的笔记库

# WebPack

基本任务

快速搭建一个 webpack 环境

查看 ruanyf 的 webpack-demos (opens new window)

官方简介：

webpack (opens new window) 是一个现代 JavaScript 应用程序的静态资源、模块化打包器(module bundler)。

打包工具解析

JavaScript

将 ES6+语法转换成 ES5（某些浏览器不支持）

将 CJS、ESM 模块化代码转换为浏览器可以执行代码

其他 vue、CSS 预处理器代码处理

安装：

npm i webpack webpack-cli -D

webpack 打包方式

# 使用局部的 webpack ✨
./node_modules/.bin/webpack
npx webpack
# 附带参数
npx webpack --entry ./src/main.js
npx webpack --output-path ./build
npx webpack --output-filenme bundle.js
npx webpack --mode production

# 使用全局的 webpack
webpack

或者：

显然 webpack 的使用是需要 node 环境的

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

webpack 项目默认结构

WebpackProject
├─ dist
|   └─ main.js
├─ node_modules
├─ src
|   └─ index.js
├─ index.html
├─ package-lock.json
├─ package.json
└─ webpack.config.js

下面介绍的是关于 webpack 手动配置的相关内容

webpack 环境搭建

webpack.config.js

const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')

module.exports = {
  // 基本配置
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'main.js'
  },

  // 辅助插件
  // webpack-dev-server
  devServer: {
    open: true,
    port: 80,
    host: '127.0.0.1'
  },
  // html-webpack-plugin
  plugins: [
    new HtmlPlugin({
      template: './index.html' // html模板
    })
  ],
  // ts-loader
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader'
      }
    ]
  }
}

# 一、基本配置

# 1、mode 模式

运行模式(mode)：

默认为 production，所以开发阶段必须配置。

module.exports = {
  mode: 'development' // 这个设置会修改 process.env.NODE_ENV 的值 和 其他配置
}

development：打包速度快
production：会对生成的文件进行代码压缩和性能优化

环境区分

① 方式 1

WebpackProject
├─ config
| ├─ webpack.dev.config.js # 开发配置
| └─ webpack.prod.config.js # 生产配置
├─ package.json
└─ README.md

package.json

{
  "scripts": {
    "build": "webpack --config ./config/webpack.prod.config.js",
    "serve": "webpack serve --config ./config/webpack.dev.config.js"
  }
}

② 方式 2

WebpackProject
├─ config
| ├─ webpack.comm.config.js # 公共配置
| ├─ webpack.dev.config.js # 开发配置
| └─ webpack.prod.config.js # 生产配置
├─ package.json
└─ README.md

npm install webpack-merge -D

webpack.dev.config.js

const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")

module.exports = merge(commonConfig, {
  mode: "development"，
  devServer: {
    port: 8888
  }
})

webpack.prod.config.js

const { merge } = require("webpack-merge")
const commonConfig = require("./webpack.comm.config")

module.exports = merge(commonConfig, {
  mode: "production"，
  output: {
    clean: true
  }
})

③ 方式 3

上面的两种方式实际上和 vue-cli 脚手架 2.0 时构建项目的方式基本类似，不过后来使用了 vue-service-cli 这个库来实现全部过程

# 2、entry/output

项目打包的入口(entry)、出口(output)：

在 webpack 4.x 和 5.x 的版本中，默认的打包路径如下

const path = require('path')

module.exports = {
  //下面是默认的配置
  content: "" // 默认为根路径
  entry: path.join(__dirname, './src/index.js'), // 相对于content
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  }
}

# 3、本地服务

提示

webpack 虽然作为一个打包工具，但是它还可以利用插件实现实时更新，而不用反复使用 npm run build 来查看结果

先安装包 webpack-dev-server

此插件类似于 node.js 中的 nodemon 工具，可以自动帮我们完成编译。

npm i webpack-dev-server -D

然后配置：

webpack.config.js

module.exports = {
  devServer: {
    port: 80,
    host: '127.0.0.1',
    open: true, //首次打包成功时，自动打开浏览器
    compress: true // 静态文件gzip压缩
  }
}

关于模块热更新 HMR

webpack 中是有相关配置的

module.exports = {
  devServer: {
    hot: true // 模块热更新HMR（默认开启）
  }
}

但是一般情况下，是不需要我们手动配置 HMR 的，大多都是默认开启或者默认支持 HMR 的。

比如 vue 开发中，vue-loader 就支持 vue 组件的 HMR，并提供了开箱即用的解决方案

devServer 重要配置

historyApiFallback

https://www.cnblogs.com/Lencamo/p/16860823.html

proxy

http://localhost:8080/notes-library/frontend/node_Note/Node%E5%AD%A6%E4%B9%A0/%E8%B7%A8%E5%9F%9F.html#_3%E3%80%81vue-cli-%E7%9A%84%E4%BD%BF%E7%94%A8

package.json

{
  "scripts": {
    "serve": "webpack serve" // 编译文件不会输出到output目录，而是保留在内存中
  }
}

注意事项：实时预览 ✍

webpack-dev-server 插件除了可以自动打包外，还可以通过 http://localhost:8080 查看打包效果。

但是我们已经知道的是实际上 webpack-dev-server 使用的是一个库叫做 memfs，它是将编译代码放在内存中，然后提供一个本地服务供我们使用。

但是由于内存中和本地项目中的 bundle.js 文件并不在同一位置，所以 bundle.js 文件不是实时的

<!-- 原来：使用本地项目中的bundle.js -->
<script src="../dist/bundle.js"></script>

<!-- 现在： 直接使用内存中的bundle.js（保持bundle.js实时更新）-->
<script src="/bundle.js"></script>

# 二、打包辅助插件

plugins 和 loader 各自的作用

loader 可以先解析.css 文件，而 plugins 可以将所有的.css 文件融合在 style.css 中，而不是直接塞入 html 中

# 1、plugins 插件

官方地址：Plugin (opens new window)

上面手动解决通过 http://localhost:8080 直接实时预览项目效果显然不是长久之策。除了之外，我们还可以通过插件的方式：

① html-webpack-plugin 插件

先安装包 html-webpack-plugin

npm i html-webpack-plugin -D

然后配置：

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "xxxx" // 可以设置一个标题
      template: './index.html' // 使用自定义模板（相对于项目根目录）
      filename: './index.html' // 设置该模板打包后文件路径和文件名（相对于output目录）
    })
  ]
}

html-webpack-plugin 插件会根据配置自动在 output 目录和项目根目录中生成 index.html 文件，并自动导入 bundle.js 文件

npm run build

<script src="bundle.js"></script>

② clean-webpack-plugin

每次打包前，原有的 dist 文件并不会自动删除，所有下次打包时可能会有残留文件。这个问题我们可以用下面这个插件解决：

提示

在最新的 webpack 官网 plugin (opens new window) 介绍中并没有 clean-webpack-plugin，转而可以直接使用 output.clean (opens new window) 进行配置

module.exports = {
  //...
  output: {
    clean: true // 在生成文件之前清空 output 目录
  }
}

安装

npm install clean-webpack-plugin -D

配置

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

module.exports = {
  plugins: [new CleanWebpackPlugin()]
}

webpack 内置插件

默认情况下，在 webpack 中我们可以使用下面这个全局变量

console.log(process.env.NODE_ENV)

除此之外，我们还可以自定义全局变量（以 vue-cli 中的某个效果为例：）

<!-- ejs模板 -->
<link rel="ico" href="<%= BASE_URL %>favicon.ico" />

const { DefinePlugin } = require('webpack')

module.exports = {
  plugins: [
    new DefinePlugin({
      BASE_URL: "'./'"
      // 其他自定义全局变量
    })
  ]
}

# 2、loader 插件

官方地址：Loader (opens new window)

实际开发中，webpack 默认只能打包处理.js 文件，而无法处理.css、.less 等文件。

先安装相关解析插件：

# css文件
npm i [email protected] [email protected] -D

# less文件
npm i [email protected] [email protected] -D

# 图片文件（webpack5之前）
npm i [email protected] [email protected] -D

# js高级语法🎈（ES6+、TS、JSX）
npm i babel-loader @babel/core @babel/preset-env -D

然后配置：

webpack.config.js

limit 限制的是图片大小小于等于多少 B 字节，limit=1024 表示图片小于等于 1kB 才会转换为 base64 字符串。

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
      // { test: /\.(jpe?g|png|gif|svg)$/, use: 'url-loader?limit=8192' },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/, // 排除npm包文件（注意与 webpack-node-externals包的区别）
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

postcss 配置说明

use 中的多个 loader 的使用顺序是从后往前

module.exports = {
  module: {
    rules: [
      {
        test: /\.sass$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          { loader: 'sass-loader' },
          {
            loader: 'postcss-loader'
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer') // 可以自动为css添加浏览器前缀
                ]
              }
            }
          }
        ]
      }
    ]
  }
}

除此此外，我们还可以将 postcss 配置单独抽离出来：

postcss 插件

# 1、CSS新特性
npm install autoprefixer -D
# 或者
npm install postcss-preset-env -D

# 2、px -> rem/vm

postcss.config.js

module.exports = {
  plugins: [
    // 'autoprefixer'
    'postcss-preset-env' // 这个插件也可以，而且根据强大
  ]
}

资源模型类型

在 webpack5 之后，webpack 对于图片资源的处理，已经不需要手动下载 loader 了，转而使用资源模块类型（Asset Modules types）。

Asset Modules (opens new window)

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset'
      }
    ]
  }
}

资源模块类型通过添加 4 种新模块类型来替换原先对应的 loader，下面简单介绍两个：

asset/resource：

作用：和 file-loader 一样，webpack 打包图片，并放在 dist 文件夹根目录（图片名改变了）

缺点：大量图片会增加网络请求

asset/inline：

作用：和 url-loader 一样，将图片转换为 base64 行内编码使用，并将其放在打包的 js 文件中

缺点：大量图片会造成 js 代码下载和解析/执行时间过长

① 打包优化 1：是否使用 url-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb（默认8kb） // 使用asset/inline时，文件大小限制
          }
        }
      }
    ]
  }
}

② 打包优化 2：自定义输出文件名

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        type: 'asset',
        generator: {
          filename: 'static/[name]_[hash:8][ext]' // 使用asset/resource时，文件名设置
        }
      }
    ]
  }
}

babel 配置说明

现在我们已经知道了 babel 可以将复杂的、特殊的 js 文件转换为浏览器可识别的 js 文件。

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'] // 预设
            // plugins: [
            //   '@babel/plugin-transform-arrow-functions',
            //   '@babel/plugin-transform-block-scoping'
            // ] // 手动添加插件
          }
        }
      }
    ]
  }
}

和 postcss 一样，我们也可以将 babel 配置单独抽离出来：

babel.config.js

module.exports = {
  presets: ['@babel/preset-env'] // 预设
}

常见的预设有 env、react、typescript，我们这里仅仅使用了 env 预设 @babel/preset-env 而已

拓展：webpack 处理 vue 代码

① 代码编写

npm install vue

/src/components/Hello.vue

<template>
  <p>{{ title }}</p>
</template>

<script>
export default {
  data() {
    return {
      title: '你好呀！'
    }
  }
}
</script>

<style>
p {
  color: red;
}
</style>

/src/main.js

import { createApp } from 'vue'
import Hello from './components/Hello.vue'

createApp(Hello).mount('#app')

index.html

<body>
  <div id="app"></div>
</body>

② webpack 配置

npm install vue-loader -D

const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
}

# 三、其他

# 1、dist 优化

# ① 模块化

普通方式打包生成的文件全部直接放在了 dist 文件夹下，没有进行分类，显得格外混乱。

webpack.config.js 配置

module.exports = {
  // 1、js文件处理
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'js/bundle.js'
  },

  // 2、图片文件处理
  module: {
    // &outputPath指定存放位置
    rules: [{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=1024&outputPath=images' }]
  }
}

# ② 自动化

防止打包时，旧的 dist 内文件对新生成的 dist 内文件造成影响。所以自动删除旧的 dist 文件夹是非常有必要的：

安装包 clean-webpack-plugin

npm i [email protected] -D

然后配置

webpack.config.js

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

const cleanPlugin = new CleanWebpackPlugin()

module.exports = {
  plugins: [cleanPlugin]
}

# 2、source-map 优化

默认情况下，运行项目报错时，控制台报错的提示行号(bundle.js)与源代码的对应行号是不一致的。

原因：

在浏览器中运行的代码是打包压缩后的代码（代码经过转换）

那如果我们在开发阶段想要浏览器正确显示报错的位置该怎么做？

开启 source-map

source-map 可以将已转换的代码，映射到原始的源文件。使浏览器可以重构原始源，并在调试器中显示重建的原始源

webpack.config.js

Devtool (opens new window)

module.exports = {
  devtool: 'false' // 不使用source-map

  // 1、production模式
  devtool: 'none' // 默认值（不生成source-map文件）

  devtool: 'source-map' // 会生成完整的 source_map 文件（浏览器会根据其中的 // # sourceMappingURL = bundle.js.map 找到并解析source-map文件）
  devtool: 'nosources-source-map' // 只显示行号不暴露源码

  // 2、development模式
  devtool: 'eval' // 默认值（不生成source-map文件）

  devtool: 'eval-source-map' // source-map是以DataUrl添加到bundle.js内eval函数的后面
}

TIP

开发阶段为了方便调试，可以手动关闭 Source Map。但项目发布时，出于安全角度(防止源码暴露)，建议使用默认的none或者使用nosources-source-map(只显示行号不暴露源码)。

# 3、webpack 分包

import 函数可以让 webpack 对导入文件进行分包处理（首屏渲染速度 🤔）

问题描述

默认情况下，webpack 在打包时会将组件模块打包到一起（比如 app.js 文件中）。随着项目的不断庞大，app.js 文件的内容过大，会造成首屏的渲染速度变慢。

我们可以把一些不需要立即使用的组件从 app.js 文件中拆分出来，形成单独的 chunk.js 代码块，这些 chunk.js 会在需要时从服务器加载并运行。

常见的 vue-cli 打包时就默认包项目核心代码 app.js 和第三方库 chunk.js 进行了分离。

// 路由组件分包
const Home = () => import('@/components/Home.vue')

const Home = () => import(/* webpackChunkName: "home" */ '@/components/Home.vue')

# 4、路径优化

除了上面的细节，我们还可以对路径进行优化：

官方描述：resolve (opens new window)

配置如下：

webpack-config.js

@表示正处于项目根目录的 src 文件夹下

module.exports = {
  // 内部实际是通过enhanced-resollve包实现的
  resolve: {
    extensions: ['.js', '.json', '.jsx', '.ts', '.vue'], // 让模块化导入可以省略后缀名（默认值为：['.js', '.json', '.wasm']）
    alias: {
      '@': path.join(__dirname, './src/')
    }
  }
}

使用示例：

// 原来：
import './css/index.css'
import './css/index.less'

// 现在：
import '@/css/index.css'
import '@/css/index.less'

babel →