调整项目结构及增加CSS单独打包

README.md

@@ -34,6 +34,7 @@ Less & CSS资源：
 -   postcss；
 -   postcss-loader；
 -   postcss-preset-env；
+-   mini-css-extract-plugin；
 
 ### **项目使用**
 

babel.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+    // 设置预定义环境
+    presets: [
+        [
+            // 指定环境的插件
+            "@babel/preset-env",
+            // 配置信息
+            {
+                // 要兼容的目标浏览器
+                targets: {
+                    "chrome": "100",
+                    "ie": "11"
+                },
+                // 指定corejs的版本
+                "corejs": "3",
+                // 使用corejs的方式：usage表示按需加载
+                "useBuiltIns": "usage"
+            }
+        ]
+    ]
+};

config/webpack.dev.js

@@ -0,0 +1,95 @@
+// 引入一个包
+const path = require("path");
+// 引入HTML插件
+const HTMLWebpackPlugin = require("html-webpack-plugin");
+// 引入EsLint插件
+const ESLintWebpackPlugin = require("eslint-webpack-plugin");
+
+// webpack中的所有配置信息
+module.exports = {
+    // 模式：development开发、production生产
+    mode: "development",
+    // 指定入口文件
+    entry: "./src/main.ts",
+
+    // 指定打包文件所在目录
+    output: {
+        // 指定打包文件的目录
+        path: undefined,
+        // 打包后的文件名
+        filename: "bundle.js",
+
+        // 不使用箭头函数的方式定义
+        environment: {
+            arrowFunction: false,
+            const: false
+        }
+    },
+
+    // 指定webpack打包时要使用的模块
+    module: {
+        // 指定要加载的规则
+        rules: [
+            {
+                // 指定规则生效的文件
+                test: /\.ts$/,
+                // 要使用的loader
+                use: [
+                    "babel-loader",
+                    "ts-loader"
+                ],
+                // 要排除的文件
+                exclude: /node_modules/
+            },
+
+            // 设置less文件的处理
+            {
+                test: /\.less$/,
+                use: [
+                    "style-loader",
+                    "css-loader",
+                    // 引入postcss
+                    {
+                        loader: "postcss-loader",
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    [
+                                        "postcss-preset-env",
+                                        {
+                                            browsers: "last 2 versions"
+                                        }
+                                    ]
+                                ]
+                            }
+                        }
+                    },
+                    "less-loader"
+                ]
+            }
+        ]
+    },
+
+    // 配置webpack插件
+    plugins: [
+        new HTMLWebpackPlugin({
+            template: "./public/index.html"
+        }),
+        new ESLintWebpackPlugin({
+            // 指定检查文件的根目录
+            context: path.resolve(__dirname, "../src"),
+        })
+    ],
+
+    // 设置引用模块
+    resolve: {
+        extensions: [".ts", ".js"]
+    },
+
+    // 开发服务器
+    devServer: {
+        host: "localhost", // 启动服务器域名
+        port: "8099", // 启动服务器端口号
+        open: true, // 是否自动打开浏览器
+    }
+};

config/webpack.prod.js

@@ -4,9 +4,12 @@ const path = require("path");
 const HTMLWebpackPlugin = require("html-webpack-plugin");
 // 引入EsLint插件
 const ESLintWebpackPlugin = require("eslint-webpack-plugin");
+// 引入CSS单独打包插件
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 // webpack中的所有配置信息
 module.exports = {
+    // 模式：development开发、production生产
     mode: "production",
     // 指定入口文件
     entry: "./src/main.ts",
@@ -14,9 +17,9 @@ module.exports = {
     // 指定打包文件所在目录
     output: {
         // 指定打包文件的目录
-        path: path.resolve(__dirname, "dist"),
+        path: path.resolve(__dirname, "../dist"),
         // 打包后的文件名
-        filename: "bundle.js",
+        filename: "static/js/bundle.js",
         // 自动清空上一次打包的内容，webpack4需使用扩展包clean-webpack-plugin插件来进行自动清空操作
         clean: true,
 
@@ -36,33 +39,7 @@ module.exports = {
                 test: /\.ts$/,
                 // 要使用的loader
                 use: [
-                    // 配置babel
+                    "babel-loader",
-                    {
-                        // 指定加载器
-                        loader: "babel-loader",
-                        // 设置babel
-                        options: {
-                            // 设置预定义环境
-                            presets: [
-                                [
-                                    // 指定环境的插件
-                                    "@babel/preset-env",
-                                    // 配置信息
-                                    {
-                                        // 要兼容的目标浏览器
-                                        targets: {
-                                            "chrome": "100",
-                                            "ie": "11"
-                                        },
-                                        // 指定corejs的版本
-                                        "corejs": "3",
-                                        // 使用corejs的方式：usage表示按需加载
-                                        "useBuiltIns": "usage"
-                                    }
-                                ]
-                            ]
-                        }
-                    },
                     "ts-loader"
                 ],
                 // 要排除的文件
@@ -73,7 +50,7 @@ module.exports = {
             {
                 test: /\.less$/,
                 use: [
-                    "style-loader",
+                    MiniCssExtractPlugin.loader,
                     "css-loader",
                     // 引入postcss
                     {
@@ -104,7 +81,12 @@ module.exports = {
         }),
         new ESLintWebpackPlugin({
             // 指定检查文件的根目录
-            context: path.resolve(__dirname, "src"),
+            context: path.resolve(__dirname, "../src"),
+        }),
+        // 提取css成单独文件
+        new MiniCssExtractPlugin({
+            // 定义输出文件名和目录
+            filename: "static/css/main.css",
         })
     ],
 

package.json

@@ -4,10 +4,9 @@
   "description": "使用TypeScript + Webpack + Less实现贪吃蛇的例子",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "webpack serve --config ./config/webpack.dev.js",
-    "build": "webpack --mode development --config webpack.config.js",
+    "build": "webpack --config ./config/webpack.prod.js",
-    "publish": "webpack --mode production --config webpack.config.js",
+    "start": "npm run dev"
-    "start": "webpack serve --open chrome.exe"
   },
   "keywords": [],
   "author": "",
@@ -24,6 +23,7 @@
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.2",
     "less-loader": "^11.0.0",
+    "mini-css-extract-plugin": "^2.6.0",
     "postcss": "^8.4.14",
     "postcss-loader": "^7.0.0",
     "postcss-preset-env": "^7.7.1",

src/main.ts

@@ -1,5 +1,5 @@
 // 引入样式
-import "./style/index.less";
+import "./style/main.less";
 import GameController from "./modules/GameController";
 
 const game = new GameController();