11const path = require ( 'path' ) ;
22
3+ // Copy files or entire directories, which already exist, to the build folder
4+ const CopyPlugin = require ( 'copy-webpack-plugin' ) ;
5+
6+ // Simplify creation of HTML files to serve your webpack bundles
7+ const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ;
8+
39module . exports = {
4- entry : path . resolve ( __dirname , ' src/game.ts') ,
10+ entry : './ src/game.ts',
511 output : {
612 path : path . resolve ( __dirname , 'dist' ) ,
7- filename : 'bundle.js'
13+ // It is generally better to use [chunkhash] in the filename instead of a
14+ // fixed filename, especially in production builds.
15+ // When you use a fixed filename, the browser may cache the file and reuse
16+ // it even if you make updates to your code. This means that users may not
17+ // see the updated code until they clear their cache, which can lead to
18+ // confusion and errors.
19+ // By using [chunkhash] in the filename, webpack will generate a unique hash
20+ // for each chunk based on its contents. When the contents of a chunk change,
21+ // the hash value changes, resulting in a new filename.
22+ filename : '[name].[chunkhash].js' ,
23+ chunkFilename : '[name].[chunkhash].js' ,
24+ // Remove all files in the output directory that are not generated by the
25+ // current build
26+ clean : true
827 } ,
928 module : {
1029 rules : [
1130 {
1231 test : / \. t s $ / ,
13- use : 'ts-loader' ,
14- exclude : / n o d e _ m o d u l e s /
32+ include : path . resolve ( __dirname , 'src' ) ,
33+ loader : 'ts-loader'
1534 } ,
1635 {
1736 test : require . resolve ( 'Phaser' ) ,
@@ -21,15 +40,33 @@ module.exports = {
2140 ]
2241 } ,
2342 devServer : {
24- static : path . resolve ( __dirname , './' ) ,
25- host : 'localhost' ,
26- port : 8080 ,
27- open : false
43+ static : path . join ( __dirname , 'dist' )
2844 } ,
2945 resolve : {
30- extensions : [ '.ts' , '.js' ] ,
31- alias : {
32- phaser : path . join ( __dirname , '/node_modules/phaser/dist/phaser.js' )
46+ extensions : [ '.ts' , '.js' ]
47+ } ,
48+ // The SplitChunksPlugin is a built-in plugin in webpack that helps to split
49+ // your code into separate chunks, which can improve the performance of your
50+ // application by reducing the size of each individual bundle.
51+ optimization : {
52+ splitChunks : {
53+ chunks : 'all'
3354 }
34- }
55+ } ,
56+ plugins : [
57+ new CopyPlugin ( {
58+ patterns : [
59+ {
60+ from : 'src/assets/' ,
61+ to : 'assets/'
62+ }
63+ ]
64+ } ) ,
65+ new HtmlWebpackPlugin ( {
66+ template : path . resolve ( __dirname , 'src/index.html' ) ,
67+ filename : 'index.html' ,
68+ title : 'astar-typescript-example' ,
69+ inject : 'head'
70+ } )
71+ ]
3572} ;
0 commit comments