轻松上手webpack，看这一篇就够了

初始webpack

webpack 是前端项目工程化的具体解决方案。详细见百度

基本使用

安装webpack

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

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

结论：开发时候一定要用development，因为追求的是打包的速度，而不是体积；

反过来发布上线的时候要用production因为上线追求的是体积小，而不是打包速度快

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

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

默认规定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定

配置文件

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

//导入path模块
const path = require('path')

module.export = {
  // entry: '指定要处理哪个文件'
  entry: path.join(__dirname, './src/index1.js'),
  output: {
    //存放到目录
    path: path.join(__dirname, 'dist'),
    // 生成的文件名
    filename: 'bundle.js',
  },
}

webpack-cli和webpack-dev-server第三方插件

实现自动打包功能

1.在脚本后面添加serve

2.运行npm run dev，重新进行项目打包

3.其中，成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的

html-webpack-plugin

配置：

疑惑

1.通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

2.HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

devServer节点

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

loader

打包处理css文件

运行 npm i less-loader@10.0.1 less@4.1.1 -D

test 表示匹配的文件类型， use 表示对应要调用的 loader
注意：

1. use 数组中指定的 loader 顺序是固定的

2. 多个 loader 的调用顺序是：从后往前调用

打包处理less文件

npm i less-loader@10.0.1 less@4.1.1 -D

打包处理样式表中url路径相关的文件

npm i url-loader@4.1.1 file-loader@6.2.0 -D

其中 ? 之后的是 loader 的参数项：
⚫ limit 用来指定图片的大小，单位是字节（byte）
⚫ 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

打包处理js文件中的高级语法

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

配置

打包发布

打包的命令行：npm run build

–model 是一个参数项，用来指定 webpack 的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。
注意：通过 --model 指定的参数项，会覆盖 webpack.config.js 中的 model 选项。

把js文件统一生成到js目录中

把图片统一生成到image目录中

修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径

自动清理dist目录下的旧文件

为了在每次打包发布时自动清理掉 dist 目录中的旧文件，可以安装并配置 clean-webpack-plugin 插件：

Source Map

当程序运行出错时，可以直接在控制台提示错误行
的位置，并定位到具体的源代码：

在 webpack.config.js 中添加如下的配置，即可保证运行时报错的行数与源代码的行数
保持一致：

在发布的时候，建议把source map关掉，避免代码泄露

// 在开发调试阶段，建议大家都把devtool的值设置为eval-source-map
devtool: 'eval-source-map',
// 在实际发布阶段，建议大家都把devtool的值设置为nosources-source-map
devtool: 'nosources-source-map',    //定位行数不暴露源码
devtool: 'source-map',              //定位行数且暴露源码

最佳实践

查找文件

建议大家用@表示src源代码目录，从外往里查找，不要使用…/从里往外查找

在webpack.config.js配置：

module.exports = {
 resolve: {
  alias: {
    //告诉webpack，程序员写的代码中，@符号表示src这一层目录
    '@': path.join(__dirname, './src/'),
  },
 },
}

写在结尾的话：该笔记是学习黑马课程时所做的笔记，便于快速上手学习，欢迎大家收藏，一起学习~