火星基地

问题最近在重构博客时，遇到了一个问题。在生产模式下，使用的MiniCssExtractPlugin.loader代替style-loader，但图片、字体等资源文件输出路径设置不正确，webpack 配置如下：module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b

💡前言最近学习了 Webpack 5 之后，想自己搭建个项目练练手，于是就搭建了一个基于 Webpack 5 的 React 的脚手架。脚手架配置了相关模块，集成了常用功能，便于自己以后 React 新项目的搭建，开箱即用！仓库地址：「Github」🔌模块/功能框架React路由react-router-domTypescript状态管理库redux样式预处理less、sass代码检测eslintgit commit前规范检测commitlint时间库dayjsUI库antd，配

当打包构建项目时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。安装@babel/plugin-syntax-dynamic-import包在babel.config.js配置文件中声明该插件将路由改为按需加载的形式，示例代码如下const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')co

在main-prod.js中，注释掉element-ui按需加载的代码在index.html的头部区域中，通过 CDN 加载element-ui的 js 和 css 样式：<!-- element-ui 的样式表文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/themechalk/index.css" /><!-- element-ui 的 js 文件 --.

在项目配置文件vue.config.js中的发布模式添加如下：config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'})然后，在index.html文件的

默认情况下，Vue 项目的开发模式与发布模式，共用同一个打包的入口文件（即src/main.js）。为了将项目的开发过程与发布过程分离，我们可以为两种模式，各自指定打包的入口文件，即：开发模式的入口文件为src/main-dev.js发布模式的入口文件为src/main-prod.js在vue.config.js导出的配置对象中，新增configureWebpack或chainWebpack节点，来自定义 webpack 的打包配置。在这里，configureWebpack和chainWebpa

文章目录1. `Vue`单文件组件的基本用法2. `webpack`中配置`vue`组件的加载器3. 在`webpack`项目中使用`vue`4. `webpack`打包发布1. Vue单文件组件的基本用法单文件组件的组成结构：template：组件的模板区域script：业务逻辑区域style：样式区域<template> <!-- 这里用于定义Vue组件的模板内容 --></template><script> // 这

1. webpack概述webpack是一个流行的前端项目构建工具（打包工具），可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持，以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。2. webpack基本使用2.1 创建列表隔行变色案例新建项目空白目录，并运行npm init –y命令，初始化包管理配置文件package.json新建src源代码目录新建src -> inde

1. ES6模块化（大一统的模块化规范）在ES6模块化规范诞生之前，Javascript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：AMD和CMD适用于浏览器端的Javascript模块化CommonJS适用于服务器端的Javascript模块化因此，ES6语法规范中，在语言层面上定义了ES6模块化规范，是浏览器端与服务器端通用的模块化开发规范。ES6模块化

文章目录1. 路由的基本概念与原理1.1 后端路由1.2 `SPA`（`Single Page Application`）1.3 前端路由1.4 `Vue Router`2. `vue-router`的基本使用2.1 基本使用步骤（1）引入相关的库文件（2）添加路由链接（3）添加路由填充位（4）定义路由组件（5）配置路由规则并创建路由实例（6）把路由挂载到`Vue`根实例中2.2 路由重定向3. `vue-router`嵌套路由3.1 嵌套路由功能3.2 具体实现4. `vue-router`动态路由匹