webpack打包器更换rsbuild?

vuecli打包器更换为rsbuild使其能加速编译 , 怎么重写vue.config.js和package.json , 可以根据我的文件进行重写吗

{
"version": "1.0.0",
"description": "",
"author": "",
"license": "MIT",
"scripts": {

"serve": "node --max-old-space-size=8184 ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve",
"big": "npm run serve",
"dev": "vue-cli-service serve",
"build:prod": "vue-cli-service build",
"build:stage": "vue-cli-service build --mode staging",
"preview": "node build/index.js --preview",
"lint": "eslint --ext .js,.vue src",
"build:prod:zsczw": "vue-cli-service build --mode production_zsczw",
"build:prod:sdyj": "vue-cli-service build --mode production_sdyj",
"build:prod:rgyj": "vue-cli-service build --mode production_rgyj",
"build:prod:pxks": "vue-cli-service build --mode production_pxks",
"build:prod:zsyj": "vue-cli-service build --mode production_zsyj",
"build:prod:sdazx": "vue-cli-service build --mode production_sdazx",
"dev:zsczw": "vue-cli-service serve --mode test_zsczw",
"dev:sdyj": "vue-cli-service serve --mode test_sdyj",
"dev:rgyj": "vue-cli-service serve --mode test_rgyj",
"dev:pxks": "vue-cli-service serve --mode test_pxks",
"dev:zsyj": "vue-cli-service serve --mode test_zsyj",
"dev:sdazx": "vue-cli-service serve --mode test_sdazx"

},
"husky": {

"hooks": {
  "pre-commit": "lint-staged"
}

},
"lint-staged": {

"src/**/*.{js,vue}": [
  "eslint --fix",
  "git add"
]

},
"keywords": [

"vue",
"admin",
"dashboard",
"element-ui",
"boilerplate",
"admin-template",
"management-system"

],
"repository": {

"type": "git",
"url": "https://gitee.com/y_project/RuoYi-Vue.git"

},
"dependencies": {

"@amap/amap-jsapi-loader": "^1.0.1",
"@element-plus/icons": "0.0.11",
"@jiaminghi/data-view": "^2.10.0",
"@riophae/vue-treeselect": "0.4.0",
"axios": "^0.21.4",
"cesium": "^1.96.0",
"clipboard": "2.0.6",
"coordtransform": "^2.1.2",
"core-js": "3.8.1",
"dayjs": "^1.11.11",
"echarts": "^4.8.0",
"echarts-gl": "^1.1.0",
"echarts-liquidfill": "^2.0.6",
"element-ui": "^2.15.5",
"ezuikit-js": "^7.6.3",
"file-saver": "2.0.4",
"fuse.js": "6.4.3",
"highlight.js": "9.18.5",
"hls.js": "^1.5.16",
"html2canvas": "^1.4.0",
"jquery": "^3.6.0",
"js-beautify": "1.13.0",
"js-cookie": "2.2.1",
"jsencrypt": "3.0.0-rc.1",
"mapvgl": "^1.0.0-beta.126",
"node-sass": "^4.14.1",
"normalize.css": "^8.0.1",
"nprogress": "0.2.0",
"particles.js": "^2.0.0",
"postcss-pxtorem": "^6.0.0",
"qrcodejs2": "0.0.2",
"quill": "1.3.7",
"screenfull": "5.0.2",
"sortablejs": "1.10.2",
"spark-md5": "^3.0.2",
"three": "^0.130.1",
"v-drag": "^2.1.3",
"video.js": "^7.20.2",
"vue": "2.6.12",
"vue-3d-model": "^1.4.0",
"vue-count-to": "1.0.13",
"vue-cropper": "0.5.5",
"vue-particles": "^1.0.9",
"vue-pdf": "^4.3.0",
"vue-qr": "^4.0.9",
"vue-router": "3.4.9",
"vue-video-player": "^5.0.2",
"vuedraggable": "2.24.3",
"vuescroll": "^4.17.3",
"vuex": "3.6.0"

},
"devDependencies": {

"@vue/cli-plugin-babel": "4.4.6",
"@vue/cli-plugin-eslint": "4.4.6",
"@vue/cli-service": "4.4.6",
"babel-eslint": "10.1.0",
"chalk": "4.1.0",
"code-inspector-plugin": "^0.20.1",
"compression-webpack-plugin": "^6.1.1",
"connect": "3.6.6",
"eslint": "7.15.0",
"eslint-plugin-vue": "7.2.0",
"less": "^4.1.2",
"less-loader": "^5.0.0",
"lint-staged": "10.5.3",
"postcss-px-to-viewport": "^1.1.1",
"promise": "^8.1.0",
"runjs": "4.4.2",
"sass-loader": "10.1.0",
"script-ext-html-webpack-plugin": "2.1.5",
"svg-sprite-loader": "5.1.1",
"vue-happy-scroll": "^2.1.1",
"vue-particles": "^1.0.9",
"vue-template-compiler": "2.6.12",
"vue-wxlogin": "^1.0.4"

},
"engines": {

"node": ">=8.9",
"npm": ">= 3.0.0"

},
"browserslist": [

"> 1%",
"last 2 versions"

]
}

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { codeInspectorPlugin } = require('code-inspector-plugin');
//发布线上版本时,需要开启对js和css文件进行gzip压缩打包,nginx部署注意配置gzip参数
const CompressionWebpackPlugin = require('compression-webpack-plugin');

