webpack 打包优化

在vue.config.js中配置

下载 uglifyjs-webpack-plugin 包

javascript 复制代码
const { defineConfig } = require("@vue/cli-service");
var path = require("path");

module.exports = defineConfig({
  transpileDependencies: true,
  filenameHashing: false, // 去除Vue打包后.css和.js文件名称中8位hash值,跟缓存有关
  lintOnSave: false, // 设置是否在开发环境下每次保存代码时都启用eslint验证  是否在保存的时候使用 `eslint-loader` 进行检查。 有效的值:`ture` | `false` | `"error"`  当设置为 `"error"` 时,检查出的错误会触发编译失败。
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件 ;false 以加速生产环境构建
  publicPath: process.env.NODE_ENV === 'production' ? '' : '/', // 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  outputDir: "dist", // 运行时生成的生产环境构建文件的目录(默认''dist'',构建之前会被清除)
  assetsDir: "static", //放置生成的静态资源(js、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
  indexPath: "index.html", //指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
  // 插件
  // plugins: [],
  pages: {
    //pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
    index: {
      //除了 entry 之外都是可选的
      entry: "src/main.js", // page 的入口,每个"page"应该有一个对应的 JavaScript 入口文件
      template: "public/index.html", // 模板来源
      filename: "index.html", // 在 dist/index.html 的输出
      title: "项目名称", // 当使用 title 选项时,在 template 中使用:<title><%= htmlWebpackPlugin.options.title %></title>
      chunks: ["chunk-vendors", "chunk-common", "index"], // 在这个页面中包含的块,默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
    },
  },
  css: {
        extract: true, // 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false, // 开启 CSS source maps
        loaderOptions: {}
        // modules: false// 启用 CSS modules for all css / pre-processor files.
   
  },
  chainWebpack: (config) => {
    config.resolve.alias.set("@", path.resolve(__dirname, "src"));
  },
  configureWebpack: (config) => {
    //  引入uglifyjs-webpack-plugin
    const UglifyPlugin = require('uglifyjs-webpack-plugin');
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        minimizer: [new UglifyPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              drop_console: true,   //生产环境自动删除console
              drop_debugger: false, //生产环境自动删除debugger
              pure_funcs: ['console.log']
            }
          }
        })]
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置
      config.mode = 'development'
    }
  },
  devServer: {
    // 环境配置
    host: "localhost",
    port: 8080,
    open: true, //配置自动启动浏览器
    proxy: { // 配置多个代理
            '/api': {
                target: 'http://localhost:8080',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
          }
     }
  },
});


// 启动仪式
if (process.env.NODE_ENV !== "production") {
  console.warn(
    [
      "_ooOoo_"
    ].join("\n")
  );
}
相关推荐
用户9044381632460几秒前
《零代码基础也能 AI 创作?GPT+DALL・E 实战教程,10 分钟上手》
前端·github
WillaWang1 分钟前
aria | "Accessible Rich Internet Applications"
前端
reoreo3 分钟前
如何使用 i18next 实现多种语言的国际化(从新建 vite ts 项目开始)
前端·javascript
云动雨颤4 分钟前
Typecho 博客统计脚本怎么装?同步 / 异步 + Head/Body 选择指南
前端·html
南山安5 分钟前
从零开始玩转 AIGC:用 Node.js 调用 OpenAI 接口实现图像生成与销售数据分析
javascript·node.js
用户4099322502126 分钟前
快速入门Vue3的v-指令:数据和DOM的“翻译官”到底有多少本事?
前端·ai编程·trae
Asort6 分钟前
JavaScript设计模式(二十三)——访问者模式:优雅地扩展对象结构
前端·javascript·设计模式
星辰h15 分钟前
基于JWT的RESTful登录系统实现
前端·spring boot·后端·mysql·restful·jwt
要加油哦~17 分钟前
前端笔试题 | 整理&总结 ing | 跨域 + fetch + credentials(携带cookie)
前端
旺财是只喵20 分钟前
vue项目里使用3D模型
前端·vue.js