前言

本文适合中级及以上的没有系统学习过webpack的前端观看。建议结合webpack官方文档，与B站实操视频结合观看，看完并动手搭建一次

写作背景：虽然在企业开发中大多数人高级及以下的前端都没有机会配置或搭建构建工具，但是在2022年互联网大裁员的环境压力下，掌握一些区分普通前端与高级前端的技能，能够提高个人的核心竞争力。就算被裁也能力保不降低个人的薪资水准。

一、知识图谱

基础

进阶（性能优化）

二、基础

需要先全局下载webpack、webpack-cli

webpack配置

说明： webpack中配置所涉及的plugin和loader需要去npm官网上查找对应的包并下载，对应的plugin与loader具体配置细节需要去响应的文档/官网查看。 npm官网

1. 入口文件：webpack.json

当执行webpack的npm脚本命令的时候，程序会自动寻找当前工程下的webpack.json文作为入口文件

2 入口文件抛出对象所包含的属性（常用的）

2.1、mode

可选，

值为： production 开发环境

development 生产环境

作用：告诉程序当前webpack 是什么模式。值与当前启动脚本命令的模式一致的话，可提高构建/打包效率

2.2、devtool

可选，

值为： source-map

作用：声明该选项的该值，可在开发模式中精准定位到错误的位置 （开发提效）

2.3、entry

必填，

值为：字符串(单个入口)----可为相对路径，也可为绝对路径

对象（多个入口文件）---

分离应用程序(app) 和第三方库(vendor) 入口

多页面应用程序

作用：告诉webpack应该使用哪个模块，来作为构建其内部依赖图的开始

2.4、 output

可选，默认出口路径为 "./dist"

值为：对象----

{
  path: __dirname + "/dist", // 出口的目录
  filename: "[name].[chunkhash].js" // 打包后的文件名
  clean: true/false  //每次打包构建是否先清空上一次的打包结果
}

作用：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件

2.5、 plugins

必填，为数组

值为：

const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
[
  new webpack.ProgressPlugin({}), //打包构建时是否显示进度条
  new HtmlWebpackPlugin({template: './src/index.html'}) //打包构建嵌入的html文件路径
]

作用：webpack 插件是一个具有 apply 属性的 JavaScript 对象。apply 属性会被 webpack compiler 调用，并且 compiler 对象可在整个编译生命周期访问。

2.6、 devServer

选填，

值为：

devServer: {
    port: 8000,
    open: true,
    contentBase: resolve('public'),
    // HMR = Hot Module Replacement
    // 原理：加上这个配置之后，当我们再启动本地服务时，就会在node服务器上开启一个websocket长连接。每当代码有变化时，通过WS长连接通信把变化的代码推送到客户端（浏览器）进行自动更新。
    hot: true,
    // 当代码报错时(一般是ESLint级别的错误)，弹出遮罩层。
    overlay: true,
    proxy: { //代理
      '/api': {
        target: '目标域名',
        changeOrigin: true
      }
    }
}

作用：开发环境中起指定配置的node服务

2.7、 module

选填。一般都会填（因为要编译各种文件）

值为：对象，主要用于指定loader.即编译文件所需要的一些loader。

一般会在里面引入js的babel编译，eslint检查js代码。以及处理css预编译语言的less/sass，图片等文件

作用：主要是配置loader，通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理非 JavaScript(non-JavaScript) 模块，并且在 bundle 中引入这些依赖

2.8、 resolve

可选，

值为：对象，包含属性有

作用：配置模块如何解析

webpack(v5)基础 教程总结

前言