mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-27 12:55:55 +00:00
Maintenance: This commit updates to webpack v5 and esbuild. I'm still testing it, but I think this'll work.
This commit is contained in:
SirStendec
parent
cef58241d4
commit
10ca28098b
20 changed files with 3086 additions and 3877 deletions
|
|
@ -13,8 +13,8 @@ module.exports = {
|
|||
'react'
|
||||
],
|
||||
'parserOptions': {
|
||||
'parser': '@babel/eslint-parser',
|
||||
'ecmaVersion': 8,
|
||||
//'parser': '@babel/eslint-parser',
|
||||
'ecmaVersion': 'latest',
|
||||
'sourceType': 'module',
|
||||
'ecmaFeatures': {
|
||||
'jsx': true
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
"es6",
|
||||
"es2017"
|
||||
],
|
||||
"target": "es2017",
|
||||
"target": "esnext",
|
||||
"module": "es6",
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
|
|
|
|||
63
package.json
63
package.json
|
|
@ -6,55 +6,46 @@
|
|||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
"scripts": {
|
||||
"start": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.js",
|
||||
"start": "pnpm dev",
|
||||
"eslint": "eslint \"src/**/*.{js,jsx,vue}\"",
|
||||
"clean": "rimraf dist",
|
||||
"dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.js",
|
||||
"dev:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --config webpack.web.dev.prod.js",
|
||||
"dev": "cross-env NODE_ENV=development webpack serve",
|
||||
"dev:prod": "cross-env NODE_ENV=production webpack serve",
|
||||
"build": "pnpm build:prod",
|
||||
"build:stats": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.web.prod.js --json > stats.json",
|
||||
"build:prod": "cross-env NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production webpack --config webpack.web.prod.js",
|
||||
"build:dev": "pnpm clean && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config webpack.web.dev.js",
|
||||
"build:stats": "cross-env NODE_ENV=production webpack build --json > stats.json",
|
||||
"build:prod": "cross-env NODE_ENV=production webpack build",
|
||||
"build:dev": "cross-env NODE_ENV=development webpack build",
|
||||
"font": "pnpm font:edit",
|
||||
"font:edit": "fontello-cli --cli-config fontello.client.json edit",
|
||||
"font:save": "fontello-cli --cli-config fontello.client.json save && pnpm font:update",
|
||||
"font:update": "node bin/update_fonts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.16.0",
|
||||
"@babel/eslint-parser": "^7.16.0",
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.0",
|
||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.0",
|
||||
"@babel/plugin-proposal-object-rest-spread": "^7.16.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.16.0",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/plugin-transform-react-jsx": "^7.16.0",
|
||||
"@ffz/fontello-cli": "^1.0.4",
|
||||
"@webpack-cli/serve": "^1.6.0",
|
||||
"babel-loader": "^8.2.3",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^5.1.2",
|
||||
"browserslist": "^4.21.10",
|
||||
"copy-webpack-plugin": "^11.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^3.6.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-react": "^7.26.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"extract-loader": "^2.0.1",
|
||||
"file-loader": "^4.3.0",
|
||||
"css-loader": "^6.8.1",
|
||||
"esbuild-loader": "^4.0.2",
|
||||
"eslint": "^8.48.0",
|
||||
"eslint-plugin-import": "^2.28.1",
|
||||
"eslint-plugin-react": "^7.33.2",
|
||||
"eslint-plugin-vue": "^9.17.0",
|
||||
"extract-loader": "^5.1.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"json-loader": "^0.5.7",
|
||||
"raw-loader": "^3.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.43.4",
|
||||
"sass-loader": "^7.3.1",
|
||||
"semver": "^7.3.5",
|
||||
"terser-webpack-plugin": "4",
|
||||
"vue-loader": "^15.9.8",
|
||||
"minify-graphql-loader": "^1.0.2",
|
||||
"raw-loader": "^4.0.2",
|
||||
"rimraf": "^5.0.1",
|
||||
"sass": "^1.66.1",
|
||||
"sass-loader": "^13.3.2",
|
||||
"semver": "^7.5.4",
|
||||
"vue-loader": "^15.10.2",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack-cli": "^4.9.1",
|
||||
"webpack-dev-server": "^4.4.0",
|
||||
"webpack-manifest-plugin": "^4.0.2",
|
||||
"webpack-merge": "^4.2.2"
|
||||
"webpack": "^5.88.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^4.15.1",
|
||||
"webpack-manifest-plugin": "^5.0.0"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
6069
pnpm-lock.yaml
generated
6069
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
|
@ -208,16 +208,17 @@ class FFZBridge extends Module {
|
|||
|
||||
FFZBridge.Logger = Logger;
|
||||
|
||||
const VER = FFZBridge.version_info = {
|
||||
const VER = FrankerFaceZ.version_info = Object.freeze({
|
||||
major: __version_major__,
|
||||
minor: __version_minor__,
|
||||
revision: __version_patch__,
|
||||
extra: __version_prerelease__?.length && __version_prerelease__[0],
|
||||
commit: __git_commit__,
|
||||
build: __webpack_hash__,
|
||||
build: __version_build__,
|
||||
hash: __webpack_hash__,
|
||||
toString: () =>
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
|
||||
}
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
|
||||
});
|
||||
|
||||
window.FFZBridge = FFZBridge;
|
||||
window.ffz_bridge = new FFZBridge();
|
||||
|
|
@ -125,16 +125,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
|
|||
|
||||
FrankerFaceZ.Logger = Logger;
|
||||
|
||||
const VER = FrankerFaceZ.version_info = {
|
||||
const VER = FrankerFaceZ.version_info = Object.freeze({
|
||||
major: __version_major__,
|
||||
minor: __version_minor__,
|
||||
revision: __version_patch__,
|
||||
extra: __version_prerelease__?.length && __version_prerelease__[0],
|
||||
commit: __git_commit__,
|
||||
build: __webpack_hash__,
|
||||
build: __version_build__,
|
||||
hash: __webpack_hash__,
|
||||
toString: () =>
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
|
||||
}
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
|
||||
});
|
||||
|
||||
// We don't support addons in the player right now, so
|
||||
FrankerFaceZ.utilities = {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
return;
|
||||
|
||||
const HOST = location.hostname,
|
||||
SERVER = __EXTENSION_PATH__,
|
||||
SERVER = browser.runtime.getURL("web/"),
|
||||
script = document.createElement('script');
|
||||
|
||||
let FLAVOR =
|
||||
|
|
@ -21,5 +21,6 @@
|
|||
script.async = true;
|
||||
script.crossOrigin = 'anonymous';
|
||||
script.src = `${SERVER}/${FLAVOR}.js?_=${Date.now()}`;
|
||||
script.dataset.path = SERVER;
|
||||
document.head.appendChild(script);
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -160,16 +160,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
|
|||
|
||||
FrankerFaceZ.Logger = Logger;
|
||||
|
||||
const VER = FrankerFaceZ.version_info = {
|
||||
const VER = FrankerFaceZ.version_info = Object.freeze({
|
||||
major: __version_major__,
|
||||
minor: __version_minor__,
|
||||
revision: __version_patch__,
|
||||
extra: __version_prerelease__?.length && __version_prerelease__[0],
|
||||
commit: __git_commit__,
|
||||
build: __webpack_hash__,
|
||||
build: __version_build__,
|
||||
hash: __webpack_hash__,
|
||||
toString: () =>
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
|
||||
}
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
|
||||
});
|
||||
|
||||
|
||||
FrankerFaceZ.utilities = {
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@
|
|||
{{ version.commit.slice(0,7) }}
|
||||
</a>
|
||||
<span v-else>
|
||||
{{ version.build }}
|
||||
{{ version.hash }}
|
||||
</span>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -119,16 +119,17 @@ ${typeof x[1] === 'string' ? x[1] : JSON.stringify(x[1], null, 4)}`).join('\n\n'
|
|||
|
||||
FrankerFaceZ.Logger = Logger;
|
||||
|
||||
const VER = FrankerFaceZ.version_info = {
|
||||
const VER = FrankerFaceZ.version_info = Object.freeze({
|
||||
major: __version_major__,
|
||||
minor: __version_minor__,
|
||||
revision: __version_patch__,
|
||||
extra: __version_prerelease__?.length && __version_prerelease__[0],
|
||||
commit: __git_commit__,
|
||||
build: __webpack_hash__,
|
||||
build: __version_build__,
|
||||
hash: __webpack_hash__,
|
||||
toString: () =>
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}`
|
||||
}
|
||||
`${VER.major}.${VER.minor}.${VER.revision}${VER.extra || ''}${DEBUG ? '-dev' : ''}${VER.build ? `+${VER.build}` : ''}`
|
||||
});
|
||||
|
||||
// We don't support addons in the player right now, so a few
|
||||
// of these are unavailable.
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ export default class ClipsSite extends BaseSite {
|
|||
this.inject('css_tweaks', CSSTweaks);
|
||||
|
||||
this.css_tweaks.loader = require.context(
|
||||
'!raw-loader!sass-loader!./css_tweaks', false, /\.s?css$/, 'lazy-once'
|
||||
'./css_tweaks?css_tweaks', false, /\.s?css$/, 'lazy-once'
|
||||
);
|
||||
|
||||
this.css_tweaks.rules = {
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default class PlayerSite extends BaseSite {
|
|||
this.inject('css_tweaks', CSSTweaks);
|
||||
|
||||
this.css_tweaks.loader = require.context(
|
||||
'!raw-loader!sass-loader!./css_tweaks', false, /\.s?css$/, 'lazy-once'
|
||||
'./css_tweaks?css_tweaks', false, /\.s?css$/, 'lazy-once'
|
||||
);
|
||||
|
||||
this.css_tweaks.rules = {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,8 @@ import {has} from 'utilities/object';
|
|||
|
||||
import MAIN_URL from 'site/styles/main.scss';
|
||||
|
||||
console.log('!!!!!!!! MAIN_URL: !!!!!!!!!', MAIN_URL);
|
||||
|
||||
|
||||
// ============================================================================
|
||||
// The Site
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
'use strict';
|
||||
|
||||
export default require.context('!raw-loader!sass-loader!./styles', false, /\.s?css$/);
|
||||
export default require.context('./styles?css_tweaks', false, /\.s?css$/);
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const semver = require('semver');
|
||||
|
||||
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||
|
||||
/* global process module __dirname */
|
||||
|
||||
const VERSION = semver.parse(require('./package.json').version);
|
||||
const PRODUCTION = process.env.NODE_ENV === 'production';
|
||||
const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
|
||||
|
||||
const ENTRY_POINTS = {
|
||||
bridge: './src/bridge.js',
|
||||
player: './src/player.js',
|
||||
avalon: './src/main.js',
|
||||
clips: './src/clips.js'
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
entry: ENTRY_POINTS,
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx'],
|
||||
alias: {
|
||||
res: path.resolve(__dirname, 'res/'),
|
||||
styles: path.resolve(__dirname, 'styles/'),
|
||||
root: __dirname,
|
||||
src: path.resolve(__dirname, 'src/'),
|
||||
utilities: path.resolve(__dirname, 'src/utilities/')
|
||||
}
|
||||
},
|
||||
externals: [
|
||||
function(context, request, callback) {
|
||||
if ( request === 'vue' && ! /utilities/.test(context) )
|
||||
return callback(null, 'root ffzVue');
|
||||
callback();
|
||||
}
|
||||
],
|
||||
output: {
|
||||
chunkFilename: FOR_EXTENSION
|
||||
? '[name].js'
|
||||
: '[name].[chunkhash].js',
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
jsonpFunction: 'ffzWebpackJsonp',
|
||||
crossOriginLoading: 'anonymous'
|
||||
},
|
||||
optimization: {
|
||||
splitChunks: {
|
||||
chunks(chunk) {
|
||||
return ! Object.keys(ENTRY_POINTS).includes(chunk.name);
|
||||
},
|
||||
cacheGroups: {
|
||||
vendors: false
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin(),
|
||||
new webpack.ExtendedAPIPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
__version_major__: VERSION.major,
|
||||
__version_minor__: VERSION.minor,
|
||||
__version_patch__: VERSION.patch,
|
||||
__version_prerelease__: VERSION.prerelease,
|
||||
__extension__: FOR_EXTENSION
|
||||
? JSON.stringify(process.env.FFZ_EXTENSION)
|
||||
: false
|
||||
}),
|
||||
],
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.s?css$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: (! FOR_EXTENSION && PRODUCTION)
|
||||
? '[name].[hash].css'
|
||||
: '[name].css'
|
||||
}
|
||||
}, {
|
||||
loader: 'extract-loader'
|
||||
}, {
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: /src/,
|
||||
type: 'javascript/auto',
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: (! FOR_EXTENSION && PRODUCTION)
|
||||
? '[name].[hash].json'
|
||||
: '[name].json'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.jsx$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
plugins: [
|
||||
['@babel/plugin-transform-react-jsx', {
|
||||
pragma: 'createElement'
|
||||
}]
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(graphql|gql)$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'graphql-tag/loader'
|
||||
},
|
||||
{
|
||||
test: /\.(?:otf|eot|ttf|woff|woff2)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: (! FOR_EXTENSION && PRODUCTION)
|
||||
? '[name].[hash].[ext]'
|
||||
: '[name].[ext]'
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
loader: 'raw-loader'
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
loader: 'raw-loader'
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader'
|
||||
}]
|
||||
}
|
||||
}
|
||||
339
webpack.config.js
Normal file
339
webpack.config.js
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
/* global module __dirname */
|
||||
|
||||
const path = require('path');
|
||||
const semver = require('semver');
|
||||
const {exec, execSync} = require('child_process');
|
||||
|
||||
const { VueLoaderPlugin } = require('vue-loader');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
const { EsbuildPlugin } = require('esbuild-loader');
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
|
||||
|
||||
if ( process.env.NODE_ENV == null )
|
||||
process.env.NODE_ENV = 'production';
|
||||
|
||||
// Are we in development?
|
||||
const DEV_SERVER = process.env.WEBPACK_SERVE == 'true';
|
||||
const DEV_BUILD = process.env.NODE_ENV !== 'production';
|
||||
|
||||
// Is this for an extension?
|
||||
const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
|
||||
|
||||
// Get the public path.
|
||||
const FILE_PATH = DEV_SERVER
|
||||
? 'https://localhost:8000/script/'
|
||||
: FOR_EXTENSION
|
||||
? ''
|
||||
: 'https://cdn.frankerfacez.com/static/';
|
||||
|
||||
|
||||
console.log('NODE_ENV:', process.env.NODE_ENV);
|
||||
console.log('FOR_EXTENSION:', FOR_EXTENSION, FOR_EXTENSION ? ` (${process.env.FFZ_EXTENSION})` : '');
|
||||
console.log('IS_DEV_BUILD:', DEV_BUILD);
|
||||
console.log('IS SERVE:', DEV_SERVER);
|
||||
console.log('FILE PATH:', FILE_PATH);
|
||||
|
||||
|
||||
// Version Stuff
|
||||
const VERSION = semver.parse(require('./package.json').version);
|
||||
const commit_hash = DEV_SERVER
|
||||
? null
|
||||
: execSync('git rev-parse HEAD').toString().trim();
|
||||
|
||||
|
||||
// The Config
|
||||
|
||||
const ENTRY_POINTS = {
|
||||
bridge: './src/bridge.js',
|
||||
player: './src/player.js',
|
||||
avalon: './src/main.js',
|
||||
clips: './src/clips.js'
|
||||
};
|
||||
|
||||
const TARGET = 'es2020';
|
||||
|
||||
/** @type {import('webpack').Configuration} */
|
||||
const config = {
|
||||
mode: DEV_BUILD
|
||||
? 'development'
|
||||
: 'production',
|
||||
devtool: DEV_BUILD
|
||||
? 'inline-source-map'
|
||||
: 'source-map',
|
||||
|
||||
target: ['web', TARGET],
|
||||
|
||||
resolve: {
|
||||
extensions: ['.js', '.jsx'],
|
||||
alias: {
|
||||
res: path.resolve(__dirname, 'res/'),
|
||||
styles: path.resolve(__dirname, 'styles/'),
|
||||
root: __dirname,
|
||||
src: path.resolve(__dirname, 'src/'),
|
||||
utilities: path.resolve(__dirname, 'src/utilities/'),
|
||||
site: path.resolve(__dirname, 'src/sites/twitch-twilight/')
|
||||
}
|
||||
},
|
||||
|
||||
entry: ENTRY_POINTS,
|
||||
|
||||
externals: [
|
||||
({context, request}, callback) => {
|
||||
if ( request === 'vue' && ! /utilities/.test(context) )
|
||||
return callback(null, 'root ffzVue');
|
||||
|
||||
callback();
|
||||
}
|
||||
],
|
||||
|
||||
output: {
|
||||
chunkFormat: 'array-push',
|
||||
clean: true,
|
||||
publicPath: true
|
||||
? 'auto'
|
||||
: FILE_PATH,
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: (FOR_EXTENSION || DEV_SERVER)
|
||||
? '[name].js'
|
||||
: '[name].[contenthash:8].js',
|
||||
chunkLoadingGlobal: 'ffzWebpackJsonp',
|
||||
crossOriginLoading: 'anonymous'
|
||||
},
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new EsbuildPlugin({
|
||||
target: TARGET,
|
||||
keepNames: true
|
||||
})
|
||||
],
|
||||
splitChunks: {
|
||||
chunks(chunk) {
|
||||
return ! Object.keys(ENTRY_POINTS).includes(chunk.name);
|
||||
},
|
||||
cacheGroups: {
|
||||
vendors: false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CopyPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: './src/entry.js',
|
||||
to: 'script.js'
|
||||
}
|
||||
]
|
||||
}),
|
||||
new VueLoaderPlugin(),
|
||||
new EsbuildPlugin({
|
||||
define: {
|
||||
__version_major__: JSON.stringify(VERSION.major),
|
||||
__version_minor__: JSON.stringify(VERSION.minor),
|
||||
__version_patch__: JSON.stringify(VERSION.patch),
|
||||
__version_prerelease__: JSON.stringify(VERSION.prerelease),
|
||||
__version_build__: JSON.stringify(process.env.FFZ_BUILD || null),
|
||||
__git_commit__: JSON.stringify(commit_hash),
|
||||
__extension__: FOR_EXTENSION
|
||||
? JSON.stringify(process.env.FFZ_EXTENSION)
|
||||
: JSON.stringify(false)
|
||||
}
|
||||
}),
|
||||
new WebpackManifestPlugin({
|
||||
|
||||
})
|
||||
],
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'esbuild-loader',
|
||||
options: {
|
||||
loader: 'jsx',
|
||||
jsxFactory: 'createElement',
|
||||
target: TARGET
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(graphql|gql)$/,
|
||||
exclude: /node_modules/,
|
||||
use: [
|
||||
'graphql-tag/loader',
|
||||
'minify-graphql-loader'
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.json$/,
|
||||
include: /src/,
|
||||
type: 'asset/resource',
|
||||
generator: {
|
||||
filename: '[name].[contenthash:8].json'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.(?:otf|eot|ttf|woff|woff2)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: (FOR_EXTENSION || DEV_BUILD)
|
||||
? '[name].[ext]'
|
||||
: '[name].[contenthash:8].[ext]'
|
||||
}
|
||||
}]
|
||||
},
|
||||
{
|
||||
test: /\.md$/,
|
||||
type: 'asset/source',
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
type: 'asset/source'
|
||||
},
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(?:sa|sc|c)ss$/,
|
||||
resourceQuery: {
|
||||
not: [
|
||||
/css_tweaks/
|
||||
]
|
||||
},
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: (FOR_EXTENSION || DEV_BUILD)
|
||||
? '[name].css'
|
||||
: '[name].[contenthash:8].css'
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'extract-loader',
|
||||
options: {
|
||||
publicPath: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
esModule: false,
|
||||
sourceMap: DEV_BUILD ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(?:sa|sc|c)ss$/,
|
||||
resourceQuery: /css_tweaks/,
|
||||
use: [
|
||||
{
|
||||
loader: 'raw-loader'
|
||||
},
|
||||
{
|
||||
loader: 'extract-loader'
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
esModule: false,
|
||||
sourceMap: DEV_BUILD ? true : false
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if ( DEV_SERVER )
|
||||
config.devServer = {
|
||||
client: false,
|
||||
webSocketServer: false,
|
||||
magicHtml: false,
|
||||
liveReload: false,
|
||||
hot: false,
|
||||
|
||||
server: 'https',
|
||||
port: 8000,
|
||||
compress: true,
|
||||
|
||||
allowedHosts: [
|
||||
'.twitch.tv',
|
||||
'.frankerfacez.com'
|
||||
],
|
||||
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dev_cdn'),
|
||||
},
|
||||
|
||||
devMiddleware: {
|
||||
publicPath: '/script/',
|
||||
},
|
||||
|
||||
proxy: {
|
||||
'**': {
|
||||
target: 'https://cdn.frankerfacez.com/',
|
||||
changeOrigin: true
|
||||
}
|
||||
},
|
||||
|
||||
setupMiddlewares: (middlewares, devServer) => {
|
||||
|
||||
devServer.app.get('/update_font', (req, res) => {
|
||||
const proc = exec('npm run font:save');
|
||||
|
||||
proc.stdout.on('data', data => {
|
||||
console.log('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.stderr.on('data', data => {
|
||||
console.error('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.on('close', code => {
|
||||
console.log('FONT>> Exited with code', code);
|
||||
res.redirect(req.headers.referer);
|
||||
});
|
||||
});
|
||||
|
||||
devServer.app.get('/dev_server', (req, res) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Private-Network', 'true');
|
||||
|
||||
res.json({
|
||||
path: process.cwd(),
|
||||
version: 2
|
||||
})
|
||||
});
|
||||
|
||||
middlewares.unshift((req, res, next) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Private-Network', 'true');
|
||||
next();
|
||||
});
|
||||
|
||||
return middlewares;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
module.exports = config;
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const common = require('./webpack.common.js');
|
||||
|
||||
/* global module __dirname */
|
||||
|
||||
module.exports = merge(common, {
|
||||
resolve: {
|
||||
alias: {
|
||||
site: path.resolve(__dirname, 'src/sites/twitch-twilight/')
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,101 +0,0 @@
|
|||
/* eslint-disable */
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const common = require('./webpack.web.common.js');
|
||||
|
||||
const {exec} = require('child_process');
|
||||
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
|
||||
/* global module */
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'development',
|
||||
devtool: 'inline-source-map',
|
||||
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
{
|
||||
from: './src/entry.js',
|
||||
to: 'script.js'
|
||||
}
|
||||
]),
|
||||
new webpack.DefinePlugin({
|
||||
__git_commit__: null
|
||||
})
|
||||
],
|
||||
|
||||
devServer: {
|
||||
client: false,
|
||||
webSocketServer: false,
|
||||
|
||||
magicHtml: false,
|
||||
liveReload: false,
|
||||
hot: false,
|
||||
https: true,
|
||||
port: 8000,
|
||||
compress: true,
|
||||
|
||||
allowedHosts: [
|
||||
'.twitch.tv',
|
||||
'.frankerfacez.com'
|
||||
],
|
||||
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dev_cdn'),
|
||||
},
|
||||
|
||||
devMiddleware: {
|
||||
publicPath: '/script/',
|
||||
},
|
||||
|
||||
proxy: {
|
||||
'**': {
|
||||
target: 'https://cdn.frankerfacez.com/',
|
||||
changeOrigin: true
|
||||
}
|
||||
},
|
||||
|
||||
onBeforeSetupMiddleware(devServer) {
|
||||
const app = devServer.app;
|
||||
|
||||
// Because the headers config option is broken.
|
||||
app.get('/*', (req, res, next) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
next();
|
||||
});
|
||||
|
||||
app.get('/update_font', (req, res) => {
|
||||
const proc = exec('npm run font:save');
|
||||
|
||||
proc.stdout.on('data', data => {
|
||||
console.log('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.stderr.on('data', data => {
|
||||
console.error('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.on('close', code => {
|
||||
console.log('FONT>> Exited with code', code);
|
||||
res.redirect(req.headers.referer);
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/dev_server', (req, res) => {
|
||||
res.json({
|
||||
path: process.cwd(),
|
||||
version: 2
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
output: {
|
||||
publicPath: '//localhost:8000/script/',
|
||||
filename: '[name].js',
|
||||
jsonpFunction: 'ffzWebpackJsonp',
|
||||
crossOriginLoading: 'anonymous'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
/* eslint-disable */
|
||||
const path = require('path');
|
||||
const merge = require('webpack-merge');
|
||||
const prod = require('./webpack.web.prod.js');
|
||||
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
|
||||
/* global module */
|
||||
|
||||
module.exports = merge(prod, {
|
||||
plugins: [
|
||||
new CopyPlugin([
|
||||
{
|
||||
from: './src/entry.js',
|
||||
to: 'script.js'
|
||||
}
|
||||
]),
|
||||
new webpack.DefinePlugin({
|
||||
__git_commit__: null
|
||||
})
|
||||
],
|
||||
|
||||
devServer: {
|
||||
hot: false,
|
||||
https: true,
|
||||
port: 8000,
|
||||
compress: true,
|
||||
|
||||
allowedHosts: [
|
||||
'.twitch.tv',
|
||||
'.frankerfacez.com'
|
||||
],
|
||||
|
||||
static: {
|
||||
directory: path.join(__dirname, 'dev_cdn'),
|
||||
},
|
||||
|
||||
devMiddleware: {
|
||||
publicPath: '/script/',
|
||||
},
|
||||
|
||||
proxy: {
|
||||
'**': {
|
||||
target: 'https://cdn.frankerfacez.com/',
|
||||
changeOrigin: true
|
||||
}
|
||||
},
|
||||
|
||||
onBeforeSetupMiddleware(devServer) {
|
||||
const app = devServer.app;
|
||||
|
||||
// Because the headers config option is broken.
|
||||
app.get('/*', (req, res, next) => {
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
next();
|
||||
});
|
||||
|
||||
app.get('/update_font', (req, res) => {
|
||||
const proc = exec('npm run font:save');
|
||||
|
||||
proc.stdout.on('data', data => {
|
||||
console.log('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.stderr.on('data', data => {
|
||||
console.error('FONT>>', data);
|
||||
});
|
||||
|
||||
proc.on('close', code => {
|
||||
console.log('FONT>> Exited with code', code);
|
||||
res.redirect(req.headers.referer);
|
||||
});
|
||||
});
|
||||
|
||||
app.get('/dev_server', (req, res) => {
|
||||
res.json({
|
||||
path: process.cwd(),
|
||||
version: 2
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
output: {
|
||||
publicPath: '//localhost:8000/script/',
|
||||
filename: '[name].js',
|
||||
jsonpFunction: 'ffzWebpackJsonp',
|
||||
crossOriginLoading: 'anonymous'
|
||||
}
|
||||
})
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
const webpack = require('webpack');
|
||||
const merge = require('webpack-merge');
|
||||
const common = require('./webpack.web.common.js');
|
||||
|
||||
const CopyPlugin = require('copy-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
|
||||
|
||||
const Terser = require('terser');
|
||||
|
||||
// Get Git info
|
||||
|
||||
const commit_hash = require('child_process').execSync('git rev-parse HEAD').toString().trim();
|
||||
const FOR_EXTENSION = !! process.env.FFZ_EXTENSION;
|
||||
|
||||
/* global module Buffer */
|
||||
|
||||
const minifier = content => {
|
||||
let text = content.toString('utf8');
|
||||
if ( FOR_EXTENSION )
|
||||
text = text.replace('__EXTENSION_PATH__', JSON.stringify(process.env.FFZ_EXTENSION));
|
||||
const minified = Terser.minify(text);
|
||||
return (minified && minified.code) ? Buffer.from(minified.code) : Buffer.from(text);
|
||||
};
|
||||
|
||||
module.exports = merge(common, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
|
||||
optimization: {
|
||||
concatenateModules: false,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
sourceMap: true,
|
||||
terserOptions: {
|
||||
keep_classnames: true,
|
||||
keep_fnames: true
|
||||
}
|
||||
})
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new webpack.DefinePlugin({
|
||||
__git_commit__: JSON.stringify(commit_hash)
|
||||
}),
|
||||
new CopyPlugin([
|
||||
{
|
||||
from: FOR_EXTENSION
|
||||
? './src/entry_ext.js'
|
||||
: './src/entry.js',
|
||||
to: 'script.min.js',
|
||||
transform: minifier
|
||||
}
|
||||
]),
|
||||
new WebpackManifestPlugin({
|
||||
publicPath: '',
|
||||
map: data => {
|
||||
if ( data.name.endsWith('.scss') )
|
||||
data.name = `${data.name.substr(0,data.name.length - 5)}.css`;
|
||||
|
||||
return data;
|
||||
}
|
||||
})
|
||||
],
|
||||
|
||||
output: {
|
||||
publicPath: FOR_EXTENSION
|
||||
? process.env.FFZ_EXTENSION
|
||||
: '//cdn.frankerfacez.com/static/',
|
||||
filename: FOR_EXTENSION
|
||||
? '[name].js'
|
||||
: '[name].[hash].js'
|
||||
}
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue