Merge branch 'feature/1.0.20'

config/webpack.dev.js

@@ -0,0 +1,97 @@
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const BundleAnalyzerPlugin =
+  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const EslintWebpackPlugin = require("eslint-webpack-plugin");
+
+// @ts-check
+/** @type {import('webpack').Configuration} */
+
+module.exports = {
+  entry: {
+    index: path.resolve(__dirname, "../src/index.js"),
+  },
+  mode: "development",
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: "ts-loader",
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.less$/,
+        use: ["style-loader", "css-loader", "less-loader"],
+      },
+      {
+        test: /\.s[ac]ss$/,
+        use: ["style-loader", "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.styl$/,
+        use: ["style-loader", "css-loader", "stylus-loader"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|webp|svg)$/,
+        type: "asset", // 通用资源模块类型，会自动根据文件大小选择base64或者file,默认8kb,可通过parser.dataUrlCondition.maxSize修改
+        parser: {
+          dataUrlCondition: {
+            maxSize: 8 * 1024,
+          },
+        },
+        generator: {
+          // 配置输出文件名，ext代表保留原文件扩展名
+          filename: "static/img/[hash:10][ext]",
+        },
+      },
+      {
+        test: /\.(eot|ttf|woff2?)$/,
+        type: "asset/resource", // 生成单独文件
+        generator: {
+          // 配置输出文件名，ext代表保留原文件扩展名
+          filename: "static/font/[hash:10][ext]",
+        },
+      },
+    ],
+  },
+  plugins: [
+    // 生成指定html文件
+    new HtmlWebpackPlugin({
+      title: "toolbox",
+      template: path.resolve(__dirname, "../index.html"),
+    }),
+    // 打包分析插件
+    new BundleAnalyzerPlugin({
+      openAnalyzer: false,
+    }),
+    // 配置eslint插件
+    new EslintWebpackPlugin({
+      context: path.resolve(__dirname, "src"),
+    }),
+  ],
+  resolve: {
+    extensions: [".ts", ".js"],
+  },
+  stats: {
+    chunks: true,
+    chunkModules: true,
+  },
+  devServer: {
+    port: 168,
+    hot: true, // 启用热模块替换
+    open: true,
+    compress: true, // 开发服务器是否启用gzip压缩
+    client: {
+      progress: true,
+    },
+    static: {
+      // 为打包后的静态资源提供服务，服务启动后执行打包后的文件，通过directory可指定资源路径
+      directory: path.resolve(__dirname, "../dist"),
+    },
+  },
+};

webpack.config.js → config/webpack.prod.js

@@ -11,7 +11,7 @@ module.exports = {
   entry: {
     index: path.resolve(__dirname, "/src/index.js"),
   },
-  mode: "development",
+  mode: "production",
   devtool: "inline-source-map",
   output: {
     filename: "static/js/[chunkhash:10].bundle.js",
@@ -42,6 +42,7 @@ module.exports = {
         test: /\.styl$/,
         use: ["style-loader", "css-loader", "stylus-loader"],
       },
+      // 使用webpack内置的资源模块类型处理图片文件(asset为通用资源模块，会自动根据文件大小选择base64或者file)
       {
         test: /\.(png|jpe?g|gif|webp|svg)$/,
         type: "asset", // 通用资源模块类型，会自动根据文件大小选择base64或者file,默认8kb,可通过parser.dataUrlCondition.maxSize修改
@@ -55,6 +56,7 @@ module.exports = {
           filename: "static/img/[hash:10][ext]",
         },
       },
+      // 使用webpack内置的资源模块类型处理字体文件(asset/resource为单独文件，会发起http请求获取)
       {
         test: /\.(eot|ttf|woff2?)$/,
         type: "asset/resource", // 生成单独文件
@@ -66,13 +68,16 @@ module.exports = {
     ],
   },
   plugins: [
+    // 生成指定html文件
     new HtmlWebpackPlugin({
       title: "toolbox",
-      template: path.resolve(__dirname, "index.html"),
+      template: path.resolve(__dirname, "../index.html"),
     }),
+    // 打包分析插件
     new BundleAnalyzerPlugin({
       openAnalyzer: false,
     }),
+    // 配置eslint插件
     new EslintWebpackPlugin({
       context: path.resolve(__dirname, "src"),
     }),
@@ -84,16 +89,4 @@ module.exports = {
     chunks: true,
     chunkModules: true,
   },
-  devServer: {
-    port: 168,
-    hot: true,
-    open: true,
-    compress: true,
-    client: {
-      progress: true,
-    },
-    static: {
-      directory: path.resolve(__dirname, "dist"),
-    },
-  },
 };

package.json

@@ -4,8 +4,8 @@
   "description": "A progressive toolBox",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --config webpack.config.js",
-    "build": "webpack --config webpack.config.js",
+    "start": "webpack-dev-server --config ./config/webpack.dev.js",
+    "build": "webpack --config ./config/webpack.prod.js",
     "export": "node ./scripts/autoExport.mjs",
     "prepare": "husky"
   },