master

分支 (1)

管理

管理

master

my-module-vue2
/
vue.config.js

console.log("当前环境", process.env.NODE_ENV);

const { defineConfig } = require("@vue/cli-service");
const path = require("path");
function resolve(dir) {
  return path.join(__dirname, dir);
}
const PurgecssPlugin = require("purgecss-webpack-plugin");
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const glob = require("glob-all");
const isGzip = false; // 是否开启 Gzip压缩

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;

// 是否为生产环境,本地环境是否需要使用cdn
const isProduction = process.env.NODE_ENV === "production";

const CDN = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  // externals中的key是用于import，
  // value表示的在全局中访问到该对象，就是window.echarts
  externals: {
    vue: "Vue",
    vuex: "Vuex",
    echarts: "echarts",
    moment: "moment",
    "vue-router": "VueRouter",
    axios: "axios",
  },
  css: [
    // 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css',
    // 'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/display.css',
    // 'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
  ],
  js: [
    "https://cdn.staticfile.org/vue/2.6.11/vue.min.js",
    "https://cdn.staticfile.org/vuex/3.1.2/vuex.min.js",
    "https://cdn.staticfile.org/vue-router/3.1.5/vue-router.min.js",
    "https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.common.min.js",
    "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.3/moment.min.js",
    "https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.3/locale/zh-cn.js",
    "https://cdn.bootcss.com/axios/0.19.2/axios.min.js",
  ],
};
// 动态切换主题色
const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: "build-web-html", // 打包后路径以及文件名字
  lintOnSave: false, // 是否启用eslint代码规范
  configureWebpack: {
    //使用插件
    plugins: [
      // 移出未使用的css样式，减少css体积
      new PurgecssPlugin({
        paths: glob.sync([
          path.join(__dirname, "./src/index.html"),
          path.join(__dirname, "./**/*.vue"),
          path.join(__dirname, "./src/**/*.js"),
        ]),
        // css白名单
        safelist:[/^el-/,/data-v/g],
      }),
      // 使用包分析插件
      new BundleAnalyzerPlugin({
        analyzerMode: "static",
        openAnalyzer: false,
      }),
    ],
    // 用cdn方式引入，则构建时要忽略相关资源
    externals:(function (){
      if (isProduction){
        return CDN.externals
      }
    })()
  },
  // 静态资源的公共路径
  // publicPath: process.env.NODE_ENV === 'production'
  //   ? './'
  //   : '/',
  publicPath: "./",
  // 生产环境下是否取消 sourceMap文件（设置为false可以减少文件体积），注意：生产的map文件可以反编译回源码，但是功能不常用
  productionSourceMap: !isProduction,

  chainWebpack: (config) => {
    // 配置路径别名
    config.resolve.alias.set("@", resolve("src"));
    // 生产环境注入cdn
    config.plugin("html").tap((args) => {
      if (isProduction) args[0].cdn = CDN;
      return args;
    });
    // 优化首屏加载速度--移除 preload & prefetch 插件
    config.plugins.delete("preload");
    config.plugins.delete("prefetch");
    // 解决 isCustomElement 预警
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag.startsWith("svg-"),
        };
        return options;
      });
    // 配置识别 svg 规则
    const svgRule = config.module.rule("svg");
    svgRule.uses.clear();
    svgRule
      .test(/\.svg$/)
      .include.add(resolve("src/assets/icons"))
      .end()
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      .options({
        symbolId: "icon-[name]",
      });
    const fileRule = config.module.rule("file");
    fileRule.uses.clear();
    fileRule
      .test(/\.svg$/)
      .exclude.add(resolve("src/assets/icons"))
      .end()
      .use("file-loader")
      .loader("file-loader");

    // config.when(isProduction, (config) => {
    //   // 分割打包
    //   config.optimization.splitChunks({
    //     chunks: 'all',
    //     cacheGroups: {
    //       // 第三方组件
    //       libs: {
    //         name: 'chunk-libs', // 指定chunks名称
    //         test: /[\\/]node_modules[\\/]/, //符合组的要求就给构建venders
    //         priority: 10, //priority:优先级：数字越大优先级越高，因为默认值为0，所以自定义的一般是负数形式,决定cacheGroups中相同条件下每个组执行的优先顺序。
    //         chunks: 'initial' // 仅限于最初依赖的第三方
    //       },
    //       elementUI: {
    //         name: 'chunk-elementUI',
    //         priority: 20,
    //         test: /[\\/]node_modules[\\/]_?elment-ui(.*)/
    //       },
    //       //公共组件
    //       commons: {
    //         name: 'chunk-commons',
    //         test: resolve('src/components'),
    //         minChunks: 3,
    //         priority: 30,
    //         reuseExistingChunk: true, //这个的作用是当前的chunk如果包含了从main里面分离出来的模块，则重用这个模块，这样的问题是会影响chunk的名称。
    //         maxInitialRequests: 3, //最大初始化加载次数，一个入口文件可以并行加载的最大文件数量，默认3
    //         minSize: 0 //表示在分离前的最小模块大小，默认为0，最小为30000
    //       }
    //     }
    //   })
    //   // https:// webpack.js.org/configuration/optimization/#optimizationruntimechunk
    //   config.optimization.runtimeChunk('single')
    // })
    /**
     * 第二种分包
     */
    config.optimization.splitChunks({
      chunks: "all",
      maxInitialRequests: Infinity,
      minSize: 300000, // 依赖包超过300000bit将被单独打包
      automaticNameDelimiter: "-",
      cacheGroups: {
        // 缓存组，将所有加载模块放在缓存里面一起分割打包
        // vendors: {
        //   // 自定义打包模块
        //   test: /[\\/]node_modules[\\/]/,
        //   priority: -10, // 优先级，先打包到哪个组里面，值越大，优先级越高
        //   filename: "vendors.js",
        // },
        default: {
          // 默认打包模块
          priority: -20,
          reuseExistingChunk: true, // 模块嵌套引入时，判断是否复用已经被打包的模块
          filename: "common.js",
        },
      },
    });
    if (isProduction && isGzip) {
      const productionGzipExtensions =
        /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
      config.plugin("compressionPlugin").use(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240, // 只有大小大于该值的资源会被处理 10240
          minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
          deleteOriginalAssets: true, // 删除原文件
        })
      );
    };
    // 配置动态切换主题色
    config.plugin('webpack-theme-color-replacer')
    .use(ThemeColorReplacer)
    .tap(options => {
      const matchColors = [...forElementUI.getElementUISeries('#409EFF')]
      options[0] = {
        fileName: 'css/theme-colors-[contenthash:8].css', // 输出css文件名
        matchColors: matchColors, // 用于提取 css 文件的颜色数组。将提取出具有这些颜色中的任何一种的 CSS 规则。
        changeSelector: forElementUI.changeSelector, // 更改 css 选择器，以提高 css 优先级，以解决延迟加载问题
        // isJsUgly: process.env.NODE_ENV !== 'development' // 代码压缩
        isJsUgly:true
      }
        return options
      });


  },
  css: {
    // !! extract设置为true时，带有scoped的style标签，样式将不生效
    extract: true, // 解决开发模式，打包时未提取CSS的问题
    loaderOptions: {
      sass: {
        // prependData: `@import "~element-ui/packages/theme-chalk/src/common/var.scss";` // 全局引入 scss 变量
      }
      // less: {
      //   lessOptions: {
      //     modifyVars: {
      //       'primary-color': '#3d62ff',// 修改全局主颜色
      //     },
      //     javascriptEnabled: true,
      //   },
      // },
    },
  },
  runtimeCompiler: true, // 解决菜单栏 template 模版编译问题
  // 配置代理服务器
  devServer: {
    port: 9133, // 定义端口号
    // proxy: { // 接口转发
    //   '/api': {
    //     target: 'http://localhost:9140', // 转发地址，实际接口的地址
    //     ws: false, // 是否启用 代理 websockets
    //     changeOrigin: true, // 用于虚拟托管站点，开启可解决跨域问题
    //     logLevel: 'debug', // 查看接口实际转发的地址
    //     pathRewrite: {
    //       '^/api':''
    //     }, // 将请求地址中api替换为空字符串
    //   },
    // },
  },
});