增加开发模式的配置

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",

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) => {
+entryFiles.map((entryFile) => {
-//   const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/)
+  const matchRes = entryFile.match(/src\/desktop\/(.*)\.html$/)
-//   const pageName = matchRes && matchRes[1]
+  const pageName = matchRes && matchRes[1]
-//   console.log(pageName)
+  console.log(pageName)
-//   htmlWebpackPlugins.push(
+  htmlWebpackPlugins.push(
-//     new htmlWebpackPlugin({
+    new htmlWebpackPlugin({
-//       template: path.join(__dirname, `./src/desktop/${pageName}.html`),
+      template: path.join(__dirname, `./src/desktop/${pageName}.html`),
-//       filename: `${pageName}.html`,
+      filename: `${pageName}.html`,
-//       inject: 'body',
+      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: [
+  plugins: [new MiniCssExtractPlugin({
-    new htmlWebpackPlugin({
+    filename: '[name].[hash:5].css'
-      template: path.join(__dirname, `./src/desktop/index1.html`),
+  })].concat(htmlWebpackPlugins),
-      filename: `index.html`,
-      inject: 'body',
-    }),
-    new MiniCssExtractPlugin(),
-  ].concat(htmlWebpackPlugins),
   optimization: {
     splitChunks: {
       chunks: 'all',

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(),
+    ],
+  },
+}