文档教程

Laravel KongQi Laravel Admin2.0 文档安装

3年前

kongqi laravel admin 安装

优化代码运行的速度，包括代码加载速度，分割文件等

webpack5 教程 / webpack5 优化代码速度 / webpack5 优化

优化javascript 代码体积，优化图片体积。

webpack5 教程 / webpack5 优化代码体积 / webpack5 优化页面

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，提高打包速度。

webpack5 教程 / Webpack5 提升打包速度 / webpack5 优化打包 / webpack5 oneOf / webpack5 Cache

SourceMap（源代码映射）是一个用来生成源代码与构建后代码一一映射的文件的方案。 它会生成一个 xxx.map 文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建后代码出错了，会通过 xxx.map 文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

webpack5 源代码映射 / webpack5教程 / webpack5 SourceMap

将生成的css进行压缩处理

webpack5 css压缩 / webpack5教程 / webpack5 css

由于浏览器存在css3的兼容性，需要在不同的浏览器加前缀，使其兼容可用。

webpack5 教程 / webpack5 css兼容 / webpack5 css处理

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式,会出现闪屏现象，用户体验不好，因此需要单独的 Css 文件，通过 link 标签加载性能才好。

webpack5教程 / webpack5提取css为文件 / webpack5 css提取文件

配置webpack5生产模式，模式可分为开发、生产。

webpack5 配置模式 / webpack5教程 / webpack5开发环境

webpack-dev-server 实现代码热更新

webpack5 教程 / webpack5 webpack-dev-server / webpack 热更新

HtmlWebpackPlugin 简化了 HTML 文件的创建，以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值，并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件，使用 lodash 模板提供模板，或者使用你自己的 loader

webpack5 HtmlWebpackPlugin / webpack5 处理html

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

webpack5 Babel / webpack5教程 / webpack5 兼容代码

ESLint 是一个可配置的 JavaScript 检查器。 它可以帮助你发现并修复 JavaScript 代码中的问题。 问题可以是任何东西，从潜在的运行时错误，到不遵循最佳实践，再到风格问题。

webpack5教程 / webpack5 eslint使用 / webpack5 js 语法检查

我们使用的字体图标，需要将它处理，并进行打包处理。

webpack5教程 / webpack5打包图标 / webpack5打包字体

每次编译，都存在上次打包的文件，为了避免脏数据，需要进行清理，使用webpack5只需要加个参数即可完成。

webpack5 教程 / webpack5自动清空打包目录 / webpack5 自动清空上次打包资源

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

webpack5图片资源打包 / webpack5教程 / webpack5图片处理

学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源。

webpack5教程 / Webpack5 样式资源

在开始使用 Webpack 之前，我们需要对 Webpack 的配置有一定的认识。

webpack.config.js 基本配置 / webpack5配置文件说明 / webpack5教程

Webpack 是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。

webpack5 入门使用 / webpack5教程

谷歌插件管理标签页教程，建立标签页，移动标签页，分组标签页

Manage tabs / Chrome 插件例子

谷歌插件官方例子 Inject scripts into the active tab

Inject scripts into the active tab / 谷歌插件官方例子

Vue I18n 是 Vue.js 的国际化插件，为多语言开发提供插件支持。

Element Ui按需引入最新方法

Element Ui按需引入 / Element Ui 引入