LAYA2.0+VSCode+TypeScript+webpack 自动构建

​

1.VSCODE安装好debugchrome

2.在VSCODE 命令行 安装webpack，可能需要提前安装nodejs

npm install -g webpack

3.初始化项目 

npm init

输入npm  init这个命令之后，命令行会提示你输入一系列的信息，如果不准备发布的话，一直回车就行了。

会生成package.json这个文件

根据使用情况，我的Package.json如下，其中scipts是一些用于npm run的命令，比如希望自动构建的watch，直接执行编译的start

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.js",
  "bin": {
    "mylaya": "index.js"
  },
  "dependencies": {
    "nodejs": "0.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^5.2.1",
    "http-server": "^0.12.3",
    "strip-sourcemap-loader": "0.0.1",
    "typescript": "^3.9.6",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12"
  },
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "server": "webpack -dev-server --open",
    "start": "webpack",
    "watch": "webpack --watch"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devServer": {
    "contentBase": "src"
  }
}

4.安装webpack和cli

npm install –save-dev webpack -g

npm install --save-dev webpack-cli -g

会把webpack包安装到node_modules目录中
会在package.json的devDependencies属性下添加webpack

5.安装typescript支持

npm install typescript --save-dev

6.安装ts-loader

npm i awesome-typescript-loader --save

7.创建webpack配置文件webpack.config.js 该文件需要放置在项目根目录

module.exports={
    devtool:'eval-source-map',
    entry:__dirname+"/src/Main.ts",
output:{
    path:__dirname+"/bin/js",
    filename:"bundle.js"
},
mode:"development",
module: {
    rules: [{
      test: /.tsx?$/,
      use: 'awesome-typescript-loader',
      exclude: /node_modules/
    }]
  },
  resolve: {   // 需要打包的文件后缀
    extensions: [".tsx", ".ts", ".js"]
}
}

entry是项目的入口文件

output是输出的文件

module是对TS文件的支持

resolve是打包的文件后缀

8.准备好一切之后，直接在调用

npm run watch

就会编译当前代码并且自动监察代码保存自动构建，F5调试打开页面，在修改代码后保存，只需要刷新页面就能看到最新的结果

​