memories/webpack.config.ts

140 lines
3.9 KiB
TypeScript

import webpack from 'webpack';
import path from 'path';
import WorkboxPlugin from 'workbox-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin';
import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
import { VueLoaderPlugin } from 'vue-loader';
const appName = process.env.npm_package_name!;
const appVersion = process.env.npm_package_version!;
const buildMode = process.env.NODE_ENV;
const isDev = buildMode === 'development';
console.info('Building', appName, appVersion, '\n');
module.exports = {
target: 'web',
mode: buildMode,
devtool: 'source-map',
cache: isDev,
entry: {
main: path.resolve(path.join(__dirname, 'src', 'main')),
admin: path.resolve(path.join(__dirname, 'src', 'admin')),
'hooks-clear-cache': path.resolve(path.join(__dirname, 'src', 'hooks', 'clear-cache')),
},
output: {
path: path.resolve(__dirname, 'js'),
publicPath: path.join('/apps/', appName, '/js/'),
// Output file names
filename: `${appName}-[name].js?v=[contenthash]`,
chunkFilename: `${appName}-[name].js?v=[contenthash]`,
// Clean output before each build
clean: true,
// Make sure sourcemaps have a proper path and do not
// leak local paths https://github.com/webpack/webpack/issues/3603
devtoolNamespace: appName,
devtoolModuleFilenameTemplate(info: any) {
const rootDir = process.cwd();
const rel = path.relative(rootDir, info.absoluteResourcePath);
return `webpack:///${appName}/${rel}`;
},
},
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
},
optimization: {
chunkIds: 'named',
splitChunks: {
automaticNameDelimiter: '-',
},
minimize: !isDev,
minimizer: [
new TerserPlugin({
exclude: [/filerobot-image-editor/],
terserOptions: {
output: {
comments: false,
},
},
extractComments: true,
}),
],
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf)$/,
type: 'asset/inline',
},
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.tsx?$/,
use: [
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
},
],
exclude: /node_modules/,
},
],
},
plugins: [
new VueLoaderPlugin(),
// Make sure we auto-inject node polyfills on demand
// https://webpack.js.org/blog/2020-10-10-webpack-5-release/#automatic-nodejs-polyfills-removed
new NodePolyfillPlugin({
includeAliases: ['stream', 'process'], // webdav
}),
// Bundle service worker
new WorkboxPlugin.InjectManifest({
swSrc: path.resolve(path.join('src', 'service-worker.ts')),
swDest: 'memories-service-worker.js',
maximumFileSizeToCacheInBytes: (isDev ? 10 : 4) * 1024 * 1024,
}),
// Make appName & appVersion available as a constant
new webpack.DefinePlugin({ appName: JSON.stringify(appName) }),
new webpack.DefinePlugin({ appVersion: JSON.stringify(appVersion) }),
// Bundle analyzer (npm i --no-save webpack-bundle-analyzer)
// new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()
],
resolve: {
extensions: ['.ts', '.js', '.vue'],
symlinks: false,
alias: {
// Ensure npm does not duplicate vue dependency, and that npm link works for vue 3
// See https://github.com/vuejs/core/issues/1503
// See https://github.com/nextcloud/nextcloud-vue/issues/3281
vue$: path.resolve(__dirname, 'node_modules', 'vue'),
// We can turn on preferRelative instead but this seems safer to be explicit
services: path.resolve(__dirname, 'src', 'services'),
utils$: path.resolve(__dirname, 'src', 'utils'),
},
},
};