salmonetes/kontrakorronte
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Migrated from parcel to webpack

Browse Source 
The whole idea of parcel was that it was configless.
Now parcel 2 needs a config file. At that point, why not use webpack?
This commit is contained in:
Milton
2021-10-31 20:27:50 -03:00
parent f19236e258
commit 93ec2e7fb6
6 changed files with 5313 additions and 12918 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18092
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

21
package.json
View File

@@ -1,15 +1,24 @@
{ {
"license": "", "license": "",
"scripts": { "scripts": {
"start": "parcel serve src/index.html --open", "start": "webpack serve --mode=development",
"build": "parcel build src/index.html" "build": "run-s clean build-only",
"build-only": "webpack --mode=production",
"clean": "rimraf dist"
}, },
"dependencies": { "dependencies": {
"pixi.js": "^6.1.3" "pixi.js": "^6.1.3"
}, },
"devDependencies": { "devDependencies": {
"parcel-bundler": "^1.12.5", "npm-run-all": "^4.1.5",
"parcel-plugin-static-files-copy": "^2.6.0", "copy-webpack-plugin": "^9.0.1",
"typescript": "^4.4.3" "html-webpack-plugin": "^5.5.0",
"rimraf": "^3.0.2",
"terser-webpack-plugin": "^5.2.4",
"ts-loader": "^9.2.6",
"typescript": "^4.4.4",
"webpack": "^5.61.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
} }
} }

2
src/index.html → src/index.ejs
View File

@@ -22,12 +22,12 @@
height: 100%; height: 100%;
} }
</style> </style>
</head> </head>
<body> <body>
<noscript>Please enable JavaScript in your web browser to view this page.</noscript> <noscript>Please enable JavaScript in your web browser to view this page.</noscript>
<div id="pixi-content"><canvas id="pixi-canvas" /></div> <div id="pixi-content"><canvas id="pixi-canvas" /></div>
</body> </body>
<script defer src="./index.ts"></script>
</html> </html>

2
src/index.ts
View File

@@ -3,7 +3,7 @@ import { Application, Sprite } from 'pixi.js'
const app = new Application({ const app = new Application({
view: document.getElementById("pixi-canvas") as HTMLCanvasElement, view: document.getElementById("pixi-canvas") as HTMLCanvasElement,
resolution: window.devicePixelRatio || 1, resolution: window.devicePixelRatio || 1,
autoDensity:true, autoDensity: true,
backgroundColor: 0x6495ed, backgroundColor: 0x6495ed,
width: 640, width: 640,
height: 480 height: 480

30
tsconfig.json Normal file
View File

@@ -0,0 +1,30 @@
{
"compilerOptions": {
// Settings for the compiler
"outDir": "./dist/",
"sourceMap": true,
"target": "es2015",
"module": "ESNext",
// Rules for your code
"strict": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"noFallthroughCasesInSwitch": true,
"noImplicitOverride": true,
// Settings for linking source files
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,
},
// Folder for your code
"include": [
"./src/**/*"
]
}

84
webpack.config.js Normal file
View File

@@ -0,0 +1,84 @@
const webpack = require('webpack');
const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = (env, argv) => {
return ({
stats: 'minimal', // Keep console output easy to read.
entry: './src/index.ts', // Your program entry point
// Your build destination
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
// Config for your testing server
devServer: {
compress: true,
static: false,
client: {
logging: "warn",
overlay: {
errors: true,
warnings: false,
},
progress: true,
},
port: 1234, host: '0.0.0.0'
},
// Web games are bigger than pages, disable the warnings that our game is too big.
performance: { hints: false },
// Enable sourcemaps while debugging
devtool: argv.mode === 'development' ? 'eval-source-map' : undefined,
// Minify the code when making a final build
optimization: {
minimize: argv.mode === 'production',
minimizer: [new TerserPlugin({
terserOptions: {
ecma: 6,
compress: { drop_console: true },
output: { comments: false, beautify: false },
},
})],
},
// Explain webpack how to do Typescript
module: {
rules: [
{
test: /\.ts(x)?$/,
loader: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: [
'.tsx',
'.ts',
'.js'
]
},
plugins: [
// Copy our static assets to the final build
new CopyPlugin({
patterns: [{ from: 'static/' }],
}),
// Make an index.html from the template
new HtmlWebpackPlugin({
template: 'src/index.ejs',
hash: true,
minify: false
})
]
});
}