const path = require('path'); const webpack = require('webpack'); module.exports = { // 部署应用包时的基本 URL publicPath: process.env.NODE_ENV === 'production'? '/your-project-name/' : '/', // 构建输出文件的目录 outputDir: 'dist', // 生成的静态资源在 outputDir 中的存放目录 assetsDir:'static', // 生成的 index.html 的输出路径 indexPath: 'index.html', // 设置 @ 别名，方便在项目中引用模块 chainWebpack: config => { config.resolve.alias .set('@', path.resolve(__dirname,'src')); }, // CSS 相关配置，这里配置 Sass css: { loaderOptions: { sass: { // 配置 Sass 全局变量、函数等的引入路径等，这里可以按需添加 additionalData: ` @import "@/styles/variables.scss"; ` } } }, // 配置 webpack 插件等，用于添加 jQuery、Cesium 相关依赖 configureWebpack: { plugins: [ // 引入 jQuery new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }) ], // 对于 Cesium 这种大的库，可能需要配置外部扩展， // 避免打包进最终的 bundle 文件（假设在 HTML 中通过 CDN 引入 Cesium） externals: { cesium: 'Cesium' } }, // 图片资源相关配置，比如限制图片大小等（以下示例仅是示意，可按需调整） chainWebpack: (config) => { config.module .rule('images') .use('url-loader') // 这里设置小于 10 * 1024（10KB）的图片转为 base64 格式，可根据实际情况调整 .loader('url-loader') .tap(options => Object.assign(options, { limit: 10 * 1024 })) }, // 大文件切片配置（以 webpack 的分包策略来举例， // 以下示例简单示意按照一定大小拆分文件，并非严格 10M 等分， // 需根据实际进一步完善） configureWebpack: { optimization: { splitChunks: { chunks: 'all', minSize: 10 * 1024 * 1024, // 10M，这里设置拆分文件的最小尺寸，可按需精确调整逻辑 cacheGroups: { // 自定义的分组，可以根据模块特性等进行更细致划分 vendor: { test: /[\\/]node_modules[\\/]/, name:'vendors', priority: -10 } } } } } };