1. Install the NodeJS environment
  2. Install the NPM or Yarn package management tool
  3. withmkdir ~/demoCommand to create a folder
  4. withcd ~/demoGo to this folder
  5. usenpm install ts-loader typescript webpack webpack-cli --saveoryarn add ts-loader typescript webpack webpack-cliCommand to install dependencies
  6. withvi ./package.jsonEdit the project configuration to add a startup commandbuild, such as the following: 
    {
  "scripts": {
    "build": "webpack"Add build command},"dependencies": {
    "ts-loader": "^" 7.0.1."typescript": "^ 3.8.3"."webpack": "^ 4.42.1"."webpack-cli": "^ 3.3.11." "}}Copy the code
  7. withvi ./tsconfig.jsonTo create aTypescriptAnd fill in the following information: 
    {
  "compilerOptions": {
    "module": "commonjs"."target": "es5"."sourceMap": true
  },
  "exclude": [
    "node_modules"]}Copy the code
  8. withvi ./webpack.config.jsTo create aWebpackAnd fill in the following information: 
    const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader'}}};Copy the code
  9. withvi ./index.htmlTo create aHTMLFile, and write the following: 
    
        
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Webpack + TypeScript</title>
</head>
<body>

<script src="dist/main.js"></script>
</body>
</html>
Copy the code
  10. withmkdir ./srcCommand to create a folder
  11. withvi ./src/index.tsTo create aTypescriptScript file, and write the following: 
    console.log("Hello TypeScript!");
Copy the code
  12. The last runnpm run buildExecute the compile command and it should generate./dist/main.jsFile, accessed at this timeindex.htmlCan be executed.