const path = require('path'); const resolve = (dir) => path.join(__dirname, dir); const CopyWebpackPlugin = require('copy-webpack-plugin'); const webpack = require('webpack'); const cesiumSource = './node_modules/cesium/Source' const cesiumWorkers = '../Source/Workers' function extendDefaultPlugins(arr) { let plug = [ 'removeDoctype', 'removeXMLProcInst', 'removeComments', 'removeMetadata', 'removeEditorsNSData', 'cleanupAttrs', 'mergeStyles', 'inlineStyles', 'minifyStyles', 'cleanupIDs', 'removeUselessDefs', 'cleanupNumericValues', 'convertColors', 'removeUnknownsAndDefaults', 'removeNonInheritableGroupAttrs', 'removeUselessStrokeAndFill', 'removeViewBox', 'cleanupEnableBackground', 'removeHiddenElems', 'removeEmptyText', 'convertShapeToPath', 'convertEllipseToCircle', 'moveElemsAttrsToGroup', 'moveGroupAttrsToElems', 'collapseGroups', 'convertPathData', 'convertTransform', 'removeEmptyAttrs', 'removeEmptyContainers', 'mergePaths', 'removeUnusedNS', 'sortDefsChildren', 'removeTitle', 'removeDesc' ]; return plug.concat(arr); } // 添加less继承 function addStyleResource(rule) { rule.use('style-resource') .loader('style-resources-loader') .options({ patterns: [ resolve('src/assets/styles/common/common.less') ] }) } module.exports = { publicPath: "./", // 默认'/',部署应用包时的基本 URL indexPath: 'index.html', // 相对于打包路径index.html的路径 outputDir: 'dist', // 'dist', 生产环境构建文件的目录 assetsDir: 'static', // 相对于outputDir的静态资源(js、css、img、fonts)目录 lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本 parallel: false, //用于解决 node Syntax Error: Thread Loader (Worker 0) 报错问题 configureWebpack: { plugins: [ 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' }]), new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./') }), ] }, chainWebpack: (config) => { config.resolve.symlinks(true); // 修复热更新失效 config.plugin('html') .tap(args => { args[0].title = "智能综合分析系统"; return args; }) // 路径别名 config.resolve.alias .set("@", resolve("src")) .set("@node", resolve("node_modules")) .set("@com", resolve("src/components")) .set("@assets", resolve("src/assets")) .set("@api", resolve("src/api")) .set("@store", resolve("src/store")) .set("@modeConfig", resolve("public/static/config")) .set("@tools", resolve("src/tools")) .set("cesium", resolve("node_modules/cesium/Source")); // less 继承 const types = ['vue-modules', 'vue', 'normal-modules', 'normal']; types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type))); const metaLoaderRule = config.module.rule('meta-loader'); metaLoaderRule.test(/\.js$/) .use('@open-wc/webpack-import-meta-loader') .loader('@open-wc/webpack-import-meta-loader'); // svg 雪碧图 config.module // 排除其他svg-loader .rule('svg') .exclude.add(resolve('src/assets/icon/svg')) .end() .exclude.add(resolve('src/assets/icon/svg_fill')) .end(); // svg雪碧图 const svgRule = config.module.rule('icons'); svgRule.test(/\.svg$/) .include.add(resolve('src/assets/icon/svg')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'svg-[name]', // extract: true, // publicPath: "img/", // spriteFilename: "svg-sprite-[hash:8].svg", }); // config // .plugin("svgsprite") // .use(SVGSpriteLoaderPlugin, [{ // plainSprite: true // }]); // svgo 去除svg中无用元素 svgRule.use('svgo-loader').loader('svgo-loader').options({ plugins: extendDefaultPlugins([{ name: "removeAttrs", params: { attrs: 'fill', } }]) }); // svg雪碧图 不去除fill属性 // const svgRuleFill = config.module.rule('icons_fill'); // svgRuleFill.test(/\.svg$/) // .include.add(resolve('src/assets/icon/svg_fill')) // .end() // .use('svg-sprite-loader') // .loader('svg-sprite-loader') // .options({ // symbolId: 'fill-[name]', // // extract: true, // // publicPath: "img/", // // spriteFilename: "svg-sprite-[hash:8].svg", // }); // // config // // .plugin("svgsprite") // // .use(SVGSpriteLoaderPlugin, [{ // // plainSprite: true // // }]); // // svgo 去除svg中无用元素 // svgRuleFill.use('svgo-loader').loader('svgo-loader').options({ // plugins: extendDefaultPlugins([]) // }); }, devServer: { //代理配置 proxy: { '/cbk': { target: 'https://h5.caibeike.com.cn/', // 请求地址 changeOrigin: true, // 在vue-cli3中,默认changeOrigin的值是true,意味着服务器host设置成target,这与vue-cli2不一致,vue-cli2这个默认值是false // changeOrigin的值是true,target是host, request URL是http://baidu.com // 如果设置changeOrigin: false,host就是浏览器发送过来的host,也就是localhost:8082。 pathRewrite: { // 路径重写,eg:把api接口替换为'' '^/cbk': '' } }, '/weather': { target: 'http://t.weather.sojson.com/', // 请求地址 changeOrigin: true, // 在vue-cli3中,默认changeOrigin的值是true,意味着服务器host设置成target,这与vue-cli2不一致,vue-cli2这个默认值是false // changeOrigin的值是true,target是host, request URL是http://baidu.com // 如果设置changeOrigin: false,host就是浏览器发送过来的host,也就是localhost:8082。 pathRewrite: { // 路径重写,eg:把api接口替换为'' '^/weather': '' } }, '^/current': { target: 'http://10.155.32.14:9002', changeOrigin: true, //开启代理 rewrite: (path) => path.replace(/^\/current/, '') }, }, open: false, // 是否打开浏览器 } }