pull/7/head
FishOrBear 7 years ago
parent 3ffb640c12
commit e125e5ec9f

@ -1,29 +1,15 @@
## 本项目为 threejs练手项目 ## 本项目为 threejs练手项目
### 安装
1. 安装 项目依赖包
```
npm install
```
2. 运行开发模式
```
npm run dev
```
3. 按F5开启调试
#1.安装. #1.安装.
npm install npm install
#2.运行 #2.预编译.
webpack --config dll.config.ks
#3.运行
npm run start npm run start
#3.开启调试.F5 #4.开启调试.F5
当然,首先需要安装ChromeDeBug. 当然,首先需要安装ChromeDeBug.
#常用命令 #常用命令
@ -51,6 +37,13 @@ http://javascript.ruanyifeng.com/nodejs/npm.html
#webpck 性能问题 #webpck 性能问题
http://code.oneapm.com/javascript/2015/07/07/webpack_performance_1/ http://code.oneapm.com/javascript/2015/07/07/webpack_performance_1/
#dll plugin
https://zhuanlan.zhihu.com/p/21748318
https://github.com/chenchunyong/webpack-dllPlugin
#让DllPlugin 与webpack-dev-server 一起工作
https://gist.github.com/robertknight/058a194f45e77ff95fcd
//TODO: //TODO:
1.相机. 1.相机.
>注册相机事件 尝试优化相机 >注册相机事件 尝试优化相机

66927
dist/bundle.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

65293
dist/dll.js vendored

File diff suppressed because one or more lines are too long

1
dist/dll.js.map vendored

File diff suppressed because one or more lines are too long

2
dist/index.html vendored

@ -5,5 +5,5 @@
<title>Webpack App</title> <title>Webpack App</title>
</head> </head>
<body> <body>
<script type="text/javascript" src="bundle.js"></script></body> <script type="text/javascript" src="dll.js"></script><script type="text/javascript" src="bundle.js"></script></body>
</html> </html>

@ -0,0 +1,34 @@
const webpack = require('webpack');
var HtmlWebPackPlugin = require("html-webpack-plugin");
const dllName = "dll"
var path = require('path');
const vendors = [
"three",
"lodash",
"dat.gui"
];
module.exports = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: dllName + '.js',
library: dllName,
},
entry: {
"lib": vendors,
},
resolve: {
alias: {
"dat.gui": path.resolve(__dirname, './node_modules/dat.gui/build/dat.gui.js')
}
},
devtool: "source-map",
plugins: [
new webpack.DllPlugin({
path: 'manifest.json',
name: dllName,
context: __dirname,
})
],
};

File diff suppressed because one or more lines are too long

@ -12,6 +12,7 @@
"devDependencies": { "devDependencies": {
"@types/dat-gui": "^0.6.2", "@types/dat-gui": "^0.6.2",
"@types/node": "^7.0.18", "@types/node": "^7.0.18",
"add-asset-html-webpack-plugin": "^2.0.1",
"awesome-typescript-loader": "^3.1.3", "awesome-typescript-loader": "^3.1.3",
"bootstrap-loader": "^2.1.0", "bootstrap-loader": "^2.1.0",
"css-loader": "^0.28.1", "css-loader": "^0.28.1",

@ -12,7 +12,7 @@ import * as THREE from 'three'
import * as dat from "dat.gui" import * as dat from "dat.gui"
export class Data export class Data
{ {
text: string = "11"; text: string = "123";
constructor() constructor()
{ {
} }

@ -1,5 +1,7 @@
var path = require('path'); var path = require('path');
var HtmlWebPackPlugin = require("html-webpack-plugin"); var HtmlWebPackPlugin = require("html-webpack-plugin");
var AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
const webpack = require('webpack');
module.exports = { module.exports = {
entry: "./src/index.ts", entry: "./src/index.ts",
output: { output: {
@ -20,22 +22,22 @@ module.exports = {
loaders: [ loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }, { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ test: /\.[(png)|(jpg)]$/, loader: "file-loader" }, // { test: /\.[(png)|(jpg)]$/, loader: "file-loader" },
//gui.dat // //gui.dat
{ test: /\.css$/, loader: 'style-loader!css-loader' }, // { test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.png$/, loader: 'url-loader?limit=100000' }, // { test: /\.png$/, loader: 'url-loader?limit=100000' },
{ // {
test: /\.scss$/, // test: /\.scss$/,
use: [{ // use: [{
loader: "style-loader" // creates style nodes from JS strings // loader: "style-loader" // creates style nodes from JS strings
}, { // }, {
loader: "css-loader" // translates CSS into CommonJS // loader: "css-loader" // translates CSS into CommonJS
}, { // }, {
loader: "sass-loader" // compiles Sass to CSS // loader: "sass-loader" // compiles Sass to CSS
}] // }]
}, // },
{ test: /\.html$/, loader: 'html-loader' } // { test: /\.html$/, loader: 'html-loader' }
] ],
// preLoaders: [ // preLoaders: [
// // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. // // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
// { test: /\.js$/, loader: "source-map-loader" } // { test: /\.js$/, loader: "source-map-loader" }
@ -48,5 +50,12 @@ module.exports = {
port: 8188 port: 8188
} }
, ,
plugins: [new HtmlWebPackPlugin()] plugins: [
new webpack.DllReferencePlugin({
context: '.',
manifest: require(path.resolve(__dirname, "./manifest.json"))
}),
new HtmlWebPackPlugin(),
new AddAssetHtmlPlugin({ filepath: path.resolve(__dirname, "./dist/dll.js") }),
]
}; };
Loading…
Cancel
Save