摘要：
主要学习介绍 本章节我们主要学习： loader 原理 自定义常用 loader plugin 原理 自定义常用 plugin 阅读全文
摘要：
loader和plugin的总结 本章节我们学习了 webpack 中的 loader 和 plugin 用法。包括是什么，怎么使用，如何自定义等。 它能够帮助大家提升对 loader 和 plugin 的认识，同时学习到了原理，将来大家也能够在社区中做出贡献。 阅读全文
摘要：
React 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); const CopyPlugin = require("copy-webpack-plugin"); const getStyleLoaders = (preProcessor) => { return [ "style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-preset-env", // 能解 阅读全文
摘要：
搭建Cli介绍 我们将使用前面所学的知识来从零开始搭建 React-Cli 和 Vue-cli。 阅读全文
摘要：
webpack构建脚手架总结 本章节我们学习到了： 如何搭建 React-Cli 和 Vue-Cli。 如何对脚手架进行优化。 未来随着项目越来越大，还可以在优化的方案。 阅读全文
摘要：
Vue 脚手架 开发模式配置 // webpack.dev.js const path = require("path"); const ESLintWebpackPlugin = require("eslint-webpack-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const { VueLoaderPlugin } = require("vue-loader"); const { DefinePlugin } = require("webpack"); const CopyPlugin = require("copy-webpack-plugin"); const getStyleLoaders = (preProcessor) => { return [ "vue-style-loader", "css-loader", { loader: "postcss-loader", options: { postcssOptions: { plugins: [ "postcss-pre 阅读全文
摘要：
提升开发体验 SourceMap 为什么 开发时我们运行的代码是经过 webpack 编译后的，例如下面这个样子： /* * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development"). * This devtool is neither made for production nor for readable output files. * It uses "eval()" calls to create a separate source file in the browser devtools. * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/) * or disable the default devtool with "devtool: false". * If you are l 阅读全文
摘要：
提升打包构建速度 HotModuleReplacement 为什么 开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。 所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。 是什么 HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。 怎么用 基本配置 阅读全文
摘要：
优化代码运行性能 Code Split 为什么 打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。 所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。 是什么 代码分割（Code Split）主要做了两件事： 分割文件：将打包生成的文件进行分割，生成多个 js 文件。 按需加载：需要哪个文件就加载哪个文件。 阅读全文
摘要：
Webpack 高级配置介绍 本章节主要介绍 Webpack 高级配置。 所谓高级配置其实就是进行 Webpack 优化，让我们代码在编译/运行时性能更好~ 我们会从以下角度来进行优化： 提升开发体验 提升打包构建速度 减少代码体积 优化代码运行性能 阅读全文