diff --git a/package.json b/package.json index a9d4603..0e0218f 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "desktop": "webpack --config ./webpack.desktop.js", "mobile": "webpack --config ./webpack.mobile.js", "deploy:prod": "rm -f ./dist/.DS_Store && aws s3 sync ./dist s3://cebg.games.new --acl public-read --exclude \"pubgv4/*\" --exclude \"release/*\"", - "refresh:prod": "aws cloudfront create-invalidation --distribution-id E34PEY4AGTMS0Y --paths \"/*\"" + "refresh:prod": "aws cloudfront create-invalidation --distribution-id E34PEY4AGTMS0Y --paths \"/*\"", + "dev:desktop": "webpack --config ./webpack.desktop.dev.js --watch", + "dev:mobile": "webpack --config ./webpack.mobile.dev.js --watch" }, "author": "", "license": "ISC", diff --git a/webpack.desktop.dev.js b/webpack.desktop.dev.js index 31e272c..e693529 100644 --- a/webpack.desktop.dev.js +++ b/webpack.desktop.dev.js @@ -9,22 +9,23 @@ const TerserPlugin = require('terser-webpack-plugin') const entryFiles = glob.sync(path.join(__dirname, './src/desktop/*.html')) const htmlWebpackPlugins = [] -// entryFiles.map((entryFile) => { -// const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/) -// const pageName = matchRes && matchRes[1] -// console.log(pageName) -// htmlWebpackPlugins.push( -// new htmlWebpackPlugin({ -// template: path.join(__dirname, `./src/desktop/${pageName}.html`), -// filename: `${pageName}.html`, -// inject: 'body', -// }), -// ) -// }) +entryFiles.map((entryFile) => { + const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/) + const pageName = matchRes && matchRes[1] + console.log(pageName) + htmlWebpackPlugins.push( + new htmlWebpackPlugin({ + template: path.join(__dirname, `./src/desktop/${pageName}.html`), + filename: `${pageName}.html`, + inject: 'body', + }), + ) +}) module.exports = { mode: 'development', entry: './src/desktop/js/app.js', + devtool: 'inline-source-map', output: { path: path.resolve(__dirname, 'dist/desktop'), filename: 'js/[name]-[hash].js', @@ -46,12 +47,28 @@ module.exports = { }, }, { - test: /\.(woff|ttf|svg|eot|ico)$/, + test: /\.ico$/i, + dependency: { not: ['url'] }, + loader: 'url-loader', + options: { + limit: 1, + name: '[name].[hash:5].[ext]', + }, + }, + { + test: /\.(woff|ttf|svg|eot)$/, use: ['url-loader'], }, + { + test: /\.xml/, + type: 'asset/resource', + generator: { + filename: 'sitemap.xml', + }, + }, { test: /\.css$/i, - use: [MiniCssExtractPlugin.loader, { loader: 'css-loader' }], + use: [MiniCssExtractPlugin.loader, { loader: 'css-loader'}], }, { test: /.html$/, @@ -80,20 +97,11 @@ module.exports = { 'template-ejs-loader', ], }, - // { - // exclude: /\.(css|js|html|json|less|png|jpg|gif|woff|ttf|svg|eot)$/, - // loader: 'file-loader', - // }, ], }, - plugins: [ - new htmlWebpackPlugin({ - template: path.join(__dirname, `./src/desktop/index1.html`), - filename: `index.html`, - inject: 'body', - }), - new MiniCssExtractPlugin(), - ].concat(htmlWebpackPlugins), + plugins: [new MiniCssExtractPlugin({ + filename: '[name].[hash:5].css' + })].concat(htmlWebpackPlugins), optimization: { splitChunks: { chunks: 'all', diff --git a/webpack.mobile.dev.js b/webpack.mobile.dev.js new file mode 100644 index 0000000..c614b88 --- /dev/null +++ b/webpack.mobile.dev.js @@ -0,0 +1,117 @@ +const path = require('path') +const glob = require('glob') +var webpack = require('webpack') +const htmlWebpackPlugin = require('html-webpack-plugin') +const MiniCssExtractPlugin = require('mini-css-extract-plugin') +const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') +const TerserPlugin = require('terser-webpack-plugin') + +const entryFiles = glob.sync(path.join(__dirname, './src/mobile/*.html')) +const htmlWebpackPlugins = [] + +entryFiles.map((entryFile) => { + const matchRes = entryFile.match(/src\/mobile\/(.*)\.html$/) + const pageName = matchRes && matchRes[1] + console.log(pageName) + htmlWebpackPlugins.push( + new htmlWebpackPlugin({ + template: path.join(__dirname, `./src/mobile/${pageName}.html`), + filename: `${pageName}.html`, + inject: 'body', + }), + ) +}) + +module.exports = { + mode: 'development', + entry: './src/mobile/js/app.js', + devtool: 'inline-source-map', + output: { + path: path.resolve(__dirname, 'dist/mobile'), + filename: 'js/[name]-[hash].js', + publicPath: './', + assetModuleFilename: 'img/[hash][ext][query]', + }, + + module: { + rules: [ + { + test: /\.(png|jpg|gif|jpeg|svg)$/, + // type: 'asset/resource', + dependency: { not: ['url'] }, + loader: 'url-loader', + options: { + name: '[hash].[ext][query]', + limit: 1024 * 10, + outputPath: 'img', + }, + }, + { + test: /\.ico$/i, + dependency: { not: ['url'] }, + loader: 'url-loader', + options: { + limit: 1, + name: '[name].[hash:5].[ext]', + }, + }, + { + test: /\.(woff|ttf|svg|eot)$/, + use: ['url-loader'], + }, + { + test: /\.xml/, + type: 'asset/resource', + generator: { + filename: 'sitemap.xml', + }, + }, + { + test: /\.css$/i, + use: [MiniCssExtractPlugin.loader, { loader: 'css-loader'}], + }, + { + test: /.html$/, + use: [ + { + loader: 'html-loader', + options: { + esModule: false, + sources: { + list: [ + '...', + { + tag: 'a', + attribute: 'data-bigimg', + type: 'src', + }, + { + tag: 'a', + attribute: 'data-imgdetail', + type: 'src', + }, + ], + }, + }, + }, + 'template-ejs-loader', + ], + }, + ], + }, + plugins: [new MiniCssExtractPlugin({ + filename: '[name].[hash:5].css' + })].concat(htmlWebpackPlugins), + optimization: { + splitChunks: { + chunks: 'all', + }, + minimize: true, + minimizer: [ + new TerserPlugin({ + extractComments: false, + }), + new OptimizeCssAssetsPlugin(), + ], + }, +}