Webpack cl4 配置

2023-12-14 21:53:20

基本配置:

module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false,
  outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
  publicPath: './', // 静态资源路径(默认/,打包后会白屏)
  assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
)}

一.打正式环境包时设置productionSourceMap为false:

  • productionSourceMap: true

    • 当设置为 true 时,在生产模式下会生成用于调试的源映射文件。这样,如果在生产环境出现错误,浏览器的开发者工具将能够还原回源代码,方便开发者进行调试。
    • 生成的源映射文件可能会增加构建的体积,但对于排查线上问题非常有帮助。
  • productionSourceMap: false

    • 当设置为 false 时,在生产模式下不会生成源映射文件。这样能够减小构建产物的体积,提高生产环境的性能。但在出现问题时,调试时将不再能够直接追踪到源代码。

二.autoprefixer 样式自动添加浏览器前缀:

? ? ? ? npm install?autoprefixer

const autoprefixer = require('autoprefixer');
// 添加样式浏览器前缀
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [autoprefixer()]
        }
      }
    }
  },

?三.打正式包去掉注释/黄色警告/console.log

? ? ? ?安装?uglifyjs-webpack-plugin 插件:

? ? ? ? npm install?uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production'; //判断打包生产环境
configureWebpack: config => {
    // const plugins = [];
    if (isProduction) {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false, //去除黄色警告
            compress: {
              drop_console: true,
              drop_debugger: false,// 防止利用debugger调试
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  }

?四.配置路径别名

 // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
  },

?四.配置多个代理

? ? ? ? 详细介绍:

????????????????项目环境配置 本地/测试/预发/生产_预发布环境部署-CSDN博客

????????? ? ? ? vue项目配置多个代理-CSDN博客

// 代理
  devServer: {
    proxy: {
      "/iot": {
        target: process.env.VUE_APP_API_PATH_ONE,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/V1": {
        target: process.env.VUE_APP_API_PATH_TWO,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/runbayunapi": {
        target: process.env.VUE_APP_API_PATH,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
    },
  },

完整代码:

const { defineConfig } = require('@vue/cli-service')
const autoprefixer = require('autoprefixer');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const isProduction = process.env.NODE_ENV === 'production';
const path = require('path');//引入path模块
function resolve(dir) {
  return path.join(__dirname, dir)//path.join(__dirname)设置绝对路径
}
module.exports = defineConfig({
  transpileDependencies: false,
  lintOnSave: false,
  outputDir: process.env.VUE_APP_DIST, // 打包后文件的目录
  publicPath: './', // 静态资源路径(默认/,打包后会白屏)
  assetsDir: 'static', //outputDir的静态资源(js、css、img、fonts)目录
  // 打包正式环境去除.map文件
  productionSourceMap: false,
  // 添加样式浏览器前缀
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [autoprefixer()]
        }
      }
    }
  },
  configureWebpack: config => {
    // const plugins = [];
    if (isProduction) {
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              comments: false, // 去掉注释
            },
            warnings: false, //去除黄色警告
            compress: {
              drop_console: true,
              drop_debugger: false,// 防止利用debugger调试
              pure_funcs: ['console.log']//移除console
            }
          }
        })
      )
    }
  },
  // 配置路径别名
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('./src'))
      .set('components', resolve('./src/components'))
      .set('assets', resolve('./src/assets'))
  },
  // 代理
  devServer: {
    proxy: {
      "/iot": {
        target: process.env.VUE_APP_API_PATH_ONE,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/V1": {
        target: process.env.VUE_APP_API_PATH_TWO,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
      "/runbayunapi": {
        target: process.env.VUE_APP_API_PATH,
        changeOrigin: true,
        pathRewrite: {
          '^/': '',
        }
      },
    },
  },
})

文章来源:https://blog.csdn.net/m0_69838795/article/details/134933344
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。