这是我参与「第四届青训营」笔记创作活动的第2天

webpack是什么

webpack是前端项目工程化的解决方案。

具体来说，Webpack是一个静态资源的打包工具。前端开发的项目是由很多不同类型的文件构成的，无论如何最后都是要将这些文件打包压缩到一起来发布，webpack能够解决不同文件类型引起的代码压缩混淆、还有一些浏览器的兼容性（比如：JavaScript的新特性，TS代码等）问题，以及提高性能优化等等。

它让程序员把工作重心放在具体功能实现上，提高开发效率和项目可维护性。

安装webpack

-D 是 --save-dev 的缩写，表示开发时依赖，只在项目开发阶段用到。 -S 是 --save 的缩写，表示运行时依赖，即项目打包发布运行时要用到。

npm install webpack webpack-cli -D

使用webpack

项目根目录中创建 webpack.config.js 配置文件，初始化基本配置：

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

2.运行命令

npx webpack

webpack打包流程

webpack配置

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

五个核心配置概念：

entry（入口）

指示 Webpack 从哪个文件开始打包

output（输出）

指示 Webpack 打包完的文件输出到哪里去，如何命名等

loader（加载器）

webpack 本身只能处理 js、json 等资源，其他资源需要借助 loader，Webpack 才能解析

plugins（插件）

扩展 Webpack 的功能

mode（模式）

主要由两种模式：

开发模式：development
生产模式：production

// Node.js的核心模块，专门用来处理文件路径
const path = require("path");

module.exports = {
  // 入口
  // 相对路径和绝对路径都行
  entry: "./src/main.js",
  // 输出
  output: {
    // path: 文件输出目录，必须是绝对路径
    // path.resolve()方法返回一个绝对路径
    // __dirname 当前文件的文件夹绝对路径
    path: path.resolve(__dirname, "dist"),
    // filename: 输出文件名
    filename: "main.js",
  },
  // 加载器
  module: {
    rules: [],
  },
  // 插件
  plugins: [],
  // 模式
  mode: "development", // 开发模式
};

webpack 的 loader 加载器

loader 概述

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

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

loader 调用过程

打包 css 文件

运行 `npm i css-loader style-loader -D
` 命令，安装 loader
在 webpack.config.js 文件的 module->rules 数组添加规则：

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

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

打包 less 文件

运行 npm i less-loader -D 命令
在 webpack.config.js 文件的 module->rules 数组添加规则：

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

打包与 URL 路径相关的文件

运行 npm i url-loader file-loader -D 命令
在 webpack.config.js 文件的 module->rules 数组添加规则：

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

limit 用于指定图片大小，单位是 byte
只有 <= limit 大小的图片才会被转为 base64 格式 (opens new window)的图片

打包 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 }]],
}

打包发布

为何需要打包发布

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

配置 webpack 的打包发布

在 package.json 文件的 scripts 节点，新增 build 命令：

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

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

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

在 webpack.config.js 配置文件的 output 节点中，进行配置:

ouput: {
  path: path.join(__dirname, 'dist'),
  // 将 bundle.js 文件存放到 dist 目录的 js 子目录中
  filename: 'js/bundle.js',
}

把图片统一生成到 image 目录

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

{
  test: /.jpg|png|gif$/,
  use: {
    loader: 'url-loader',
    options: {
      limit: 23333,
      // 指明生成的图片存到 dist 目录下的 image 子目录中
      outputPath: 'image'
    }
  }
}

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

安装 clean-webpack-plugin 插件

npm install clean-webpack-plugin@3.0.0 -D

在 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: './',
}

webpack基础|青训营笔记