Webpack简介：
Webpack是目前主流的前端工程化解决方案之一
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。 注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的
使用Webpack
安装
在项目中安装webpack + webpack-cli，使用 -D 相当于 --save-dev
-D 写入到package.json中 devDependencies进行添加，表示我们只有在开发阶段才使用到
-S 相当于 --save 写入到 dependencies 对象，表示开发环境和生产都使用
如果项目没有 package.json 使用 npm init -y 快速配置一下
npm install webpack@5.42.1 webpack-cli@4.9.0 -D
"devDependencies": {
"webpack": "^5.42.1",
"webpack-cli": "^4.9.0"
}
配置启动命令
在package.json配置 scripts
"scripts": {
"dev": "webpack",
},
在命令行我们就使用 npm run dev 来启动 webpack命令
基本使用
覆盖默认 entry/output
1. 检验 webpack 规范支持
webpack 支持 ES6, CommonJS, AMD 规范
创建 vendor 文件夹，其中 minus.js、multi.js 和 sum.js 分别用 CommonJS、AMD 和 ES6 规范编写
// minus.js
module.exports = function(a, b) {
return a - b
}
// multi.js
define(function(require, factory) {
'use strict'
return function(a, b) {
return a * b
}
})
// sum.js
export default function(a, b) {
return a + b
}
在 app.js 文件中引入以上三个 js 文件
/**
* webpack 支持 ES6、CommonJs 和 AMD 规范
*/
// ES6
import sum from './vendor/sum'
console.log('sum(1, 2) = ', sum(1, 2))
// CommonJs
var minus = require('./vendor/minus')
console.log('minus(1, 2) = ', minus(1, 2))
// AMD
require(['./vendor/multi'], function(multi) {
console.log('multi(1, 2) = ', multi(1, 2))
})
2. 编写配置文件覆盖 entry/output
webpack.config.js 是 webpack 默认的配置文件名，在根目录下创建
const path = require('path')
module.exports = {
entry: {
app: './app.js' // 需要打包的文件入口
},
output: {
publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
filename: 'bundle.js' // 打包后生产的 js 文件
}
}
path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径。
__dirname: 当前模块的文件夹名称。
可以使用 console.log 输出一下就明白了
const path = require('path')
console.log('__dirname: ', __dirname)
console.log('path.resolve: ', path.resolve(__dirname, 'dist'))
module.exports = {
entry: {
app: './app.js' // 需要打包的文件入口
},
output: {
publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
filename: 'bundle.js' // 打包后生产的 js 文件
}
}
执行 npm run build 打包 js 文件
会发现生成了 dist 文件夹，并生成了两个打包后的文件
这跟 AMD 的引入方式有关，如果在 app.js 中注释掉 AMD 的写法，则只会打包出一个 bundle.js 文件
在实际写代码的时候，最好使用 ES6 和 CommonJS 的规范来写
当你注释 AMD 后，打包完 dist 中有多个文件，这是因为打包的时候，没有先删除 dist 文件，再打包，我们需要使用一个插件来帮我们实现，GitHub 链接：clean-webpack-plugin
① 安装插件
npm install clean-webpack-plugin --save-dev
② 修改 webpack 配置文件
const path = require('path')
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
entry: {
app: './app.js' // 需要打包的文件入口
},
output: {
publicPath: __dirname + '/dist/', // js 引用的路径或者 CDN 地址
path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
filename: 'bundle.js' // 打包后生产的 js 文件
},
plugins: [
new CleanWebpackPlugin() // 默认情况下，此插件将删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产。
]
}
注意!!!如果安装的 clean-webpack-plugin 是 3.0 版本的，配置要更改为：
// common js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
之后再执行 npm run build 就可以了
打包后的 js 文件会按照我们的配置放在 dist 目录下，创建一个 html 文件，引用打包好的 js 文件，打开 F12 就能看到效果了
参考文章
处理CSS
- 安装loader
npm add -D css-loader style-loader
- 添加
module处理css文件
总览图
总结
学习了前端打包工具 Webpack 后，我对现代前端开发的认识得到了深刻的拓展与提升。Webpack 作为一个强大的模块打包工具，不仅让我更好地理解了前端工程化的核心概念，还使我深入领略了模块化开发、代码拆分、性能优化等方面的重要性和实际应用。
首先，Webpack 的模块化开发让我可以将复杂的前端代码切分为更小、更易维护的模块。通过使用 ES6 模块、CommonJS 等方式，我能够将代码按照功能或业务逻辑进行组织，使得代码结构更加清晰，减少了命名冲突和全局变量污染的问题。这种模块化的方式不仅提高了代码的可读性，也方便了团队协作，使得多人协同开发变得更加高效。
其次，Webpack 的代码拆分功能使得前端应用的性能得到了显著的提升。通过将代码拆分成多个小块，Webpack 能够根据实际需要加载所需的模块，而不必一次性加载整个应用的代码。这大大减少了初始加载时间，提升了页面的响应速度。此外，Webpack 还能自动识别和打包公共模块，避免了重复加载，从而进一步优化了性能。
性能优化也是我在学习 Webpack 过程中的重要收获之一。Webpack 提供了诸多优化工具和插件，如代码压缩、图片优化、懒加载等，帮助开发者有效地减少页面加载时间和资源占用。我深入了解了如何通过配置文件进行性能调优，如何使用 Webpack 分析工具来查找潜在的性能瓶颈，这些技能对于构建出高性能的前端应用非常有帮助。
然而，学习 Webpack 也有一定的挑战。Webpack 的配置相对复杂，特别是对于初学者来说，理解各个配置项的作用和如何组合使用可能需要一些时间。同时，当项目规模逐渐增大时，Webpack 的构建速度可能会成为一个问题，需要在配置中进行相应的优化，以保持开发效率。
综上所述，学习了前端打包工具 Webpack 是一次非常宝贵的经验。通过深入学习和实践，我不仅掌握了如何使用 Webpack 进行模块化开发、代码拆分和性能优化，还提高了自己解决复杂前端项目中各种问题的能力。Webpack 在现代前端工程化中的地位不言而喻，我相信我所学到的知识和技能将在今后的前端开发中发挥重要作用，为用户呈现更出色的网络体验。