let cesiumSource = "./node_modules/cesium/Source";
let cesiumWorkers = "../Build/Cesium/Workers";

function resolve(dir) {
return path.join(__dirname, dir)
}

const name = defaultSettings.title// 标题

const port = process.env.port || process.env.npm_config_port || 80 // 端口

console.log('DESC-------' + process.env.DESC)
console.log('VUE_APP_PROJECT_TYPE-------' + process.env.VUE_APP_PROJECT_TYPE)
let url = http://localhost:8080
if (process.env.VUE_APP_PROJECT_TYPE == 'pxks') {
url = '11.11.11.11'
}
console.log("url:" + url)
console.log('process.env.VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
console.log('process.env.NODE_ENV', process.env.NODE_ENV)
// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ttk.vip/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.ttk.vip/admin/,则设置 baseUrl 为 /admin/。
publicPath: process.env.NODE_ENV === "production" ? "/" : "/",//北滘镇前端使用
// 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)(默认dist)
outputDir: 'dist',
// 用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)
assetsDir: 'static',
// y,有效值:ture | false | 'error'
lintOnSave: process.env.NODE_ENV === 'development',
// 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,

// webpack-dev-server 相关配置
devServer: {

host: '0.0.0.0',
port: port,
open: true,
proxy: {
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: url,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  },
  '/fsGovPlatform': {
    target: 'http://22.22.22.22:8080/fsGovPlatform',
    ws: true,
    changOrigin: true,
    pathRewrite: {
      '^/fsGovPlatform': ''
    }
  },
},
disableHostCheck: true

},
configureWebpack: {

name: name,
// cesium
resolve: {
  alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src'),
    cesium: path.resolve(__dirname, cesiumSource)
  }
},
devtool: 'source-map',
amd: {
  // cesium
  toUrlUndefined: true
},
module: {
  // cesium 不加这个配置会报require引入警告
  unknownContextCritical: false
},
plugins: [
  new CompressionWebpackPlugin({
    test: /\.(js|css|html|json)?$/i, // 压缩文件格式
    filename: '[path][base].gz', // 压缩后的文件名
    algorithm: 'gzip', // 使用gzip压缩
    compressionOptions: { level: 9 }, //压缩等级,1-9数字越大压力率越高,文件越小默认值9
    // threshold: 10240, // 只有大小大于该值的资源会被处理,单位是 bytes,默认值是 0。
    minRatio: 0.8, // 压缩率小于1才会压缩
    deleteOriginalAssets: false // 是否删除原资源,本项目始终不能删除
  }),
  new codeInspectorPlugin({
    bundler: 'webpack',
    editor: 'code',
  }),
  // cesium
  new webpack.DefinePlugin({
    // Define relative base path in cesium for loading assets
    CESIUM_BASE_URL: JSON.stringify("../../")
  }), // 对build生效,拷贝到dist目录下。如:dist/Assets
  new CopyWebpackPlugin([
    {
      from: path.join(cesiumSource, cesiumWorkers),
      to: "Workers"
    }
  ]),
  new CopyWebpackPlugin([
    {
      from: path.join(cesiumSource, "Assets"),
      to: "Assets"
    }
  ]),
  new CopyWebpackPlugin([
    {
      from: path.join(cesiumSource, "Widgets"),
      to: "Widgets"
    }
  ]),
  new CopyWebpackPlugin([
    {
      from: path.join(cesiumSource, 'ThirdParty/Workers'),
      to: 'ThirdParty/Workers'
    }
  ]),
],

},
css: {

requireModuleExtension: true,
sourceMap: true,
// 全局样式
loaderOptions: {
  postcss: {
    plugins: [
      require('postcss-px-to-viewport')({
        unitToConvert: 'px', // 需要转换的单位,默认为"px"
        viewportWidth: 1920, // 视窗的宽度,对应pc设计稿的宽度,一般是1920
        viewportHeight: 1080, // 视窗的高度,对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080
        unitPrecision: 6, // 单位转换后保留的精度
        propList: [
          // 能转化为vw的属性列表
          '*',
          // '!font-size',
        ],
        viewportUnit: 'vw', // 希望使用的视口单位
        fontViewportUnit: 'vw', // 字体使用的视口单位
        selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
        minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
        mediaQuery: false, // 媒体查询里的单位是否需要转换单位
        replace: true, // 是否直接更换属性值,而不添加备用属性
        exclude: defaultSettings.pxToViewPortExclude, // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
      }),
    ],
  },
}

},

