1.项目当中执行，安装webpackbar

cnpm i webpackbar --save-dev

2.vuecli3.x中配置vue.config.js，引入webpackbar

const WebpackBar = require("webpackbar");

3.configureWebpack下配置plugins，

new WebpackBar({

name: `董xx的项目`,

color: "#f40",

}),

4.在项目执行npm run build打包项目 或者 修改项目代码热重载就会出现编译的进度条提示，如下图所示，能给开发人员带来良好的开发体验。

5.vue.config.js配置如下:

"use strict";

const path = require("path");

const { title, abbreviation, devPort } = require("./src/config/settings");

const pkg = require("./package.json");

const Webpack = require("webpack");

const WebpackBar = require("webpackbar");

const FileManagerPlugin = require("filemanager-webpack-plugin");

const date = require("dayjs")().format("YYYY_M_D"); //"2020_6_11"

const time = require("dayjs")().format("YYYY-M-D HH:mm:ss"); //"2020-6-11 15:00:24"

const CompressionWebpackPlugin = require("compression-webpack-plugin");

const productionGzipExtensions = ["html", "js", "css", "svg"];

function resolve(dir) {

return path.join(__dirname, dir);

}

function mockServer() {

if (process.env.NODE_ENV === "development") {

const mockServer = require("./mock/mock-server.js");

return mockServer;

} else {

return "";

}

}

const name = title || "vue-admin-beautiful";

module.exports = {

publicPath: "",

assetsDir: "static",

outputDir: "dist",

lintOnSave: true,

transpileDependencies: ["vue-echarts", "resize-detector"],

devServer: {

hot: true,

port: devPort,

open: true,

noInfo: false,

overlay: {

warnings: true,

errors: true,

},

after: mockServer(),

},

configureWebpack(config) {

return {

name: name,

resolve: {

alias: {

"@": resolve("src"),

"^": resolve("src/components"),

},

},

plugins: [

new Webpack.ProvidePlugin({

$: "jquery",

jQuery: "jquery",

"windows.jQuery": "jquery",

echarts: "echarts",

"window.echarts": "echarts",

maptalks: "maptalks",

"window.maptalks": "maptalks",

}),

new Webpack.DefinePlugin({

"process.env.VUE_APP_UPDATE_TIME": "'" + time + "'",

}),

new WebpackBar({

name: `董xx的项目`,

color: "#f40",

}),

],

};

},

chainWebpack(config) {

config.plugins.delete("preload");

config.plugins.delete("prefetch");

config.resolve.symlinks(true);

config.module

.rule("svg")

.exclude.add(resolve("src/remixIcon"))

.add(resolve("src/colorfulIcon"))

.end();

config.module

.rule("remixIcon")

.test(/\.svg$/)

.include.add(resolve("src/remixIcon"))

.end()

.use("svg-sprite-loader")

.loader("svg-sprite-loader")

.options({ symbolId: "remix-icon-[name]" })

.end();

config.module

.rule("colorfulIcon")

.test(/\.svg$/)

.include.add(resolve("src/colorfulIcon"))

.end()

.use("svg-sprite-loader")

.loader("svg-sprite-loader")

.options({ symbolId: "colorful-icon-[name]" })

.end();

config.module

.rule("vue")

.use("vue-loader")

.loader("vue-loader")

.tap((options) => {

options.compilerOptions.preserveWhitespace = true;

return options;

})

.end();

config.when(process.env.NODE_ENV === "development", (config) => {

config.devtool("cheap-module-eval-source-map");

});

config.when(process.env.NODE_ENV !== "development", (config) => {

config.performance.set("hints", false);

config.devtool("none");

config

.plugin("ScriptExtHtmlWebpackPlugin")

.after("html")

.use("script-ext-html-Webpack-plugin", [{ inline: /runtime\..*\.js$/ }])

.end();

config.optimization.splitChunks({

chunks: "all",

cacheGroups: {

libs: {

name: "chunk-libs",

test: /[\\/]node_modules[\\/]/,

priority: 10,

chunks: "initial",

},

elementUI: {

name: "chunk-elementUI",

priority: 20,

test: /[\\/]node_modules[\\/]_?element-ui(.*)/,

},

commons: {

name: "chunk-commons",

test: resolve("src/components"),

minChunks: 3,

priority: 5,

reuseExistingChunk: true,

},

},

});

config.optimization.runtimeChunk("single");

config

.plugin("banner")

.use(Webpack.BannerPlugin, [

` \u57fa\u4e8e\u0076\u0075\u0065\u002d\u0061\u0064\u006d\u0069\u006e\u002d\u0062\u0065\u0061\u0075\u0074\u0069\u0066\u0075\u006c\u6784\u5efa \n \u0063\u006f\u0070\u0079\u0072\u0069\u0067\u0068\u0074\u003a\u0020\u0063\u0068\u0075\u007a\u0068\u0069\u0078\u0069\u006e\u0020\u0031\u0032\u0030\u0034\u0035\u0030\u0035\u0030\u0035\u0036\u0040\u0071\u0071\u002e\u0063\u006f\u006d \n \u0074\u0069\u006d\u0065\u003a ${time}`,

])

.end();

});

config

.plugin("compression")

.use(CompressionWebpackPlugin, [

{

filename: "[path].gz[query]",

algorithm: "gzip",

test: new RegExp("\\.(" + productionGzipExtensions.join("|") + ")$"),

threshold: 8192,

minRatio: 0.8,

},

])

.end();

config.when(process.env.NODE_ENV === "production", (config) => {

config

.plugin("fileManager")

.use(FileManagerPlugin, [

{

onEnd: {

delete: ["./dist/video", "./dist/data"],

archive: [

{

source: "./dist",

destination: `./dist/${abbreviation}_dist_${date}.7z`,

},

],

},

},

])

.end();

});

},

runtimeCompiler: true,

productionSourceMap: false,

css: {

requireModuleExtension: true,

sourceMap: true,

loaderOptions: {

scss: {

prependData: '@import "~@/styles/variables.scss";',

},

},

},

};