webpack安装使用(小一万字教程)

webpack从入门到精通

一，webpack产生原因：

☕webpack服务于前端工程化的：
前端工程化 即，在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。这样有利于前端开发自成体系，有一套标准的开发方案和流程。

（1），前端工程化的要求

☕前端工程化要求满足四个"现代化"：

①，模块化（js 的模块化、css 的模块化、资源的模块化）
②，组件化（复用已有的 UI 结构、样式、行为）
③，规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git 分支管理）
④，自动化（自动化构建、自动部署、自动化测试）

二，webpack基础使用：

（1），webpack 是什么

webpack 是前端项目工程化的解决方案
🍺：它提供了前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等功能
🍺：它让程序员把工作重心放在具体功能实现上，提高开发效率和项目可维护性

（2），快速上手webpack

①，☕安装 webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

注意:-D 是 --save-dev 的缩写，表示开发时依赖，只在项目开发阶段用到。 -S 是 --save 的缩写，表示运行时依赖，即项目打包发布运行时要用到。@后面指定是安装版本。

②，☕配置 webpack

1，创建一个空项目，在项目空白处运行cmd，在终端里面输入 npm init -y，表示创建一个管理项目，用来进行使用测试(webpack)。
👨‍💻👨‍💻👨‍💻 小编有话说：

2，在创建空项目下创建src，用来存放项目的源代码，在src下创建一个index.js用来进行测试。

注意:webpack打包函数的入口都是xxx.js文件

3，项目根目录中创建 webpack.config.js 配置文件，初始化基本配置：
webpack.config.js专门管理项目的打包配置

module.exports = {
  // mode 用于指定构建模式，可选值有
  // development 和 production
  mode: 'development',
}

注意：这里语法是node.js语法

4，在 package.json 文件的 scripts 节点下，新增 dev 脚本：
dev只是脚本名字(可自定义)

"scripts" :{
 // 配置好后就能通过 npm run dev 命令执行打包过程
 "dev": "webpack"
}

🍉🍉🍉注意：上面操作执行完成后，所在文件夹文件目录如下：

5，在终端中运行 npm run dev 命令，即可启动 webpack 进行项目的打包构建。

👨‍💻👨‍💻👨‍💻小编演示环节：

上面表示webpack管理项目运行成功。得到一个dist文件，里面存放着项目的打包文件。

验证：

🌸🌸webpack配置简单说明🌸🌸

🏵，mode 的可选值

🏵，webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。

🏵，webpack 中的默认约定

在 webpack 4.x 和 5.x 版本中，默认约定：
默认打包入口文件为 src/index.js
默认输出文件路径为 dist/main.js

🏵，自定义打包入口和出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包入口，output 节点指定打包出口。

const path = require('path')

module.exports = {
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'), // 输出文件的存放路径
    filename: 'bundle.js', // 输出文件的名称
  },
}

注意：path包导入，__dirname得到当前项目文件所在目录的绝对路径。

（3），webpack相关插件

①，webpack-dev-server

👨‍💻 webpack-dev-server 让 webpack 能监听项目源码的变化，从而自动打包构建。
🍺安装 webpack-dev-server
npm install webpack-dev-server@3.11.2 -D
🍺配置 webpack-dev-server
1，修改 package.json -> scripts 的 dev 命令：

"scripts": {
	"dev": "webpack serve"  }

2，运行 npm run dev 命令，重新打包项目
终端运行结果：

3，浏览器访问 http://localhost:8080 地址，查看打包效果
🍺打包生成的文件在何处

配置 webpack-dev-server 之后，打包生成的文件存放到内存中，而不再是存放到物理磁盘上提高实时打包输出的性能
🍺如何访问打包生成的文件
webpack-dev-server 生成的文件默认放在项目根目录中，是虚拟不可见的。
在 / 后跟上要访问的文件名称，即可访问内存中的文件如 bundle.js 表示访问 webpack-dev-server 生成到内存中的 bundle.js 文件。
地址：http://localhost:8080/src/index.html

②，html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。 通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中。
作用：完成html页面复制
安装 html-webpack-plugin
npm install html-webpack-plugin@5.3.2 -D
配置 html-webpack-plugin

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

const htmlPlugin = new HtmlPlugin({
  template: './src/index.html', // 指定原文件的路径
  filename: './index.html' // 指定生成文件的路径
})
module.exports => {
  mode: 'development',
  plugins: [htmlPlugin]
}