chainWebpack(config) {

config.plugins.delete('preload') // TODO: need test
config.plugins.delete('prefetch') // TODO: need test

// set svg-sprite-loader
config.module
  .rule('svg')
  .exclude.add(resolve('src/assets/icons'))
  .end()
config.module
  .rule('icons')
  .test(/\.svg$/)
  .include.add(resolve('src/assets/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
  .end()

config
  .when(process.env.NODE_ENV !== 'development',
    config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [{
          // `runtime` must same as runtimeChunk name. default is `runtime`
          inline: /runtime\..*\.js$/
        }])
        .end()
      config
        .optimization.splitChunks({
          chunks: 'all',
          cacheGroups: {
            libs: {
              name: 'chunk-libs',
              test: /[\\/]node_modules[\\/]/,
              priority: 10,
              chunks: 'initial' // only package third parties that are initially dependent
            },
            elementUI: {
              name: 'chunk-elementUI', // split elementUI into a single package
              priority: 20, // the weight needs to be larger than libs and app or it will be packaged into libs or app
              test: /[\\/]node_modules[\\/]_?element-ui(.*)/ // in order to adapt to cnpm
            },
            commons: {
              name: 'chunk-commons',
              test: resolve('src/components'), // can customize your rules
              minChunks: 3, //  minimum common number
              priority: 5,
              reuseExistingChunk: true
            }
          }
        })
      // config.optimization.runtimeChunk('single'),
      //   {
      //     from: path.resolve(__dirname, './public/robots.txt'), //防爬虫文件
      //     to: './', //到根目录下
      //   }
    }
  )

}
}

还未成功

阅读 373
avatarAI BotBETA

根据你的配置文件,我帮你整理迁移到 RSBuild 的关键步骤:

package.json 修改建议:

