configurewebpack对象写法
vite中使用configurewebpack
vite中使用configurewebpackVite是一个轻量级的前端构建工具，对开发体验提供了很大的提升。
它带有内置的开发服务器和强大的模块热更新，可以让你更快地构建和开发项目。
但是在某些情况下，我们可能需要自定义一些Webpack的配置来满足特定的需求，那如何在Vite中使用configureWebpack呢？步骤一：安装依赖首先我们需要新建一个Vite项目，并且安装我们需要的依赖。
```bashnpm init vite-app my-appcd my-appnpm install```接着我们需要安装`@vitejs/plugin-compat`插件来兼容一些旧版本浏览器。
```bashnpm install @vitejs/plugin-compat -D```步骤二：增加配置我们需要在`vite.config.js`配置文件中增加配置。
如果该文件不存在，则需要手动创建。
```javascriptconst compat = require('@vitejs/plugin-compat')module.exports = {configureWebpack: {plugins: [compat({targets: ['defaults','not IE 11','maintained node versions']})]}}```在这个配置中，我们使用了`require`引入了`@vitejs/plugin-compat`插件，并且使用了`configureWebpack`配置项来增加我们需要的Webpack配置。
在该配置项中我们又使用了`plugins`属性来指定我们需要的插件，也就是刚刚所安装的`@vitejs/plugin-compat`插件。
步骤三：完成配置完成上述的配置之后，我们就可以在Vite项目中成功使用configureWebpack来自定义Webpack配置了。
qiankun+vue微前端实战配置流程详解，包含基座配置、子应用配置、参数传递
qiankun+vue微前端实战配置流程详解，包含基座配置、⼦应⽤配置、参数传递qiankun 集成指引⽂档qiankun 是⼀个⽣产可⽤的微前端框架，它基于 single-spa，具备 js 沙箱、样式隔离、HTML Loader、预加载等微前端系统所需的能⼒。
qiankun 可以⽤于任意 js 框架，微应⽤接⼊像嵌⼊⼀个 iframe 系统⼀样简单。
⼀、qiankun ⽹址https:///zh⼆、安装 qiankun 依赖$ npm i qiankun -S三、基座1、路由模式：history 路由（/router/index.ts）const router = createRouter({// history模式history: createWebHistory(process.env.BASE_URL),routes,})2、注册⼦应⽤，开启服务（main.ts）import { registerMicroApps, start } from 'qiankun'// 注册⼦应⽤registerMicroApps([{name: 'usercenter', // ⼦应⽤名称entry: 'http://localhost:8088', // ⼦应⽤地址，开发环境和⽣产环境值不同，需动态配置container: '#usercenter', // ⼦应⽤容器activeRule: '/usercenter', // ⼦应⽤触发规则（路径）},])// 开启服务start()3、添加⼦应⽤容器（App.vue）<div id="usercenter"></div>4、添加⼦应⽤的服务代理,基座需配置⼦应⽤的服务（vue.config.js）devServer: {port: 8033, // 端⼝号host: '0.0.0.0',disableHostCheck: true,headers: { 'Access-Control-Allow-Origin': '*' },proxy: {'/api': {// ⼦应⽤1服务target: process.env.VUE_APP_API_URL,changeOrigin: true,pathRewrite: {'^/api': ''}},'/spider': {// ⼦应⽤2服务target: process.env.VUE_APP_API_URL_SPIDER,changeOrigin: true,pathRewrite: {'^/spider': ''}}}}四、⼦应⽤1、路由模式：history 路由（/router/index.ts）const router = createRouter({// history模式history: createWebHistory('/usercenter'),// 前缀需要和基座main.ts⾥⾯配置的激活路由⼀致routes,})2、向基座暴露接⼝，使基座与⼦应⽤互通（main.ts）const temp: any = windowconst isQiankun = temp.__POWERED_BY_QIANKUN__if (isQiankun) {__webpack_public_path__ = temp.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}function render(props?: any) {......}export async function mount(props: any) {render(props)}export async function unmount(props: any) {console.log(props)}export async function update(props: any) {console.log('update props', props)}isQiankun || render()3、修改⼦应⽤打包格式（vue.config.js）const { name } = require('./package')const port = 8088const dev = process.env.NODE_ENV === 'development'module.exports = {// 配置publicPath，填写你本机的ip地址publicPath: dev ? `//192.168.xx.xx:${port}` : process.env.BASE_URL,// ⾃定义webpack配置configureWebpack: {output: {// 把⼦应⽤打包成 umd 库格式library: `${name}-[name]`,libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${name}`,},},devServer: {port, // 端⼝号host: '0.0.0.0',disableHostCheck: true,// ⼦应⽤需要⽀持跨域headers: {'Access-Control-Allow-Origin': '*',},// history模式下的url会请求到服务器端，但是服务器端并没有这⼀个资源⽂件，就会返回404，所以需要配置这⼀项 historyApiFallback: {index: '/index.html',},},}五、主⼦应⽤间建⽴通信1、基座①通信⽂件（src/actions.ts）import { initGlobalState, MicroAppStateActions } from 'qiankun'const initialState = {}const actions: MicroAppStateActions = initGlobalState(initialState) export default actions②向⼦应⽤发送数据数据⽰例（ /login.vue ）// 主应⽤通信import actions from '@/actions'const token = `${res.tokenType} ${res.token}`// 登录成功后，设置 tokenactions.setGlobalState({ token })2、⼦应⽤①通信⽂件（src/actions.ts）function emptyAction() {// 警告：提⽰当前使⽤的是空 Actionconsole.warn('Current execute action is empty!')}class Actions {// 默认值为空 Actionactions = {onGlobalStateChange: emptyAction,setGlobalState: emptyAction}/*** 设置 actions*/setActions(actions) {this.actions = actions}/*** 映射*/onGlobalStateChange(...args: any) {console.log(...args)// return this.actions.onGlobalStateChange(...args)}/*** 映射*/setGlobalState(...args) {console.log(...args)// return this.actions.setGlobalState(...args)}}const actions = new Actions()export default actions②接收基座发送的数据⽰例（ main.ts ）import actions from '@/actions'function render(props?: any) {if (props) {// 注⼊ actions 实例actions.setActions(props)}......}export async function mount(props: any) {console.log(props)// debuggerrender(props)// 注册观察者函数获取主应⽤传递过来的参数// onGlobalStateChange 第⼆个参数为 true，表⽰⽴即执⾏⼀次观察者函数 props.onGlobalStateChange((state) => {const { token } = stateif (token) {localStorage.setItem('ACCESS_TOKEN', token)}}, true)}......。
Vue核心知识点
Vue核⼼知识点⼀、vue.config.js 基本配置module.exports = {// 基本路径 cli3.3以前版本⽤baseUrlpublicPath: '/',// 输出⽂件⽬录outputDir: 'dist',// ⽤于嵌套⽣成的静态资源assetsDir: '',// ⽣产环境sourMapproductionSourceMap: false,// webpack配置configureWebpack: () => {},chainWebpack: () => {},// css相关配置css: {// 启动css modulesmodules: false,// 是否使⽤css分离插件extract: true,// 开启 css sourcemaps？sourceMap: false,// css 预处理器配置项loaderOptions: {}},// webpack-dev-server 相关配置devServer: {host: '0.0.0.0',port: 8080,proxy: {} // 设置代理},// 第三⽅插件配置pluginOptions: {// ...}}⼆、vue组件间传值1. ⽗⼦组件传值(1) props（⽗传⼦） / $emit（⼦传⽗）(2) $parent / $children// App => Father => Child// Father.vuemounted () {console.log(this.$children[0].val) // 访问⼦组件 Child 的某个数据（⼦传⽗）console.log(this.$parent.val) // 访问⽗组件 App 的某个数据（⽗传⼦）console.log(this.$parent.handleClick) // 也可以是某个⽅法}(3) $refs（访问具体DOM节点）ref 后⾯⾃定义节点名称，从⽽实现在 js 中访问，访问的⽅式是 this.$refs.⾃定义名称 。
configurewebpack函数式
一、介绍WebpackWebpack是一个广泛使用的模块打包工具，它能够将各种类型的文件打包成符合浏览器标准的静态资源。
通过Webpack，开发者可以轻松管理项目中的各种资源，例如JavaScript、CSS、图片等。
二、配置Webpack的方式1. 使用Webpack配置文件Webpack的配置文件一般命名为webpack.config.js，通过在这个文件中编写配置，开发者可以对Webpack的打包行为进行自定义。
2. 使用命令行参数配置除了使用配置文件外，开发者还可以通过命令行参数来配置Webpack。
这种方式更适合一些简单的项目，但对于复杂的项目来说，配置文件仍然是更为灵活和方便的方式。
三、Webpack配置的基本结构1. entry在Webpack的配置中，entry字段用于指定项目的入口文件。
通常情况下，一个项目会有多个入口文件，可以通过配置多个entry来指定这些入口文件。
2. outputoutput字段用于指定项目打包完成后的输出文件的名称和路径。
通过配置output，开发者可以控制打包后的文件的名称和存放位置。
3. modulemodule字段用于配置Webpack的各种模块，包括对不同类型的文件进行处理的规则。
通过配置module，开发者可以使用不同的loader对各种类型的文件进行预处理或转换。
4. pluginsplugins字段用于配置Webpack的插件。
Webpack的插件系统非常强大，开发者可以通过使用各种插件来扩展Webpack的功能。
5. modemode字段用于指定项目的打包模式，包括development、production等。
根据不同的模式，Webpack会对打包结果进行优化和压缩。
四、Webpack配置的高级特性1. 懒加载Webpack支持使用import()语法进行懒加载，这可以帮助开发者减小初始加载量，并在需要时动态加载模块。
2. 代码分割通过配置Webpack，开发者可以将代码分割成多个文件，这样可以实现按需加载和优化页面加载性能。
vue2.x从vue.config.js配置到项目优化
vue2.x从vue.config.js配置到项⽬优化⽬录前⾔vue.config.js配置选项打包优化，减⼩包的⼤⼩图⽚视频压缩js代码压缩cdn加速⾸屏加载时间优化路由懒加载优化gzip压缩优化参考⽂献vue.config.js 是⼀个可选的配置⽂件，如果项⽬的 (和 package.json 同级的) 根⽬录中存在这个⽂件，那么它会被 @vue/cli-service ⾃动加载。
你也可以使⽤ package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
前⾔在实际项⽬中优化也是经常需要做的事情，特别在中⼤型项⽬中降低打包体积⼤⼩，提⾼⾸屏加载时间是必不可少的，同时在⾯试中也是⼀个⾼频问题。
本⽚⽂章我将从vue.config.js配置到项⽬优化前后效果做⼀个介绍。
主要适⽤于Vue前端的优化，通过CDN，路由懒加载，图⽚压缩，GIZP压缩以后，达到降低部署到服务器上的前端项⽬的包体积⼤⼩，因为包体积⼤⼩直接影响了项⽬⾸次打开的速度，并且前端⽂件体积变⼩，也意味着 CSS⽂件和JS⽂件也变⼩了，下载速度会更快，同理⽹页加载速度也就会变得更快，最终打到优化前端项⽬的⽬的vue.config.js配置选项该⽂件应该导出⼀个包含了选项的对象配置选项这边说⼏个常⽤的配置：pages: 配置应⽤的⼊⼝⽂件地址outputDir：⽣成的⽣产环境构建⽂件的⽬录configureWebpack：简单的打包配置，因为脚⼿架内置了webpack，所以在不修改打包命令的情况在，在这⾥个性化配置打包参数，可以为⼀个对象或者箭头函数，注意：这两种形式同时存在的话，后者会覆盖前者，所以只能⽤⾥卖弄的⼀种。
chainWebpack：链式操作的webpack配置，是⼀个函数devServer：代理配置、服务端⼝设置，不设置的话默认端⼝：8080详细配置说明可以到官⽹。
打包优化，减⼩包的⼤⼩正常打包都有默认的配置，在不修改的情况下也可以打包成功，但是包会⽐较⼤。
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
vue-cli3.0如何使⽤CDN区分开发、⽣产、预发布环境前⾔：上⼀篇记录⽂中提到了CDN优化，之前是直接在html中⼿动注⼊JS，也没有对开发和⽣产模式进⾏区分，因为是使⽤收费的CDN，所以在开发模式会遇到⽆权使⽤CDN的问题。
要是使⽤CDN写死在html中，不同环境需要⼿动的切换CDN，那么早晚有⼀天会搞乱，下⾯就说说怎么在vue-cli 3.0 中根据不同环境动态注⼊CDN。
1. 修改public/index.html通过htmlwebpackplugin动态注⼊脚本和样式，index.html如下：<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" ><title>杭州纳舍科技</title><!-- 使⽤CDN的CSS⽂件 --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="preload" as="style"><link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow" rel="external nofollow" rel="stylesheet"><% } %><!-- 使⽤CDN的JS⽂件 --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="external nofollow" rel="preload" as="script"><% } %></head><body><noscript><strong>We're sorry but ui doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div class="global-loading"><div class="spinner"></div></div><div id="app"></div><!-- built files will be auto injected --><% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %><script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script><% } %></body></html>2. 修改vue.config.js配置⾸先我们会考虑哪些东西要进⾏CDN优化，例如我们需要把vue、vue-router、moment在构建的时候排除在外使⽤CDN加载这三个库，那么需要把添加externalsconst isProduction = process.env.NODE_ENV === 'production';module.exports = {configureWebpack: config => {if (isProduction) {config.externals = {'vue': 'Vue','vue-router': 'VueRouter','moment': 'moment'}}}}现在我们运⾏npm run build 打包出来的⽂件就没有Vue、VueRouter、moment，现在我们使⽤html-webpack-plugin插件进⾏动态注⼊CDN，在vue-cli 3.0 中我们要这样配置：const isProduction = process.env.NODE_ENV === 'production';const cdn = {css: ['xxx.css', 'sss.js'],js: ['xxxx.js', 'sss.js']}module.exports = {configureWebpack: config => {if (isProduction) {config.externals = {'vue': 'Vue','vue-router': 'VueRouter','moment': 'moment'}}}chainWebpack: config => {if (isProduction) {config.plugin('html').tap(args => {args[0].cdn = cdn;return args;})}}}到⽬前为⽌已经解决了开发模式不使⽤CDN，⽣产模式使⽤CDN的问题和动态在html中注⼊CDN的问题。
Vue项目打包、合并及压缩优化网页响应速度
Vue项⽬打包、合并及压缩优化⽹页响应速度⽬录前⾔⼀.请求内容太⼤解决⽅案：CDN引⼊压缩请求资源⼀.http请求次数太多解决⽅案：总结前⾔影响⽹页响应速度的因素有很多，例如：请求内容太⼤、http请求次数太多、服务器本⾝处理请求太久、JS脚本执⾏耗时过长、浏览器回流重绘等。
⽹站页⾯的响应速度与⽤户体验息息相关，直接影响到⽤户是否愿意继续访问你的⽹站。
对于Vue项⽬⽽⾔，最普遍的问题可能在于打包后的⽂件太⼤，导致加载时间过长。
服务器请求处理太久和js脚本执⾏耗时过长，这两个跟代码的质量和服务器配置关系太重，需要根据具体的项⽬和代码进⾏优化，今天我们只从请求次数和打包后的单⽂件过⼤两个层⾯去优化⽹页响应速度(这个适⽤于所有前端项⽬)。
⼀.请求内容太⼤在项⽬打包后，我们经常会发现打包后的⽂件 vendors 和 app ⽂件尤其过⼤，其中app.js⽂件⾥放的是项⽬中各个页⾯的逻辑代码，vendor.js放的是各个页⾯各个组件公⽤的⼀些代码。
随着项⽬复杂度的增加，该⽂件的⼤⼩也与⽇俱增。
在带宽有限的情况下，往往下载这两个⽂件就会等很长时间。
解决⽅案：路由懒加载：分割代码块Vue⽀持异步组件，即可以在使⽤组件的地⽅使⽤⼀个Promise，Promise最终会通过resolve回传⼀个组件对象。
⽽webpack 的动态import的⽅式可以让代码分块进⾏打包，并且返回⼀个Promise(正是异步组件所需要的)。
在路由配置表⾥使⽤import可以将各个页⾯组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就避免将所有内容打包在⼀个chunk⾥，从⽽“按需加载”，⼤⼤提⾼响应速度。
如下图所⽰引⼊路由组件：CDN引⼊业务代码是经常更新迭代的，为了让浏览器尽可能长的时间缓存我们的静态⽂件，如果把类库代码和业务代码打包在⼀起，那么类库代码会跟着业务代码的更新⽽更新，⽽不能长时间的利⽤浏览器⾥缓存。
vue2项目使用 乾坤框架用法
vue2项目使用乾坤框架用法Vue2项目使用乾坤框架用法在Vue.js的生态系统中，乾坤框架是一种流行的微前端解决方案。
它可以帮助我们构建大型、高可扩展性的前端应用程序。
本文将介绍Vue2项目如何使用乾坤框架，以及如何一步一步地进行操作。
第一步：安装乾坤框架首先，我们需要安装乾坤框架。
在Vue2项目的根目录下，打开终端窗口并执行以下命令：npm install qiankun save这将会安装最新版本的乾坤框架，并将其添加到项目的依赖项中。
接下来，我们需要创建子应用。
子应用是乾坤框架中的一个概念，它代表了一个独立的前端应用，可以由不同的团队开发和维护。
在Vue2项目中，我们可以通过使用Vue CLI来创建一个子应用。
打开终端窗口并执行以下命令：vue create subapp1这将会创建一个名为subapp1的子应用，并在项目的根目录下生成相应的文件。
注意：在创建子应用的过程中，需要选择正确的配置项，以确保子应用能够正常运行并与乾坤框架兼容。
在子应用的根目录下，打开src/main.js文件，并进行以下配置：javascriptimport { createApp } from 'vue';import App from './App.vue';export async function bootstrap() {子应用的启动逻辑}export async function mount() {const app = createApp(App);app.mount('#app');}export async function unmount() {子应用的卸载逻辑}上述代码片段中，我们导入了Vue的createApp函数和App组件，并创建了一个名为app的Vue实例。
bootstrap函数表示子应用的启动逻辑，mount函数表示子应用的挂载逻辑，unmount函数表示子应用的卸载逻辑。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
configurewebpack对象写法
在Webpack中，可以使用`configureWebpack`对象的形式进行配置。
以下是一个示例：
```javascript
const webpack = require('webpack');
module.exports = {
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'common': '@/common',
'components': '@/components',
'network': '@/network',
'configs': '@/configs',
'views': '@/views',
'plugins': '@/plugins'
}
}
}
};
```
在上面的示例中，`configureWebpack`是一个对象，其中包含`resolve`属性。
`resolve`属性用于配置模块如何解析，其中`alias`是一个对象，用于设置别名。
在别名配置中，你可以指定模块的别名路径，例如将`assets`别名为`@/assets`，这样在代码中就可以使用`import something from 'assets/somefile'`的形式来引入模块，而不是使用完整的路径。
你可以根据自己的需求，在`configureWebpack`对象中添加更多的属性和配置项，以满足项目的特定要求。
请确保在使用Webpack时按照官方文档的指导进行配置，以确保配置的正确性和有效性。