webpack打包工具之ts版开发框架搭建
2021-05-14 01:29
标签：开发 语言 ash dep mesh 流程 本地 entry cti 本文用两个框架，一个是threejs，一个是phaser3，其实流程都是一样。 nodejs、npm是基础，不再多说！ 首先新建一个文件夹命名three-study，然后npm init -y 用webpack工具，第一步要安装webpack主功能包： 这两个包是webpack最基础的包，如果仅仅只是用于打包，这两个足够了（--save-dev的意思是仅仅用于开发环境）。 接下来第二步为里调试方便，需要安装webpack-dev-server 这个包是一个用来快速搭建本地运行环境的工具，通常情况下package.json里的dev或start调试模式都是用它，常用方式： 其相关配置可自行百度，一般会配置到webpack.conf.js里。 第三步：安装html-webpack-plugin 这个包就是将打包后的js自动添加到目标index.html模板文件里，省去每次打包都手动操作的麻烦。 第三步：安装ts-loader，typescript，这是ts语言的配置，所有用到ts开发的都必须安装这两个依赖 第四步：创建ts配置文件，tsconfig.json，ts的运行必须要有tsconfig文件，否则无法运行和转换成js，我的配置如下： 接下来安装file-loader和clean-webpack-plugin，file-loader用于资源加载配置，而clean-webpack-plugin则仅仅是打包的时候清除本地原来的打包文件，相当于保持最新，非必须 到这里所有工具依赖全部安装完成，接下来就是我们要开发的包如phaser或threejs，这里注意一定要安装到依赖环境，即--save 而不是--save-dev 整个package.json依赖如下 好了，接下来配置webpack.conf.js文件，让程序运行起来，我的配置如下 其中172.18.27.110是我自己电脑的局域网ip，其他各项配置均可查询官方文档，这里不再扯远。 最后一步，根目录创建一个index.html模板文件，然后创建一个src和public文件夹，public文件夹主要用来存放资源，在src下创建一个Main.ts文件，编写代码如下 在命令行运行npm run start，然后打开浏览器输入172.18.27.110:1222即可看到如下效果 对于phaser，也是如此配置，这里仅仅配置里一个dev环境，其实还有个线上打包环境，我一般分成dev.conf.js和prd.conf.js，分别代表dev和生产环境，这里有个生产环境配置可作参考 webpack打包工具之ts版开发框架搭建 标签：开发 语言 ash dep mesh 流程 本地 entry cti 原文地址：https://www.cnblogs.com/wangzisheng/p/11993919.htmlnpm i webpack --save-dev
npm i webpack-cli --save-dev
npm i webpack-dev-server --save-dev
webpack-dev-server --config webpack.conf.js
npm i html-webpack-plugin --save-dev
npm i ts-loader --save-dev
npm i typescript --save-dev
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true,
"target": "es5"
},
"include": [
"src/*"
],
"exclude": [
"node_modules"
]
}
npm i file-loader --save-dev
npm i clean-webpack-plugin --save-dev
npm i three --save
{
"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"
}
}
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‘
})
]
}
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();
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‘
})
]
}