idan/sshwifty-udp-telnet-http
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Modify webpack.config.js to get better chunking

Browse Source
This commit is contained in:
NI
2020-05-18 23:05:13 +08:00
parent f0a289f836
commit 4cccd35783
1 changed files with 100 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
webpack.config.js
View File

@@ -54,7 +54,7 @@ const killSpawnProc = (proc, then) => {
}); });
}; };
const startAppSpawnProc = onExit => { const startAppSpawnProc = (onExit) => {
killSpawnProc(appSpawnProc, () => { killSpawnProc(appSpawnProc, () => {
let mEnv = {}; let mEnv = {};
@@ -73,20 +73,20 @@ const startAppSpawnProc = onExit => {
let proc = spawn("go", ["run", "sshwifty.go"], { let proc = spawn("go", ["run", "sshwifty.go"], {
env: mEnv, env: mEnv,
detached: true detached: true,
}), }),
waiter = new Promise(resolve => { waiter = new Promise((resolve) => {
let closed = false; let closed = false;
proc.stdout.on("data", msg => { proc.stdout.on("data", (msg) => {
process.stdout.write(msg.toString()); process.stdout.write(msg.toString());
}); });
proc.stderr.on("data", msg => { proc.stderr.on("data", (msg) => {
process.stderr.write(msg.toString()); process.stderr.write(msg.toString());
}); });
proc.on("exit", n => { proc.on("exit", (n) => {
process.stdout.write("Application process is exited.\n"); process.stdout.write("Application process is exited.\n");
if (closed) { if (closed) {
@@ -104,12 +104,12 @@ const startAppSpawnProc = onExit => {
appSpawnProc = { appSpawnProc = {
proc, proc,
waiter waiter,
}; };
}); });
}; };
const startBuildSpawnProc = onExit => { const startBuildSpawnProc = (onExit) => {
killSpawnProc(appBuildProc, () => { killSpawnProc(appBuildProc, () => {
let mEnv = {}; let mEnv = {};
@@ -123,20 +123,20 @@ const startBuildSpawnProc = onExit => {
let proc = spawn("go", ["generate", "./..."], { let proc = spawn("go", ["generate", "./..."], {
env: mEnv, env: mEnv,
detached: true detached: true,
}), }),
waiter = new Promise(resolve => { waiter = new Promise((resolve) => {
let closed = false; let closed = false;
proc.stdout.on("data", msg => { proc.stdout.on("data", (msg) => {
process.stdout.write(msg.toString()); process.stdout.write(msg.toString());
}); });
proc.stderr.on("data", msg => { proc.stderr.on("data", (msg) => {
process.stderr.write(msg.toString()); process.stderr.write(msg.toString());
}); });
proc.on("exit", n => { proc.on("exit", (n) => {
process.stdout.write("Code generation process is exited.\n"); process.stdout.write("Code generation process is exited.\n");
if (closed) { if (closed) {
@@ -154,7 +154,7 @@ const startBuildSpawnProc = onExit => {
appBuildProc = { appBuildProc = {
proc, proc,
waiter waiter,
}; };
}); });
}; };
@@ -180,31 +180,40 @@ process.on("SIGINT", killAllProc);
module.exports = { module.exports = {
entry: { entry: {
app: path.join(__dirname, "ui", "app.js") app: path.join(__dirname, "ui", "app.js"),
}, },
devtool: devtool:
process.env.NODE_ENV === "development" ? "inline-source-map" : "source-map", process.env.NODE_ENV === "development" ? "inline-source-map" : "source-map",
output: { output: {
publicPath: "/sshwifty/assets/", publicPath: "/sshwifty/assets/",
path: path.join(__dirname, ".tmp", "dist"), path: path.join(__dirname, ".tmp", "dist"),
filename: process.env.NODE_ENV === "development" ? "[id].js" : "[hash].js" filename: process.env.NODE_ENV === "development" ? "[id].js" : "[hash].js",
}, },
resolve: { resolve: {
alias: { alias: {
vue$: "vue/dist/vue.esm.js" vue$: "vue/dist/vue.esm.js",
} },
}, },
optimization: { optimization: {
nodeEnv: process.env.NODE_ENV,
concatenateModules: true,
runtimeChunk: true,
mergeDuplicateChunks: true,
flagIncludedChunks: true,
occurrenceOrder: true,
providedExports: true,
usedExports: true,
splitChunks: splitChunks:
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development"
? {} ? {}
: { : {
chunks: "all", chunks: "all",
minSize: 128000, minSize: 12800,
maxSize: 244000,
automaticNameDelimiter: ".", automaticNameDelimiter: ".",
automaticNameMaxLength: 16, automaticNameMaxLength: 8,
name: true maxAsyncRequests: 5,
maxInitialRequests: 6,
name: true,
}, },
minimize: process.env.NODE_ENV !== "development", minimize: process.env.NODE_ENV !== "development",
minimizer: minimizer:
@@ -212,45 +221,46 @@ module.exports = {
? [] ? []
: [ : [
new TerserPlugin({ new TerserPlugin({
test: /\.js$/, test: /\.js(\?.*)?$/i,
terserOptions: { terserOptions: {
ecma: undefined,
warnings: false, warnings: false,
parse: {}, parse: {},
compress: {}, compress: {},
mangle: true, mangle: true,
module: false, module: false,
passes: 2,
output: { output: {
beautify: false, beautify: false,
comments: false comments: false,
}, },
toplevel: false, toplevel: false,
nameCache: null, nameCache: null,
ie8: false, ie8: false,
keep_classnames: false, keep_classnames: false,
keep_fnames: false, keep_fnames: false,
safari10: false safari10: false,
} extractComments: /^\**!|@preserve|@license|@cc_on/i,
}) },
] }),
],
}, },
module: { module: {
rules: [ rules: [
{ {
test: /\.css$/, test: /\.css$/,
use: ["vue-style-loader", MiniCssExtractPlugin.loader, "css-loader"] use: ["vue-style-loader", MiniCssExtractPlugin.loader, "css-loader"],
}, },
{ {
test: /\.html/, test: /\.html/,
use: "html-loader" use: "html-loader",
}, },
{ {
test: /\.vue$/, test: /\.vue$/,
loader: "vue-loader" loader: "vue-loader",
}, },
{ {
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/, test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
use: "file-loader" use: "file-loader",
}, },
{ {
test: /\.(gif|png|jpe?g|svg)$/i, test: /\.(gif|png|jpe?g|svg)$/i,
@@ -258,54 +268,55 @@ module.exports = {
{ {
loader: "file-loader", loader: "file-loader",
options: { options: {
name: '[contenthash].[ext]', name: "[contenthash].[ext]",
esModule: false esModule: false,
} },
} },
] ],
}, },
{ {
test: /\.js$/, test: /\.js$/,
exclude: /(node_modules)/, exclude: /(node_modules)/,
use: "babel-loader" use: "babel-loader",
}
]
}, },
plugins: (function() { ],
},
plugins: (function () {
var plugins = [ var plugins = [
new webpack.SourceMapDevToolPlugin(),
new webpack.DefinePlugin( new webpack.DefinePlugin(
process.env.NODE_ENV === "production" process.env.NODE_ENV === "production"
? { ? {
"process.env": { "process.env": {
NODE_ENV: JSON.stringify(process.env.NODE_ENV) NODE_ENV: JSON.stringify(process.env.NODE_ENV),
} },
} }
: {} : {}
), ),
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
options: { options: {
handlebarsLoader: {} handlebarsLoader: {},
} },
}), }),
new CopyPlugin([ new CopyPlugin({
patterns: [
{ {
from: path.join(__dirname, "ui", "robots.txt"), from: path.join(__dirname, "ui", "robots.txt"),
to: path.join(__dirname, ".tmp", "dist") to: path.join(__dirname, ".tmp", "dist"),
}, },
{ {
from: path.join(__dirname, "README.md"), from: path.join(__dirname, "README.md"),
to: path.join(__dirname, ".tmp", "dist") to: path.join(__dirname, ".tmp", "dist"),
}, },
{ {
from: path.join(__dirname, "DEPENDENCIES.md"), from: path.join(__dirname, "DEPENDENCIES.md"),
to: path.join(__dirname, ".tmp", "dist") to: path.join(__dirname, ".tmp", "dist"),
}, },
{ {
from: path.join(__dirname, "LICENSE.md"), from: path.join(__dirname, "LICENSE.md"),
to: path.join(__dirname, ".tmp", "dist") to: path.join(__dirname, ".tmp", "dist"),
} },
]), ],
}),
new VueLoaderPlugin(), new VueLoaderPlugin(),
{ {
apply(compiler) { apply(compiler) {
@@ -327,7 +338,7 @@ module.exports = {
}); });
} }
); );
} },
}, },
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
logo: path.join(__dirname, "ui", "sshwifty.svg"), logo: path.join(__dirname, "ui", "sshwifty.svg"),
@@ -342,6 +353,7 @@ module.exports = {
background: "#333", background: "#333",
theme_color: "#333", theme_color: "#333",
appleStatusBarStyle: "black", appleStatusBarStyle: "black",
display: "standalone",
icons: { icons: {
android: { offset: 0, overlayGlow: false, overlayShadow: true }, android: { offset: 0, overlayGlow: false, overlayShadow: true },
appleIcon: { offset: 5, overlayGlow: false }, appleIcon: { offset: 5, overlayGlow: false },
@@ -350,9 +362,9 @@ module.exports = {
favicons: { overlayGlow: false }, favicons: { overlayGlow: false },
firefox: { offset: 5, overlayGlow: false }, firefox: { offset: 5, overlayGlow: false },
windows: { offset: 5, overlayGlow: false }, windows: { offset: 5, overlayGlow: false },
yandex: false yandex: false,
} },
} },
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
inject: true, inject: true,
@@ -360,8 +372,8 @@ module.exports = {
meta: [ meta: [
{ {
name: "description", name: "description",
content: "Connect to a SSH Server from your web browser" content: "Connect to a SSH Server from your web browser",
} },
], ],
mobile: true, mobile: true,
lang: "en-US", lang: "en-US",
@@ -369,12 +381,11 @@ module.exports = {
title: "Sshwifty Web SSH Client", title: "Sshwifty Web SSH Client",
minify: { minify: {
html5: true, html5: true,
collapseWhitespace: collapseWhitespace: process.env.NODE_ENV !== "development",
process.env.NODE_ENV === "development" ? false : true,
caseSensitive: true, caseSensitive: true,
removeComments: true, removeComments: true,
removeEmptyElements: false removeEmptyElements: false,
} },
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: "error.html", filename: "error.html",
@@ -383,25 +394,26 @@ module.exports = {
meta: [ meta: [
{ {
name: "description", name: "description",
content: "Connect to a SSH Server from your web browser" content: "Connect to a SSH Server from your web browser",
} },
], ],
mobile: true, mobile: true,
lang: "en-US", lang: "en-US",
minify: { minify: {
html5: true, html5: true,
collapseWhitespace: collapseWhitespace: process.env.NODE_ENV !== "development",
process.env.NODE_ENV === "development" ? false : true,
caseSensitive: true, caseSensitive: true,
removeComments: true, removeComments: true,
removeEmptyElements: false removeEmptyElements: false,
} },
}), }),
new ImageminPlugin({ new ImageminPlugin({
disable: process.env.NODE_ENV === "development", disable: process.env.NODE_ENV === "development",
pngquant: { pngquant: {
quality: "3-10" speed: 3,
} strip: true,
quality: "0-5",
},
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: filename:
@@ -409,24 +421,17 @@ module.exports = {
chunkFilename: chunkFilename:
process.env.NODE_ENV === "development" process.env.NODE_ENV === "development"
? "[id].css" ? "[id].css"
: "[chunkhash].css" : "[chunkhash].css",
}), }),
new OptimizeCssAssetsPlugin({ new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/, assetNameRegExp: /\.css$/,
cssProcessor: require("cssnano"), cssProcessor: require("cssnano"),
cssProcessorPluginOptions: { cssProcessorPluginOptions: {
preset: ["default", { discardComments: { removeAll: true } }] preset: ["default", { discardComments: { removeAll: true } }],
}, },
canPrint: true canPrint: true,
}), }),
new webpack.BannerPlugin({ new ManifestPlugin(),
banner:
"This file is a part of Sshwifty Project. Automatically " +
"generated at " +
new Date().toTimeString() +
", DO NOT MODIFIY"
}),
new ManifestPlugin()
]; ];
if (process.env.NODE_ENV !== "development") { if (process.env.NODE_ENV !== "development") {
@@ -434,5 +439,5 @@ module.exports = {
} }
return plugins; return plugins;
})() })(),
}; };