![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化
火星飞鸟
学习前端ing...
展开
-
解决webpack5打包CSS图片路径不正确问题
问题最近在重构博客时,遇到了一个问题。在生产模式下,使用的MiniCssExtractPlugin.loader代替style-loader,但图片、字体等资源文件输出路径设置不正确,webpack 配置如下:module.exports = merge(common, { target: 'browserslist', mode: 'production', devtool: false, output: { path: path.resolve(ROOT_PATH, './b原创 2022-03-25 13:00:55 · 3997 阅读 · 0 评论 -
实践:基于Webpack5搭建React+TS开发环境
💡前言最近学习了 Webpack 5 之后,想自己搭建个项目练练手,于是就搭建了一个基于 Webpack 5 的 React 的脚手架。脚手架配置了相关模块,集成了常用功能,便于自己以后 React 新项目的搭建,开箱即用!仓库地址:「Github」🔌模块/功能框架React路由react-router-domTypescript状态管理库redux样式预处理less、sass代码检测eslintgit commit前规范检测commitlint时间库dayjsUI库antd,配原创 2022-03-08 22:04:47 · 1806 阅读 · 0 评论 -
Vue项目路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。安装@babel/plugin-syntax-dynamic-import包在babel.config.js配置文件中声明该插件将路由改为按需加载的形式,示例代码如下const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')co原创 2021-02-23 15:11:45 · 155 阅读 · 0 评论 -
Vue项目通过CDN优化ElementUI的打包
在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 文件 --.原创 2021-02-23 11:10:23 · 547 阅读 · 0 评论 -
Vue项目通过externals加载外部CDN资源
在项目配置文件vue.config.js中的发布模式添加如下:config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', lodash: '_', echarts: 'echarts', nprogress: 'NProgress', 'vue-quill-editor': 'VueQuillEditor'})然后,在index.html文件的原创 2021-02-23 11:02:21 · 595 阅读 · 1 评论 -
Vue项目通过chainWebpack自定义打包入口
默认情况下,Vue 项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:开发模式的入口文件为src/main-dev.js发布模式的入口文件为src/main-prod.js在vue.config.js导出的配置对象中,新增configureWebpack或chainWebpack节点,来自定义 webpack 的打包配置。在这里,configureWebpack和chainWebpa原创 2021-02-23 10:40:59 · 1010 阅读 · 1 评论 -
学习记录——Vue单文件组件
文章目录1. `Vue`单文件组件的基本用法2. `webpack`中配置`vue`组件的加载器3. 在`webpack`项目中使用`vue`4. `webpack`打包发布1. Vue单文件组件的基本用法单文件组件的组成结构:template:组件的模板区域script:业务逻辑区域style:样式区域<template> <!-- 这里用于定义Vue组件的模板内容 --></template><script> // 这原创 2020-12-10 20:47:27 · 227 阅读 · 0 评论 -
学习记录——Webpack的配置
1. webpack概述webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的困境。webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。2. webpack基本使用2.1 创建列表隔行变色案例新建项目空白目录,并运行npm init –y命令,初始化包管理配置文件package.json新建src源代码目录新建src -> inde原创 2020-12-10 20:36:38 · 369 阅读 · 0 评论 -
学习记录——前端模块化相关规范
1. ES6模块化(大一统的模块化规范)在ES6模块化规范诞生之前,Javascript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是,这些社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:AMD和CMD适用于浏览器端的Javascript模块化CommonJS适用于服务器端的Javascript模块化因此,ES6语法规范中,在语言层面上定义了ES6模块化规范,是浏览器端与服务器端通用的模块化开发规范。ES6模块化原创 2020-12-10 19:52:19 · 200 阅读 · 0 评论 -
学习记录——前端路由Vue-Router
文章目录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`动态路由匹原创 2020-12-10 19:18:01 · 512 阅读 · 1 评论