html-webpack-plugin 生成的文件
通过 html-webpack-plugin 复制到项目根目录中的 index.html 页面，也被放到内存中生成的 index.html 页面，自动注入打包的 bundle.js 文件
地址：http://localhost:8080/

③，devServer 节点
通过 webpack.config.js 文件的 devServer 节点对 webpack-dev-server 插件进行更多的配置。

devServer: {
  open: true, // 初次打包完成后，自动打开浏览器
  host: '127.0.0.1', // 访问地址
  port: 80 // 访问端口号
}

（4），webpack加载器

webpack 默认只能打包 .js 结尾的模块，其他模块需要调用对应的 loader 加载器才能进行打包，即协助 webpack 打包特定的文件模块。

css-loader 可打包 .css 文件
less-loader 可打包 .less 文件
babel-loader 可打包 webpack 无法处理的 JS 高级语法

loader 调用过程

① 打包 css 文件
🍉运行 :
npm i style-loader@3.0.0 css-loader@5.2.6 -D
安装 loader
🍉在 webpack.config.js 文件的 module->rules 数组添加规则：
注意:module:{ rules:[{}]}放在module.exports里面

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

test 表示匹配的文件类型，use 表示对应调用的 loader
use 数组的 loader 顺序是固定的
loader 调用顺序是从后往前

② 打包 less 文件
运行npm i less-loader@10.0.1 less@4.1.1 -D
在 webpack.config.js 文件的 module->rules 数组添加规则：

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

③ 打包与 URL 路径相关的文件
运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D
在 webpack.config.js 文件的 module->rules 数组添加规则：

module: {
  rules: [{ test: /\.jpg|png|gif$/, use: ['url-loader?limit=22229'] }]
}

④ 打包 JS 文件的高级语法
运行 npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
安装 babel
在 webpack.config.js 文件的 module->rules 数组添加规则：

module: {
  rules: [{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]
}

配置 babel：在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项：

module.exports = {
  // 声明 babel 可用的插件
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
}

🍺如果没配安装配置加载器，会报下面的错误：

（5），打包发布

为何需要打包发布
🏵 开发环境下，打包生成的文件存放于内存中，无法得到最终打包生成的文件。
🏵 开发环境下，打包生成的文件不会进行代码压缩和性能优化。

①，配置 webpack 的打包发布
在 package.json 文件的 scripts 节点，新增 build 命令：

"scripts": {
  "dev": "webpack serve",
  "build": "webpack --mode production"
}

--model指定 webpack 的运行模式，会覆webpack.config.js 中的 model 选项

补充：

👨‍💻 自动清理 dist 目录下的旧文件
1，安装 clean-webpack-plugin 插件：

npm install clean-webpack-plugin@3.0.0 -D

2，在 webpack.config.js 文件中进行配置：

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

// plugins 节点挂载 CleanWebpackPlugin 实例对象
plugins: [htmlPlugin, new CleanWebpackPlugin()]

👨‍💻 企业级项目打包发布
企业级项目打包发布的流程更复杂：

🏵 生成打包报告，根据报告分析具体的优化方案
🏵 Tree-Shaking
🏵 为第三方库启用 CDN 加载
🏵 配置组件的按需加载
🏵 开启路由懒加载
🏵 自定制首页内容

👨‍💻 打包后双击 index.html 查看效果
项目 npm run build 打包之后，默认情况下在本地双击 dist/index.html 是无法看到项目效果的，如果想要看到效果需要进行配置。 vue.config.js文件将 publicPath 改为 './' 即可，默认为 '/'

module.exports = {
  publicPath: './'
}

（6），Source Map

Source Map 为何物
Source Map 就是一个信息文件，里面储存着位置信息，它存储着压缩混淆后的代码，所对应的转换前的位置。当我们运行打包生成的代码出错时，就能通过报错信息定位到源码的出错位置。

Source Map 最佳实践
🍉开发环境下：

devtool 设置为 eval-source-map。
显示源码报错的行数。
可以精准定位到具体的错误行。
🍉生产环境下：
把 devtool 设置为 nosources-source-map。
只会显示源码中报错的行数，不会暴露源码。
防止源码泄露，提高网站安全性。

// webpack.config.js 文件
module.exports = {
  mode: 'development',
  devtool: 'eval-source-map',
}

小编:薇薇的憨宝