{
  "scripts": {
    "dev": "rsbuild dev",
    "build:prod": "rsbuild build --mode production",
    "build:stage": "rsbuild build --mode staging",
    "build:prod:zsczw": "rsbuild build --mode production_zsczw",
    "build:prod:sdyj": "rsbuild build --mode production_sdyj",
    // ...其他build脚本同理修改
    "dev:zsczw": "rsbuild dev --mode test_zsczw",
    "dev:sdyj": "rsbuild dev --mode test_sdyj",
    // ...其他dev脚本同理修改
    "lint": "eslint --ext .js,.vue src"
  },
  "devDependencies": {
    "@rsbuild/core": "^1.2.1",
    "@rsbuild/plugin-vue2": "^1.2.1",
    "@rsbuild/plugin-svgr": "^1.2.1",
    "@rsbuild/plugin-babel": "^1.2.1",
    // 保留原有eslint等工具
    "eslint": "7.15.0",
    "eslint-plugin-vue": "7.2.0",
    // 删除vue-cli相关依赖
    // 新增cesium所需插件
    "copy-webpack-plugin": "^11.0.0"
  }
}

创建 rsbuild.config.js 替换 vue.config.js:

const { defineConfig } = require('@rsbuild/core');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const { codeInspectorPlugin } = require('code-inspector-plugin');

module.exports = defineConfig({
  source: {
    define: {
      CESIUM_BASE_URL: JSON.stringify("../../")
    },
    alias: {
      '@': path.resolve(__dirname, 'src'),
      cesium: path.resolve(__dirname, 'node_modules/cesium/Source')
    }
  },
  output: {
    distPath: {
      root: 'dist',
      js: 'static/js',
      css: 'static/css'
    },
    copy: [
      { from: 'node_modules/cesium/Source/ThirdParty', to: 'ThirdParty' },
      { from: 'node_modules/cesium/Source/Workers', to: 'Workers' },
      { from: 'node_modules/cesium/Source/Assets', to: 'Assets' },
      { from: 'node_modules/cesium/Source/Widgets', to: 'Widgets' }
    ]
  },
  dev: {
    port: 80,
    proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: process.env.PROXY_TARGET || 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { [`^${process.env.VUE_APP_BASE_API}`]: '' }
      }
    }
  },
  tools: {
    postcss: (config) => {
      config.postcssOptions.plugins.push(
        require('postcss-px-to-viewport')({
          viewportWidth: 1920,
          unitToConvert: 'px',
          viewportUnit: 'vw',
          fontViewportUnit: 'vw',
          selectorBlackList: [],
          minPixelValue: 1
        })
      )
    }
  },
  plugins: [
    codeInspectorPlugin({
      bundler: 'webpack',
      editor: 'code',
    })
  ]
});

需要特别注意的修改点:

  1. Cesium 配置改用 RSBuild 的 copy 配置项实现资源复制
  2. 代理配置通过 dev.proxy 字段配置
  3. PostCSS 插件通过 tools.postcss 配置
  4. 环境变量需要创建对应的 .env 文件(如 .env.production)
  5. 需要保留原有 ESLint 配置(单独配置)
  6. 建议升级 copy-webpack-plugin 到最新版

需要补充的步骤:

  1. 创建 .env 文件(示例):

    # .env.production_zsczw
    NODE_ENV=production
    VUE_APP_BASE_API=/api
    PROXY_TARGET=http://your-prod-server
  2. 需要单独配置 SVG loader:

    // 在 rsbuild.config.js 中添加
    module.exports = {
      // ...
      module: {
     rules: [
       {
         test: /\.svg$/,
         issuer: /\.(js|ts)x?$/,
         use: ['@rsbuild/plugin-svgr']
       }
     ]
      }
    }
  3. 需要处理 Cesium 的警告,添加:

    module.exports = {
      // ...
      security: {
     checkSyntax: false
      }
    }

迁移后需要测试的重点:

  1. Cesium 地图功能是否正常
  2. 不同环境配置是否生效
  3. 代码分割是否正常
  4. 代理配置是否生效
  5. 响应式布局是否正确应用

遇到具体问题可以再根据错误信息调整配置。RSBuild 的构建速度相比 Webpack 通常会有 30%-50% 的提升,但需要确保所有 loader 和插件都正确迁移。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题