webpack打包工具之ts版开发框架搭建
本文用两个框架,一个是threejs,一个是phaser3,其实流程都是一样。
nodejs、npm是基础,不再多说!
首先新建一个文件夹命名three-study,然后npm init -y
用webpack工具,第一步要安装webpack主功能包:
npm i webpack --save-dev
npm i webpack-cli --save-dev
这两个包是webpack最基础的包,如果仅仅只是用于打包,这两个足够了(--save-dev的意思是仅仅用于开发环境)。
接下来第二步为里调试方便,需要安装webpack-dev-server
npm i webpack-dev-server --save-dev
这个包是一个用来快速搭建本地运行环境的工具,通常情况下package.json里的dev或start调试模式都是用它,常用方式:
webpack-dev-server --config webpack.conf.js
其相关配置可自行百度,一般会配置到webpack.conf.js里。
第三步:安装html-webpack-plugin
npm i html-webpack-plugin --save-dev
这个包就是将打包后的js自动添加到目标index.html模板文件里,省去每次打包都手动操作的麻烦。
第三步:安装ts-loader,typescript,这是ts语言的配置,所有用到ts开发的都必须安装这两个依赖
npm i ts-loader --save-dev
npm i typescript --save-dev
第四步:创建ts配置文件,tsconfig.json,ts的运行必须要有tsconfig文件,否则无法运行和转换成js,我的配置如下:
{ "compilerOptions": { "module": "commonjs", "sourceMap": true, "target": "es5" }, "include": [ "src/*" ], "exclude": [ "node_modules" ] }
接下来安装file-loader和clean-webpack-plugin,file-loader用于资源加载配置,而clean-webpack-plugin则仅仅是打包的时候清除本地原来的打包文件,相当于保持最新,非必须
npm i file-loader --save-dev
npm i clean-webpack-plugin --save-dev
到这里所有工具依赖全部安装完成,接下来就是我们要开发的包如phaser或threejs,这里注意一定要安装到依赖环境,即--save 而不是--save-dev
npm i three --save
整个package.json依赖如下
{ "name": "three-study", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start":"webpack-dev-server --config webpack.conf.js", "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "clean-webpack-plugin": "^3.0.0", "file-loader": "^5.0.2", "html-webpack-plugin": "^3.2.0", "ts-loader": "^6.2.1", "typescript": "^3.7.3", "webpack": "^4.41.2", "webpack-cli": "^3.3.10", "webpack-dev-server": "^3.9.0" }, "dependencies": { "three": "^0.111.0" } }
好了,接下来配置webpack.conf.js文件,让程序运行起来,我的配置如下
const path = require("path"); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode:'development', entry:'./src/Main.ts', output:{ path:path.resolve(__dirname,'./public'), filename:'app.bundle.js' }, devServer:{ //设置服务器访问的基本目录 contentBase:path.resolve(__dirname,'./public'), host:'172.18.27.110', port:1222, // 设置端口号 inline:true }, module:{ rules:[ { test:/\.tsx?$/, use:'ts-loader', exclude:/node_modules/ }, { test:/\.(png|jpe?g|gif|svg)(\?.*)?$/, use:{ loader:'file-loader', options:{ name:'[name].[ext]', outputPath:'assets/' } } } ] }, resolve:{ extensions:['.ts','.tsx','.js'] }, devtool:"eval", plugins:[ new HtmlWebpackPlugin({ template:'index.html' }) ] }
其中172.18.27.110是我自己电脑的局域网ip,其他各项配置均可查询官方文档,这里不再扯远。
最后一步,根目录创建一个index.html模板文件,然后创建一个src和public文件夹,public文件夹主要用来存放资源,在src下创建一个Main.ts文件,编写代码如下
import * as THREE from 'three' class Main{ constructor(){ this.init(); } private scene:THREE.Scene; private camera:THREE.Camera; private renderer:THREE.WebGLRenderer; private myCube:THREE.Mesh; private init(){ let scene = new THREE.Scene(); this.scene = scene; let camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,.01,1000); this.camera = camera; let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight); document.body.appendChild(renderer.domElement); this.renderer = renderer; let geometry = new THREE.BoxGeometry(1,1,1); let material = new THREE.MeshBasicMaterial({color:0xfff000}); let cube = new THREE.Mesh(geometry,material); scene.add(cube); this.myCube = cube; camera.position.z = 5; this.animate(); } private animate(){ requestAnimationFrame(this.animate.bind(this)); this.renderer.render(this.scene,this.camera); this.loop(); } private loop(){ this.myCube.rotation.x += 0.01; this.myCube.rotation.y += 0.01; this.myCube.rotation.z += 0.01; } } new Main();
在命令行运行npm run start,然后打开浏览器输入172.18.27.110:1222即可看到如下效果
对于phaser,也是如此配置,这里仅仅配置里一个dev环境,其实还有个线上打包环境,我一般分成dev.conf.js和prd.conf.js,分别代表dev和生产环境,这里有个生产环境配置可作参考
const path = require("path"); const CleanWebpackPlugin = require("clean-webpack-plugin").CleanWebpackPlugin; const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode:'production', devtool:"source-map", entry:'./src/Main.ts', output:{ filename:'js/[name].[chunkhash].js', path:path.resolve(__dirname,'.././dist') }, module:{ rules:[ { test:/\.tsx?$/, use:'ts-loader', exclude:/node_modules/ }, { test:/\.(png|jpe?g|gif|svg)(\?.*)?$/, use:{ loader:'file-loader', options:{ name:'[name].[ext]', outputPath:'assets/' } } } ] }, resolve:{ extensions:['.ts','.tsx','.js'] }, optimization:{ splitChunks:{ name:"vendor", chunks:"all" } }, plugins:[ new CleanWebpackPlugin(), new HtmlWebpackPlugin({ template:'index.html' }) ] }