webpack 打包优化
在vue.config.js中配置
下载 uglifyjs-webpack-plugin 包
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分离插件 ExtractTextPluginsourceMap: false, // 开启 CSS source mapsloaderOptions: {}// modules: false// 启用 CSS modules for all css / pre-processor files.},chainWebpack: (config) => {config.resolve.alias.set("@", path.resolve(__dirname, "src"));},configureWebpack: (config) => {// 引入uglifyjs-webpack-pluginconst 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, //生产环境自动删除consoledrop_debugger: false, //生产环境自动删除debuggerpure_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"));
}