code-server-2/scripts/webpack.client.config.js

108 lines
3.0 KiB
JavaScript
Raw Normal View History

const webpack = require("webpack");
const path = require("path");
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PreloadWebpackPlugin = require("preload-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
const { GenerateSW } = require("workbox-webpack-plugin");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const root = path.join(__dirname, "..");
const prod = process.env.NODE_ENV === "production" || process.env.CI === "true";
module.exports = (options = {}) => merge(
require("./webpack.general.config")(options), {
devtool: prod ? "none" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development",
entry: prod ? options.entry : [
"webpack-hot-middleware/client?reload=true&quiet=true",
options.entry,
],
module: {
rules: [{
test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common.
include: root,
use: [{
loader: MiniCssExtractPlugin.loader,
}, {
loader: "css-loader",
}, {
loader: "sass-loader",
}],
}, {
test: /\.(png|ttf|woff|eot|woff2)$/,
use: [{
loader: "file-loader",
options: {
name: "[path][name].[ext]",
},
}],
}, {
test: /\.svg$/,
loader: 'url-loader'
}],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin({
template: options.template
}),
new PreloadWebpackPlugin({
rel: "preload",
as: "script"
}),
new WebpackPwaManifest({
name: "Coder",
short_name: "Coder",
description: "Run VS Code on a remote server",
background_color: "#e5e5e5",
icons: [
{
src: path.join(root, "packages/web/assets/logo.png"),
sizes: [96, 128, 192, 256, 384]
}
]
})
].concat(prod ? [
new GenerateSW({
runtimeCaching: [
{
urlPattern: new RegExp(".*"),
handler: "StaleWhileRevalidate",
options: {
cacheName: "code-server",
expiration: {
maxAgeSeconds: 86400
},
cacheableResponse: {
statuses: [0, 200]
}
}
}
// Network first caching is also possible.
/*{
urlPattern: "",
handler: "NetworkFirst",
options: {
networkTimeoutSeconds: 4,
cacheName: "code-server",
expiration: {
maxAgeSeconds: 86400,
},
cacheableResponse: {
statuses: [0, 200],
},
},
}*/
]
})
] : [new webpack.HotModuleReplacementPlugin()]),
target: "web"
});