webPack+ts搭建开发环境

稳～没落

已于 2022-10-18 19:53:42 修改

阅读量196

点赞数

文章标签： webpack 前端 node.js

于 2022-10-18 19:51:29 首次发布

本文链接：https://blog.csdn.net/weixin_42573952/article/details/118852762

版权

初始化项目

npm init或者yarn init

打开package.json文件然后复制粘贴进去

{
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "ts-loader": "^9.4.1",
    "typescript": "^4.8.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "name": "type_snake",
  "version": "1.0.0",
  "description": "贪吃蛇实战小项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:prod": "webpack",
    "serve": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "accepts": "^1.3.8",
    "acorn": "^8.8.0",
    "acorn-import-assertions": "^1.8.0",
    "ajv": "^8.11.0",
    "ajv-formats": "^2.1.1",
    "ajv-keywords": "^5.1.0",
    "ansi-html-community": "^0.0.8",
    "ansi-regex": "^5.0.1",
    "ansi-styles": "^4.3.0",
    "anymatch": "^3.1.2",
    "array-flatten": "^1.1.1",
    "balanced-match": "^1.0.2",
    "batch": "^0.6.1",
    "binary-extensions": "^2.2.0",
    "body-parser": "^1.20.1",
    "bonjour-service": "^1.0.14",
    "boolbase": "^1.0.0",
    "brace-expansion": "^1.1.11",
    "braces": "^3.0.2",
    "browserslist": "^4.21.4",
    "buffer-from": "^1.1.2",
    "bytes": "^3.1.2",
    "call-bind": "^1.0.2",
    "camel-case": "^4.1.2",
    "caniuse-lite": "^1.0.30001419",
    "chalk": "^4.1.2",
    "chokidar": "^3.5.3",
    "chrome-trace-event": "^1.0.3",
    "clean-css": "^5.3.1",
    "clone-deep": "^4.0.1",
    "color-convert": "^2.0.1",
    "color-name": "^1.1.4",
    "colorette": "^2.0.19",
    "commander": "^7.2.0",
    "compressible": "^2.0.18",
    "compression": "^1.7.4",
    "concat-map": "^0.0.1",
    "connect-history-api-fallback": "^2.0.0",
    "content-disposition": "^0.5.4",
    "content-type": "^1.0.4",
    "cookie": "^0.5.0",
    "cookie-signature": "^1.0.6",
    "core-util-is": "^1.0.3",
    "cross-spawn": "^7.0.3",
    "css-loader": "^6.7.1",
    "css-select": "^4.3.0",
    "css-what": "^6.1.0",
    "debug": "^2.6.9",
    "default-gateway": "^6.0.3",
    "define-lazy-prop": "^2.0.0",
    "depd": "^2.0.0",
    "destroy": "^1.2.0",
    "detect-node": "^2.1.0",
    "dns-equal": "^1.0.0",
    "dns-packet": "^5.4.0",
    "dom-converter": "^0.2.0",
    "dom-serializer": "^1.4.1",
    "domelementtype": "^2.3.0",
    "domhandler": "^4.3.1",
    "domutils": "^2.8.0",
    "dot-case": "^3.0.4",
    "ee-first": "^1.1.1",
    "electron-to-chromium": "^1.4.283",
    "encodeurl": "^1.0.2",
    "enhanced-resolve": "^5.10.0",
    "entities": "^2.2.0",
    "envinfo": "^7.8.1",
    "es-module-lexer": "^0.9.3",
    "escalade": "^3.1.1",
    "escape-html": "^1.0.3",
    "eslint-scope": "^5.1.1",
    "esrecurse": "^4.3.0",
    "estraverse": "^4.3.0",
    "etag": "^1.8.1",
    "eventemitter3": "^4.0.7",
    "events": "^3.3.0",
    "execa": "^5.1.1",
    "express": "^4.18.2",
    "fast-deep-equal": "^3.1.3",
    "fast-json-stable-stringify": "^2.1.0",
    "fastest-levenshtein": "^1.0.16",
    "faye-websocket": "^0.11.4",
    "fill-range": "^7.0.1",
    "finalhandler": "^1.2.0",
    "find-up": "^4.1.0",
    "follow-redirects": "^1.15.2",
    "forwarded": "^0.2.0",
    "fresh": "^0.5.2",
    "fs-monkey": "^1.0.3",
    "fs.realpath": "^1.0.0",
    "function-bind": "^1.1.1",
    "get-intrinsic": "^1.1.3",
    "get-stream": "^6.0.1",
    "glob": "^7.2.3",
    "glob-parent": "^5.1.2",
    "glob-to-regexp": "^0.4.1",
    "graceful-fs": "^4.2.10",
    "handle-thing": "^2.0.1",
    "has": "^1.0.3",
    "has-flag": "^4.0.0",
    "has-symbols": "^1.0.3",
    "he": "^1.2.0",
    "hpack.js": "^2.1.6",
    "html-entities": "^2.3.3",
    "html-minifier-terser": "^6.1.0",
    "htmlparser2": "^6.1.0",
    "http-deceiver": "^1.2.7",
    "http-errors": "^2.0.0",
    "http-parser-js": "^0.5.8",
    "http-proxy": "^1.18.1",
    "http-proxy-middleware": "^2.0.6",
    "human-signals": "^2.1.0",
    "iconv-lite": "^0.4.24",
    "import-local": "^3.1.0",
    "inflight": "^1.0.6",
    "inherits": "^2.0.4",
    "interpret": "^2.2.0",
    "ipaddr.js": "^2.0.1",
    "is-binary-path": "^2.1.0",
    "is-core-module": "^2.10.0",
    "is-docker": "^2.2.1",
    "is-extglob": "^2.1.1",
    "is-glob": "^4.0.3",
    "is-number": "^7.0.0",
    "is-plain-obj": "^3.0.0",
    "is-plain-object": "^2.0.4",
    "is-stream": "^2.0.1",
    "is-wsl": "^2.2.0",
    "isarray": "^1.0.0",
    "isexe": "^2.0.0",
    "isobject": "^3.0.1",
    "jest-worker": "^27.5.1",
    "json-parse-even-better-errors": "^2.3.1",
    "json-schema-traverse": "^1.0.0",
    "kind-of": "^6.0.3",
    "loader-runner": "^4.3.0",
    "locate-path": "^5.0.0",
    "lodash": "^4.17.21",
    "lower-case": "^2.0.2",
    "lru-cache": "^6.0.0",
    "media-typer": "^0.3.0",
    "memfs": "^3.4.7",
    "merge-descriptors": "^1.0.1",
    "merge-stream": "^2.0.0",
    "methods": "^1.1.2",
    "micromatch": "^4.0.5",
    "mime": "^1.6.0",
    "mime-db": "^1.52.0",
    "mime-types": "^2.1.35",
    "mimic-fn": "^2.1.0",
    "minimalistic-assert": "^1.0.1",
    "minimatch": "^3.1.2",
    "ms": "^2.0.0",
    "multicast-dns": "^7.2.5",
    "negotiator": "^0.6.3",
    "neo-async": "^2.6.2",
    "no-case": "^3.0.4",
    "node-forge": "^1.3 .1",
    "node-releases": "^2.0.6",
    "node-sass": "^7.0.3",
    "normalize-path": "^3.0.0",
    "normalize.css": "^8.0.1",
    "npm-run-path": "^4.0.1",
    "nth-check": "^2.1.1",
    "object-inspect": "^1.12.2",
    "obuf": "^1.1.2",
    "on-finished": "^2.4.1",
    "on-headers": "^1.0.2",
    "once": "^1.4.0",
    "onetime": "^5.1.2",
    "open": "^8.4.0",
    "p-limit": "^2.3.0",
    "p-locate": "^4.1.0",
    "p-retry": "^4.6.2",
    "p-try": "^2.2.0",
    "param-case": "^3.0.4",
    "parseurl": "^1.3.3",
    "pascal-case": "^3.1.2",
    "path-exists": "^4.0.0",
    "path-is-absolute": "^1.0.1",
    "path-key": "^3.1.1",
    "path-parse": "^1.0.7",
    "path-to-regexp": "^0.1.7",
    "picocolors": "^1.0.0",
    "picomatch": "^2.3.1",
    "pkg-dir": "^4.2.0",
    "postcss": "^8.4.18",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "pretty-error": "^4.0.0",
    "process-nextick-args": "^2.0.1",
    "proxy-addr": "^2.0.7",
    "punycode": "^2.1.1",
    "qs": "^6.11.0",
    "randombytes": "^2.1.0",
    "range-parser": "^1.2.1",
    "raw-body": "^2.5.1",
    "readable-stream": "^3.6.0",
    "readdirp": "^3.6.0",
    "rechoir": "^0.7.1",
    "relateurl": "^0.2.7",
    "renderkid": "^3.0.0",
    "require-from-string": "^2.0.2",
    "requires-port": "^1.0.0",
    "resolve": "^1.22.1",
    "resolve-cwd": "^3.0.0",
    "resolve-from": "^5.0.0",
    "retry": "^0.13.1",
    "rimraf": "^3.0.2",
    "safe-buffer": "^5.2.1",
    "safer-buffer": "^2.1.2",
    "sass-loader": "^13.1.0",
    "schema-utils": "^3.1.1",
    "select-hose": "^2.0.0",
    "selfsigned": "^2.1.1",
    "semver": "^7.3.8",
    "send": "^0.18.0",
    "serialize-javascript": "^6.0.0",
    "serve-index": "^1.9.1",
    "serve-static": "^1.15.0",
    "setprototypeof": "^1.2.0",
    "shallow-clone": "^3.0.1",
    "shebang-command": "^2.0.0",
    "shebang-regex": "^3.0.0",
    "side-channel": "^1.0.4",
    "signal-exit": "^3.0.7",
    "sockjs": "^0.3.24",
    "source-map": "^0.6.1",
    "source-map-support": "^0.5.21",
    "spdy": "^4.0.2",
    "spdy-transport": "^3.0.0",
    "statuses": "^2.0.1",
    "string_decoder": "^1.3.0",
    "strip-ansi": "^6.0.1",
    "strip-final-newline": "^2.0.0",
    "style-loader": "^3.3.1",
    "supports-color": "^7.2.0",
    "supports-preserve-symlinks-flag": "^1.0.0",
    "tapable": "^2.2.1",
    "terser": "^5.15.1",
    "terser-webpack-plugin": "^5.3.6",
    "thunky": "^1.1.0",
    "to-regex-range": "^5.0.1",
    "toidentifier": "^1.0.1",
    "tslib": "^2.4.0",
    "type-is": "^1.6.18",
    "unpipe": "^1.0.0",
    "update-browserslist-db": "^1.0.10",
    "uri-js": "^4.4.1",
    "util-deprecate": "^1.0.2",
    "utila": "^0.4.0",
    "utils-merge": "^1.0.1",
    "uuid": "^8.3.2",
    "vary": "^1.1.2",
    "watchpack": "^2.4.0",
    "wbuf": "^1.7.3",
    "webpack-dev-middleware": "^5.3.3",
    "webpack-merge": "^5.8.0",
    "webpack-sources": "^3.2.3",
    "websocket-driver": "^0.7.4",
    "websocket-extensions": "^0.1.4",
    "which": "^2.0.2",
    "wildcard": "^2.0.0",
    "wrappy": "^1.0.2",
    "ws": "^8.9.0",
    "yallist": "^4.0.0"
  }
}

