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")
  );
}