sonot
/
PteroTheme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial Webpack 4 configuration

This commit is contained in:
Dane Everitt 2019-02-02 17:33:12 -08:00
parent 2a0d649b2a
commit cc6d10d7f8
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53
7 changed files with 2185 additions and 2584 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.babelrc
View File

@ -1,9 +0,0 @@
{
"presets": [
"@babel/preset-env"
],
"plugins": [
["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
"@babel/plugin-proposal-class-properties"
]
}

11
.eslintrc
View File

@ -1,11 +0,0 @@
{
"parser": "babel-eslint",
"plugins": ["html"],
"extends": ["vue"],
"rules": {
"semi": "off",
"indent": ["error", 4],
"comma-dangle": ["error", "always-multiline"],
"no-unused-vars": "warn"
}
}

65
package.json
View File

@ -1,9 +1,11 @@
{ {
"name": "pterodactyl-panel", "name": "pterodactyl-panel",
"dependencies": { "dependencies": {
"cssnano": "^4.0.3", "axios": "^0.18.0",
"date-fns": "^1.29.0", "date-fns": "^1.29.0",
"feather-icons": "^4.10.0", "feather-icons": "^4.10.0",
"jquery": "^3.3.1",
"lodash": "^4.17.11",
"socket.io-client": "^2.1.1", "socket.io-client": "^2.1.1",
"vee-validate": "^2.1.0-beta.2", "vee-validate": "^2.1.0-beta.2",
"vue": "^2.5.7", "vue": "^2.5.7",
@ -15,72 +17,55 @@
"xterm": "^3.5.1" "xterm": "^3.5.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.0.0-beta.49", "@babel/cli": "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.1", "@babel/core": "^7.2.2",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.49", "@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-transform-async-to-generator": "^7.0.0-beta.49", "@babel/plugin-proposal-object-rest-spread": "^7.3.1",
"@babel/plugin-transform-runtime": "^7.0.0-beta.49", "@babel/preset-env": "^7.3.1",
"@babel/preset-env": "^7.0.0-beta.49",
"@types/feather-icons": "^4.7.0", "@types/feather-icons": "^4.7.0",
"@types/lodash": "^4.14.119", "@types/lodash": "^4.14.119",
"@types/node": "^10.12.15", "@types/node": "^10.12.15",
"@types/socket.io-client": "^1.4.32", "@types/socket.io-client": "^1.4.32",
"@types/webpack-env": "^1.13.6", "@types/webpack-env": "^1.13.6",
"autoprefixer": "^8.2.0", "babel-loader": "^8.0.5",
"axios": "^0.18.0",
"babel-cli": "6.18.0",
"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-loader": "^8.0.0-beta.3",
"babel-plugin-transform-flow-strip-types": "^6.22.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-transform-strict-mode": "^6.18.0",
"babel-register": "^6.26.0",
"clean-webpack-plugin": "^0.1.19", "clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11", "css-loader": "^2.1.0",
"eslint": "^5.6.0", "cssnano": "^4.0.3",
"eslint-config-vue": "^2.0.2",
"eslint-plugin-html": "^4.0.6",
"eslint-plugin-vue": "^4.7.1",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"glob-all": "^3.1.0", "glob-all": "^3.1.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"jquery": "^3.3.1", "mini-css-extract-plugin": "^0.5.0",
"lodash": "^4.17.5",
"postcss": "^6.0.21", "postcss": "^6.0.21",
"postcss-import": "^11.1.0", "postcss-import": "^11.1.0",
"postcss-loader": "^2.1.5", "postcss-loader": "^3.0.0",
"postcss-preset-env": "^3.4.0", "postcss-preset-env": "^3.4.0",
"precss": "^3.1.2", "precss": "^3.1.2",
"purgecss-webpack-plugin": "^1.1.0", "purgecss-webpack-plugin": "^1.1.0",
"style-loader": "^0.21.0", "resolve-url-loader": "^3.0.0",
"tailwindcss": "^0.5.1", "style-loader": "^0.23.1",
"ts-loader": "^5.3.1", "tailwindcss": "^0.7.4",
"typescript": "^3.2.2", "ts-loader": "^5.3.3",
"uglifyjs-webpack-plugin": "^1.2.5", "typescript": "^3.3.1",
"uglifyjs-webpack-plugin": "^2.1.1",
"vue-devtools": "^3.1.9", "vue-devtools": "^3.1.9",
"vue-feather-icons": "^4.7.1", "vue-feather-icons": "^4.7.1",
"vue-loader": "^14.2.2", "vue-loader": "^15.6.2",
"vue-mc": "^0.2.4", "vue-mc": "^0.2.4",
"vue-template-compiler": "^2.5.16", "vue-template-compiler": "^2.5.16",
"vueify-insert-css": "^1.0.0", "vueify-insert-css": "^1.0.0",
"webpack": "^4.4.1", "webpack": "^4.29.0",
"webpack-assets-manifest": "^3.0.1", "webpack-assets-manifest": "^3.1.1",
"webpack-cli": "^3.0.2", "webpack-cli": "^3.0.2",
"webpack-hot-client": "^4.0.2", "webpack-dev-server": "^3.1.14",
"webpack-manifest-plugin": "^2.0.3", "webpack-manifest-plugin": "^2.0.3",
"webpack-serve": "^1.0.2",
"webpack-shell-plugin": "^0.5.0", "webpack-shell-plugin": "^0.5.0",
"webpack-stream": "^4.0.3" "webpack-stream": "^4.0.3"
}, },
"scripts": { "scripts": {
"build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
"watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress", "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
"build": "NODE_ENV=development ./node_modules/.bin/webpack --progress", "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
"build:production": "NODE_ENV=production ./node_modules/.bin/webpack", "build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
"serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --no-clipboard --progress", "serve": "NODE_ENV=development webpack-dev-server --host 0.0.0.0 --hot --hot-only",
"v:serve": "PUBLIC_PATH=http://pterodactyl.test:8080 NODE_ENV=development webpack-serve --hot --config ./webpack.config.js --host 0.0.0.0 --no-clipboard", "v:serve": "PUBLIC_PATH=http://pterodactyl.test:8080 yarn run serve",
"compile:assets": "php artisan vue-i18n:generate & php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js" "compile:assets": "php artisan vue-i18n:generate & php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js"
} }
} }

2
resources/assets/scripts/components/server/subpages/Console.vue
View File

@ -179,5 +179,5 @@
</script> </script>
<style lang="postcss"> <style lang="postcss">
@import "~xterm/src/xterm.css"; /*@import "xterm/src/xterm.css";*/
</style> </style>

4
resources/assets/scripts/components/server/subpages/FileManager.vue
View File

@ -44,8 +44,8 @@
<script> <script>
import map from 'lodash/map'; import map from 'lodash/map';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
import FileManagerFileRow from '../components/filemanager/FileManagerFileRow'; import FileManagerFileRow from '../components/filemanager/FileRow';
import FileManagerFolderRow from '../components/filemanager/FileManagerFolderRow'; import FileManagerFolderRow from '../components/filemanager/FolderRow';
import { getDirectoryContents } from '../../../api/server/getDirectoryContents'; import { getDirectoryContents } from '../../../api/server/getDirectoryContents';
export default { export default {

198
webpack.config.js
View File

@ -5,22 +5,15 @@ const glob = require('glob-all');
const AssetsManifestPlugin = require('webpack-assets-manifest'); const AssetsManifestPlugin = require('webpack-assets-manifest');
const CleanPlugin = require('clean-webpack-plugin'); const CleanPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ShellPlugin = require('webpack-shell-plugin'); const ShellPlugin = require('webpack-shell-plugin');
const PurgeCssPlugin = require('purgecss-webpack-plugin'); const PurgeCssPlugin = require('purgecss-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// Custom PurgeCSS extractor for Tailwind that allows special characters in const isProduction = process.env.NODE_ENV === 'production';
// class names.
//
// https://github.com/FullHuman/purgecss#extractor
class TailwindExtractor {
static extract (content) {
return content.match(/[A-z0-9-:\/]+/g) || [];
}
}
const basePlugins = [ let plugins = [
new CleanPlugin(path.resolve(__dirname, 'public/assets')), new CleanPlugin(path.resolve(__dirname, 'public/assets')),
new ShellPlugin({ new ShellPlugin({
onBuildStart: [ onBuildStart: [
@ -28,56 +21,101 @@ const basePlugins = [
'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js', 'php artisan ziggy:generate resources/assets/scripts/helpers/ziggy.js',
], ],
}), }),
new ExtractTextPlugin('bundle-[hash].css', { new MiniCssExtractPlugin({ filename: 'bundle.[hash:8].css' }),
allChunks: true,
}),
new AssetsManifestPlugin({ new AssetsManifestPlugin({
writeToDisk: true, writeToDisk: true,
publicPath: true, publicPath: true,
integrity: true, integrity: true,
integrityHashes: ['sha384'], integrityHashes: ['sha384'],
}), }),
new VueLoaderPlugin(),
]; ];
const productionPlugins = [ if (isProduction) {
new PurgeCssPlugin({ plugins = plugins.concat([
paths: glob.sync([ new PurgeCssPlugin({
path.join(__dirname, 'resources/assets/scripts/**/*.vue'), paths: glob.sync([
path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'), path.join(__dirname, 'resources/assets/scripts/**/*.vue'),
]), path.join(__dirname, 'resources/assets/scripts/**/*.ts'),
// Don't let PurgeCSS remove classes ending with -enter or -leave-active path.join(__dirname, 'resources/themes/pterodactyl/**/*.blade.php'),
// They're used by Vue transitions and are therefore not specifically defined ]),
// in any of the files are are checked by PurgeCSS. // Don't let PurgeCSS remove classes ending with -enter or -leave-active
whitelistPatterns: [/-enter$/, /-leave-active$/], // They're used by Vue transitions and are therefore not specifically defined
extractors: [ // in any of the files are are checked by PurgeCSS.
{ whitelistPatterns: [/-enter$/, /-leave-active$/],
extractor: TailwindExtractor, extractors: [
extensions: ['html', 'js', 'php', 'vue'], {
}, extractor: class {
], static extract (content) {
}), return content.match(/[A-z0-9-:\/]+/g) || [];
new UglifyJsPlugin({ }
include: [ },
path.join(__dirname, 'resources/assets/scripts'), extensions: ['html', 'js', 'php', 'vue'],
path.join(__dirname, 'node_modules'), },
path.join(__dirname, 'vendor/tightenco'), ],
], }),
cache: true, ]);
parallel: 2, }
}),
const typescriptLoaders = [
{
loader: 'babel-loader',
options: {
cacheDirectory: !isProduction,
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-proposal-class-properties',
['@babel/plugin-proposal-object-rest-spread', { 'useBuiltIns': true }]
],
},
},
{
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
experimentalWatchApi: true,
}
}
];
const cssLoaders = [
{ loader: MiniCssExtractPlugin.loader },
{
loader: 'css-loader',
options: {
sourceMap: !isProduction,
importLoaders: 1,
}
},
{ loader: 'resolve-url-loader' },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [
require('postcss-import'),
tailwind('./tailwind.js'),
require('postcss-preset-env')({
stage: 2,
}),
require('precss'),
].concat(isProduction ? require('cssnano') : []),
}
}
]; ];
module.exports = { module.exports = {
mode: process.env.NODE_ENV, mode: process.env.NODE_ENV,
devtool: process.env.NODE_ENV === 'production' ? false : 'inline-source-map', devtool: isProduction ? false : 'inline-source-map',
performance: { performance: {
hints: false, hints: false,
}, },
// Passing an array loads them all but only exports the last.
entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.ts'], entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.ts'],
output: { output: {
path: path.resolve(__dirname, 'public/assets'), path: path.resolve(__dirname, 'public/assets'),
filename: 'bundle-[hash].js', filename: 'bundle.[hash:8].js',
chunkFilename: 'chunk.[name].js',
publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/', publicPath: _.get(process.env, 'PUBLIC_PATH', '') + '/assets/',
crossOriginLoading: 'anonymous', crossOriginLoading: 'anonymous',
}, },
@ -89,54 +127,21 @@ module.exports = {
}, },
{ {
test: /\.ts$/, test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/, exclude: /node_modules/,
options: { use: typescriptLoaders,
appendTsSuffixTo: [/\.vue$/],
},
},
{
test: /\.js$/,
include: [
path.resolve(__dirname, 'resources'),
],
loader: 'babel-loader?cacheDirectory',
}, },
{ {
test: /\.css$/, test: /\.css$/,
include: [ include: [
path.resolve(__dirname, 'resources'), path.resolve(__dirname, 'resources'),
], ],
use: ExtractTextPlugin.extract({ use: cssLoaders,
fallback: 'style-loader',
use: [{
loader: 'css-loader',
options: {
sourceMap: true,
importLoaders: 1,
},
}, {
loader: 'postcss-loader',
options: {
ident: 'postcss',
sourceMap: true,
plugins: [
require('postcss-import'),
tailwind('./tailwind.js'),
require('postcss-preset-env')({ stage: 0 }),
require('precss'),
require('autoprefixer'),
require('cssnano'),
],
},
}],
}),
}, },
{ {
test: /\.(png|jpg|gif|svg)$/, test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader', loader: 'file-loader',
options: { options: {
name: '[name].[ext]?[hash]', name: '[name].[ext]?[hash:8]',
}, },
}, },
], ],
@ -148,18 +153,29 @@ module.exports = {
}, },
symlinks: false, symlinks: false,
}, },
plugins: process.env.NODE_ENV === 'production' ? basePlugins.concat(productionPlugins) : basePlugins, plugins: plugins,
serve: { optimization: {
content: './public/', minimize: true,
dev: { minimizer: !isProduction ? [] : [
publicPath: '/assets/', new UglifyJsPlugin({
headers: { cache: true,
'Access-Control-Allow-Origin': '*', parallel: true,
}, uglifyOptions: {
}, output: {
hot: { comments: false,
hmr: true, },
reload: true, },
}),
],
},
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/assets/',
allowedHosts: [
'.pterodactyl.test',
],
headers: {
'Access-Control-Allow-Origin': '*',
}, },
}, },
}; };

4480
yarn.lock
View File

File diff suppressed because it is too large Load Diff