/* * Copyright (c) 2024. bmy * Email:2271608011@qq.com * Github:https://github.com/helpcode */ const isProduction = process.env.NODE_ENV === 'production'; const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer'); const CompressionPlugin = require('compression-webpack-plugin') const path = require('path'); const {ProgressPlugin} = require("webpack") const {readFileSync} = require("fs") const chalk = require("chalk"); const log = require('single-line-log').stdout; let progress = 0 let js = [ './lib/vue.min.js', './lib/vuex.min.js', './lib/vue-router.min.js', './lib/axios.min.js', './lib/index.min.js', './lib/echarts.min.js', './lib/minified.min.js', './lib/moment.min.js', ] let exclude = { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', 'axios': 'axios', 'element-ui': 'ELEMENT', 'echarts': 'echarts', 'core-js': 'core-js', "moment": "moment" } module.exports = { publicPath: './', filenameHashing: true, productionSourceMap: false, parallel: require('os').cpus().length > 1, lintOnSave: false, pluginOptions: { route: { // 默认:page。存放Vue路由页面的文件夹名称 TemplateFolderName: 'page', // 默认:./src/application。从src/开始到TemplateFolderName文件夹父一级文件夹相对路径 RootFolderName: './src/application', // 默认 src/core/config/route.config.ts。生成的配置文件保存路径,相对插件的位置来。 SaveConfigPath: '../../../src/core/config/route.config.ts' } }, devServer: { open: ['/#/home'], hot: true, port: 8080, compress: true, progress: false, overlay: { warnings: false, errors: true }, before: (app, server) => { app.use('/__progress', (_res, res) => res.json({progress})); app.get('/', (_req, res, next) => { if (progress < 1) { res.set('Content-Type', 'text/html'); const html = readFileSync(path.resolve(__dirname, './bin/start-page.html'), {encoding: 'utf-8'}); res.send(html); } else { next(); } }); } // proxy: { // '/api': { // target: 'http://8.140.20.241:8080', // changeOrigin: true, // ws: true, // pathRewrite: { // '^/api': '' // } // } // } }, configureWebpack: config => { // 设置程序核心入口 config.entry.app = ['babel-polyfill', './src/core/run/init.run.ts']; if (process.env.NODE_ENV === 'production') { // 需要被打包排除的插件列表 config.externals = exclude /** * 部署阶段 代码压缩 */ config.plugins.push( // 生产环境自动删除console new UglifyJsPlugin({ uglifyOptions: { warnings: false, compress: { drop_debugger: true, drop_console: true } }, sourceMap: false, parallel: true }) ); // 开启 Gzip压缩 return { plugins: [ // new BundleAnalyzerPlugin(), // new CompressionPlugin({ // test: /\.js$|\.html$|\.css/, //匹配文件名 // threshold: 10240, //对超过10k的数据进行压缩 // deleteOriginalAssets: false //是否删除原文件 // }) ] }; } else { return { plugins: [ new ProgressPlugin({ handler: (percentage, message, ...args) => { progress = percentage log(`\n${chalk.yellow("构建进度:")} ${chalk.green.bold(~~(percentage * 100) + "%")} ${chalk.yellow("模块进度:")} ${args[0] ? chalk.white(args[0]) : "无"}`); }, }) ] } } }, chainWebpack: (config) => { if (isProduction) { // 生产环境下注入一个变量cdn 变量可以在html中通过htmlWebpackPlugin.options进行获取 config.plugin('html') .tap(args => { args[0].cdn = js; return args; }) // 去除混淆加密 config.optimization.minimize(false) // 移除 prefetch,preload 插件 减少不必要的请求 config.plugins.delete('prefetch') config.plugins.delete('preload') } /** * 配置路径别名,项目中引用资源的时候路径可以更简短 * 但是ts文件在用的时候,编译器会报错,需要添加 @ts-ignore * 忽略开发工具的错误。 */ config.resolve.alias .set('@', resolve('src')) .set('@core', resolve('src/core')) .set('@router', resolve('src/core/router')) .set('@store', resolve('src/core/store')) .set('@type', resolve('src/core/types')) .set('@config', resolve('src/core/config')) .set('@utils', resolve('src/core/utils')) .set('@run', resolve('src/core/run')) .set('@ann', resolve('src/core/annotation')) .set('@model', resolve('src/core/model')) .set('@dao', resolve('src/core/dao')) .set('@entity', resolve('src/core/entity')) .set('@service', resolve('src/core/service')) .set('@impl', resolve('src/core/service/impl')) .set('@application', resolve('src/application')) .set('@img', resolve('src/application/assets/img')) .set('@less', resolve('src/application/assets/less')) .set('@pageLess', resolve('src/application/assets/less/page')) .set('@componentsLess', resolve('src/application/assets/less/components')) .set('@components', resolve('src/application/components')) .set('@page', resolve('src/application/page')) .set('@logic', resolve('src/application/logic')) .set('@container', resolve('src/application/container')) } }; function resolve(dir) { return path.join(__dirname, dir); }