创建webpack.config.js文件，然后粘贴进去

const path = require('path')//引入内置path方便得到绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin')//引入模板组件


module.exports = {
  mode: 'development',//开发模式
  entry: './src/main.ts',//入口文件地址
  output: {
    path: path.resolve(__dirname, "./dist"),//出口文件，即打包后的文件存放地址
    filename: 'index.js', //文件名
    // 告诉webpack不适用箭头函数
    environment: {
      arrowFunction: false,
      const: false
    }
  },
  devServer: {

  },
  resolve: {
    extensions:['.ts', '.js', '.cjs', '.json'] //配置文件引入时省略后缀名
  },
  module: {
    rules: [
      {
        test: /\.ts$/, //匹配规则 以ts结尾的文件
        loader: 'ts-loader' //对应文件采用ts-loader进行编译
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                    [
                        "postcss-preset-env",
                      {
                        browsers: "last 2 versions"
                      }
                    ]
                ]
              }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "XXX",
      template: './index.html' //使用模板地址
    })
  ]
}

在创建tsconfig.json文件，然后粘贴进去

{
  "compilerOptions": {
    "target": "ES6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "module": "commonjs",                                  /* 指定生成的模块代码。 */
    "esModuleInterop": true,                          /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true,         /* Ensure that casing is correct in imports. */
    "strict": true,                                   /* 启用所有严格类型检查选项。 */
    "skipLibCheck": true,                              /* 跳过类型检查所有.d.ts文件。 */
    "noEmitOnError": true
  }
}