1、新建文件夹（文件夹不能使用中文）

2、初始化

1). 初始化包

npm init -y

2).下载依赖

npm i webpack webpack-cli typescript ts-loader -D

3).新建文件

1.新建src文件夹，文件夹下新建main.js入口文件

2.新建webpack.config.js文件，跟src文件夹同级

  1. const path = require('path')
  3. module.exports = {
  4.   entry: './src/main.js',
  5.   output: {
  6.     path: path.resolve(__dirname,'dist'),
  7.     filename: 'bundle.js'
  8.   },
  9.   module: {
  10.     rules:[
  11.       {
  12.         test: /\.ts?/,
  13.         use: [
  14.           'ts-loader',
  15.         ],
  16.         // 要排除的文件
  17.         exclude: /node_modules/
  18.       }
  19.     ]
  20.   },
  21.   plugins:[
  23.   ],
  25.   mode: ''
  27. }

3.新建tsconfig.json文件

  1. {
  2.   "compilerOptions": {
  3.     "module": "es6",
  4.     "target": "es6",
  5.     "strict": false
  6.   }
  7. }

3、打包

进入到package.json文件夹下，在”scripts”属性下添加

  1. "scripts": {
  2.     "build": "webpack --config ./webpack.config.js",
  3.       "dev": "webpack serve --config ./webpack.config.js",
  4.     "start": "npm run dev"
  5.   },

执行npm run build，即可打包。

执行npm run dev,即可启动项目。

执行npm start相当于npm run dev

4、引入插件

1.下载html-webpack-plugin，自动在html页面中引入打包好的js文件，配置如下

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. module.exports = {
  4.       ...
  5.     plugins:[
  6.         new HtmlWebpackPlugin({   //在plugins中使用
  7.             template: path.resolve(__dirname,'public/index.html')  //将publicw文件下的index.html文自动引入打包好的js文件             
  8.             }
  9.         )   
  10.     ]
  11. }

2.下载webpack-dev-server，启用后自动监视代码的修改,并且实时地修改，配置如下

  1. module.exports = {
  2.       ...
  3.     devServer: {
  4.         host: "localhost", // 启动服务器域名
  5.         port: "3000", // 启动服务器端口号
  6.         open: true // 是否自动打开浏览器
  7.     }
  8. }

5)、设置引用模块

原因： 如果一个ts文件引入另一个ts文件，打包时会报错，需要如下配置

  1. module.exports = {
  2.     ...
  3.   resolve: {
  4.     extensions: ['.ts', '.js']  //配置可以引用的模块，此处表示可以引入ts文件和js文件
  5.   }
  6. }