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";',
},
},
},
};