1. /***
  2.  * @Description: webpack配置文件
  3.  * @Author: Harry
  4.  * @Date: 2021-11-12 16:40:12
  5.  * @Url: https://u.mr90.top
  6.  * @github: https://github.com/rr210
  7.  * @LastEditTime: 2021-11-16 21:42:23
  8.  * @LastEditors: Harry
  9.  */
  10. const path = require('path')
  11. const HTMLWebpackPlugin = require('html-webpack-plugin')
  12. const { CleanWebpackPlugin } = require('clean-webpack-plugin')
  13. module.exports = {
  14.   mode: "production",
  15.   entry: "./src/index.ts",
  16.   output: {
  17.     path: path.resolve(__dirname, 'dist'),
  18.     filename: 'bundle.js',
  19.     environment: {
  20.       arrowFunction: false,
  21.       const: false
  22.     }
  23.   },
  24.     resolve: {
  25.     extensions: ['.ts', '.js']},
  26.   module: {
  27.     rules: [
  28.       {
  29.         test: /\.ts$/,
  30.         use: [
  31.           {
  32.             // 配置指定的加载源
  33.             loader: "babel-loader",
  34.             options: {
  35.               presets: [
  36.                 [
  37.                   "@babel/preset-env",
  38.                   {
  39.                     targets: {
  40.                       "chrome": "58",
  41.                       "ie": "11"
  42.                     },
  43.                     "corejs": '3'
  44.                   }
  45.                 ]
  46.               ]
  47.             }
  48.           },
  49.           'ts-loader'
  50.         ],
  51.         exclude: /node_modules/
  52.       }, {
  53.         test: /\.less$/,
  54.         use: [
  55.           'style-loader',
  56.           'css-loader',
  57.           {
  58.             loader: 'postcss-loader',
  59.             options: {
  60.               postcssOptions: {
  61.                 plugins: [
  62.                   [
  63.                     'postcss-preset-env', {
  64.                       browsers: 'last 2 versions'
  65.                     }
  66.                   ]
  67.                 ]
  68.               }
  69.             }
  70.           },
  71.           'less-loader'
  72.         ]
  73.       }
  74.     ],
  75.   },
  76.   plugins: [
  77.     new CleanWebpackPlugin(),
  78.     new HTMLWebpackPlugin({
  79.       title: "贪吃蛇",
  80.       template: "src/index.html"
  81.     })
  82.   ]
  83. }

html模板

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta charset="utf-8" />
  6.   <title>
  7.     <%= htmlWebpackPlugin.options.title %>
  8.   </title>
  9.   <!-- <link src="xxx/xxx.css"> -->
  10. </head>
  12. <body>
  13. </body>
  15. </html>

package

  1. {
  2.   "name": "tcs",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "dependencies": {
  7.     "@babel/core": "^7.16.0",
  8.     "@babel/preset-env": "^7.16.0",
  9.     "babel-loader": "^8.2.3",
  10.     "clean-webpack-plugin": "^4.0.0",
  11.     "core-js": "^3.19.1",
  12.     "html-webpack-plugin": "^5.5.0",
  13.     "postcss": "^8.3.11",
  14.     "postcss-loader": "^6.2.0",
  15.     "postcss-preset-env": "^6.7.0",
  16.     "ts-loader": "^9.2.6",
  17.     "typescript": "^4.4.4",
  18.     "webpack": "^5.64.0",
  19.     "webpack-cli": "^4.9.1",
  20.     "webpack-dev-server": "^4.4.0"
  21.   },
  22.   "devDependencies": {
  23.     "css-loader": "^6.5.1",
  24.     "less": "^4.1.2",
  25.     "less-loader": "^10.2.0",
  26.     "style-loader": "^3.3.1"
  27.   },
  28.   "scripts": {
  29.     "init": "tsc --init",
  30.     "build": "webpack",
  31.     "dev": "webpack-dev-server"
  32.   },
  33.   "keywords": [],
  34.   "author": "",
  35.   "license": "ISC"
  36. }