webpack的基本使用
前端工程化
早期的前端工程化解决方案：
- grunt（ https://www.gruntjs.net/ ）
- gulp（ https://www.gulpjs.com.cn/ ）
目前主流的前端工程化解决方案：
- webpack（ https://www.webpackjs.com/ ）
- parcel（ https://zh.parceljs.org/ ）
webpack的基本使用
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript 的兼容性、性能优化等强大的功能。
1.创建列表隔行变色项目
"dependencies"：开发和部署上线都要用到
"devDependencies"：只在开发时用到
可以在 npsjs.com 中查到后缀是 --save 还是 --save-dev
2.在项目中配置 webpack
webpack.config.js文件配置
// 使用Node.js中的导出语法向外导出一个webpack的配置对象
module.exports = {
mode: 'development'//代表webpack运行的模式，可选值有两个 development(开发) 和 production(上线)
}
- mode选项改为production，main.js的代码就会被压缩，但打包时间会变长
3.指定webpack的entry和output
默认将 src中的index.js文件 打包处理为 dist中的main.js
-
自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
entry:path.join(__dirname,',/src/index.js'),//打包入口文件的路径
output:{
path:path.join(__dirname,'/dist'),//输出存放路径
filename:'main.js'//输出文件的名称
}
webpack中的插件
1.webpack-dev-server
webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。
1.1 安装
运行如下的命令，即可在项目中安装此插件
npm install webpack-dev-server@3.11.2 -D
1.2 配置
① 修改 package.json -> scripts 中的 dev 命令如下：
② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
2.html-webpack-plugin
2.1 安装
npm install html-webpack-plugin@5.3.2 -D
2.2 配置
3.devServer 节点
在 webpack.config.js 配置文件中，可以通过 devServer 节点对webpack-dev-server 插件进行更多的配置，示例代码如下：
devServer: {
// 首次打包成功后，自动打开浏览器
open: true,
// 在 http 协议中，如果端口号是 80，则可以被省略
port: 80,
// 指定运行的主机地址
host: '127.0.0.1'
},
注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！
webpack 中的 loader
-
在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。
-
其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！
![]()
loader调用过程：
1.打包处理css文件
① 运行npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
module: {
rules: [
// 定义了不同模块对应的 loader
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
]
}
其中，test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：
-
use 数组中指定的 loader 顺序是固定的
-
多个 loader 的调用顺序是：从后往前调用
-
底层原理如图：
![]()
2.打包处理 less 文件
① 运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
3.打包处理样式表中与 url 路径相关的文件
base64图片
https://c.runoob.com/front-end/59/
优点：可以在浏览器拿到html标签时，就将图片请求下来，避免再此发起请求
缺点：转码后的体积过大，因此只适合小图片使用
打包处理
① 运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令
② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
其中 ? 之后的是 loader 的参数项：
- limit 用来指定图片的大小，单位是字节（byte）
- 只有 小于或等于 limit 大小的图片，才会被转为base64 格式的图片
4.打包处理js文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借助于 babel-loader 进行打包处理。
例如：
// 定义装饰器函数
function info(target) {
target.info = 'Person info.'
}
// 定义一个普通的类
@info
class Person { }
console.log(Person.info)
4.1 安装 babel-loader 相关的包
运行如下的命令安装对应的依赖包：
npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D
在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
4.2 配置 babel-loader
在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
module.exports = {
// 声明 babel 可用的插件
// 将来，webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}
详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators
打包发布
配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下，新增 build 命令如下：
-
--model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
-
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。
2. 把 JavaScript 文件统一生成到 js 目录中
在 webpack.config.js 配置文件的 output 节点中，进行如下的配置：
3. 把图片文件统一生成到 image 目录中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：
4. 自动清理 dist 目录下的旧文件
为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置clean-webpack-plugin 插件：
Source Map
前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时就不可避免的产生了另一个问题：
- 对压缩混淆之后的代码除错（debug）是一件极其困难的事情
1.什么是 Source Map
-
Source Map 就是一个信息文件，里面储存着位置信息。
也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。 -
有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。
2.默认 Source Map 的问题
开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。
3.解决默认 Source Map 的问题
开发环境下，推荐在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数保持一致：
devtool:'eval-source-map'
4.webpack 生产环境下的 Source Map
-
在生产环境下，如果省略了 devtool 选项，则最终生成的文件中不包含 Source Map。这能够防止原始代码通过 Source Map 的形式暴露给别有所图之人。
-
在生产环境下，如果只想定位报错的具体行数，且不想暴露源码。此时可以将
devtool 的值设置为nosources-source-map。当点击错误链接时，就不会暴露源码。 -
在生产环境下，如果想在定位报错行数的同时，展示具体报错的源码。此时可以将
devtool 的值设置为source-map。（很不推荐）
![]()
注：
webpack中 @ 的原理和好处
用 @ 表示 src 源代码目录
// import msg from '../../msg'
// 建议大家使用 @ 表示 src 源代码目录，从外往里找
import msg from '@/msg.js'
console.log(msg);
配置
webpack.config.js文件中，与module平级
resolve: {
alias: {
// 告诉 webpack，程序员写的代码中，@ 符号表示 src 这一层目录
'@': path.join(__dirname, './src/')
}
}
浙公网安备 33010602011771号