// 去除 console
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
// const path = require('path'); 别名配置
// 图形化打包详情
const BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports = {publicPath: process.env.NODE_ENV === 'production'? '/hgs': './',// 部署应用包时的基本 URL, 用法和 webpack 本身的 output.publicPath 一致。// 这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')// 这样所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径。// 打包输出的的文件夹(默认就是 dist)outputDir: 'dist',// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录assetsDir: 'static',// 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径indexPath: 'index.html',// 生产环境是否生成 sourceMap 文件productionSourceMap: false,// 每次保存时 lint (校验) 代码 (boolean | 'warning' | 'default' | 'error')lintOnSave: false,// 生产构建时禁用// lintOnSave: process.env.NODE_ENV !== 'production',// webpack-dev-server 相关配置devServer: {/* 自动打开浏览器 */open: false,// host: "",port: 9527,/* 跨域处理:使用代理 */proxy: {// '/api':{ [process.env.VUE_APP_BASE_API]: {// 目标 ip target: 'http://192.168.1.185:9300',// 允许跨域 changeOrigin: true,pathRewrite: {// "^/api":"", ['^' + process.env.VUE_APP_BASE_API]: ''}}}}// webpack配置// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.mdchainWebpack: config => {// 删除懒加载模块的 prefetch,降低带宽压力config.plugins.delete('prefetch'),// 压缩图片const imagesRule = config.module.rule('images')imagesRule.uses.clear()imagesRule.use('file-loader').loader('url-loader').options({// 最大 10 MBlimit: 10240,fallback: {loader: 'file-loader',options: {// 打包后的图片路径outputPath: 'static/images'}}})// 压缩响应的app.json返回的代码压缩config.optimization.minimize(true)},// configureWebpack: (config) => { // config.resolve.alias.set("@": resolve('./src'))configureWebpack: {resolve: {//文件优先解析后缀名顺序extensions: [".js", ".vue", ".json"], // 别名配置alias: {'@': resolve('src')// "@": path.resolve(__dirname, "./src"),}, // 自动解析确定的扩展。默认值为['.wasm', '.mjs', '.js', '.json'] // 引入模块时可不带扩展: 如import File from '../path/to/file';extensions: ['.js','.vue','.json'],},// 防止将(在 public/index.html 通过 cdn 引入的)某些 import 的包(package)// 打包到 bundle 中而是在运行时(runtime)再去从外部获取这些扩展依赖// 引入的时候还是 import AMap from 'AMap'externals: {'AMap': 'AMap','AMapUI': 'AMapUI'}// 取消console打印// vue3 config.optimization.minimizer[0].options.terserOptions.compress.drop_console = trueif (process.env.NODE_ENV === 'production') {// webpack4.xoptimization: {minimizer: [new UglifyJsPlugin({uglifyOptions: {// 删除注释output:{comments:false},// 删除console debugger 删除警告compress: {warnings: false,drop_console: true,//consoledrop_debugger: false,pure_funcs: ['console.log']//移除console}}})]}}},// csscss: {// 是否将组件中的 CSS 提取至一个独立的 CSS 文件中(默认生产环境下是 true,开发环境下是 false)extract: true,sourceMap: false,loaderOptions: {// 定义全局 scss 无需引入即可使用sass: {// 注意:在 sass-loader v8 中,这个选项名是 "prependData"// additionalData: `@import "~@/assets/style/public.scss"`data: `@import '~@/assets/style/public.scss'`}}},}
官方文档:https://cli.vuejs.org/zh/config/#vue-config-js
参考文档:https://webpack.docschina.org/configuration/