qq_46199553的博客

优化代码运行性能打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。代码分割（Code Split）主要做了两件事：分割文件：将打包生成的文件进行分割，生成多个 js 文件。按需加载：需要哪个文件就加载哪个文件。#怎么用代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分

SourceMap。

提取 Css 成单独文件Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好。

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:优化代码运行性能优化代码打包速度。

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源。

Webpack 本身功能是有限的:开发模式：仅能编译 JS 中的 ES Module 语法生产模式：能编译 JS 中的 ES Module 语法，还能压缩 JS 代码。

前端开发：⚫ 模块化（js 的模块化、css 的模块化、资源的模块化）⚫ 组件化（复用现有的 UI 结构、样式、行为）⚫ 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）⚫ 自动化（自动化构建、自动部署、自动化测试）2. 什么是前端工程化前端工程化指的是：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。企业中的 Vue 项目和 React 项目，都是基于工程化的方式进行开发的。好处：前端开发自成体系，有一套标准的开发方案

第 4 章：webpack 生产环境的基本配置4.1 提取 css 成单独文件const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { entry: './src/js/index.js', out

1.1 webpack 是什么webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。1.2 webpack 五个核心概念1.2.1 Entry 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。1.2.2 Output 输出(Out

webpack 中的 loader（了解）1. loader 概述在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：⚫ css-loader 可以打包处理 .css 相关的文件⚫ less-loader 可以打包处理 .less 相关的文件⚫ babel-loade