我正在尝试使用this库，但这取决于已经全局加载的THREE.js。我正在使用typescript，webpack和webpack-dev-server。是否可以将webpack作为主脚本之前的单独脚本加载THREE.js？我还需要在自己的源代码中使用THREE，因此我也希望将其从主捆绑包中完全排除。
这是我的webpack.config.js：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.ts',
devtool: 'inline-sourcemap',
mode: 'development',
devServer: {
contentBase: path.join(__dirname, 'dist'),
port: 4500
},
module: {
rules: [
{
test: /\.tsx?$/i,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.obj$/i,
use: {
loader: 'file-loader'
},
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
],
},
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist'
},
plugins: [new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.ejs'
})]
};
还有我的tsconfig.json：
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "./dist/",
"noImplicitAny": false,
"module": "es6",
"target": "es2015",
"sourceMap": true,
"moduleResolution": "node",
"allowJs": true,
"typeRoots": [
"src/types",
"node_modules/@types"
],
"paths": {
"@custom-modules/*": ["src/types/*"]
}
},
"exclude": [
"node_modules",
"src/types"
]
}
可能值得将CDN链接添加到three.js，并将其添加到要在webpack中绑定的html模板中。看来这是您的index.ejs文件。
我不确定您的文件结构如何，但是在html中看起来像：
<!DOCTYPE html>
<html>
<head>
...
// globally add three.js to your site
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
// put the rest of your scripts below
...
</head>
<body><!-- Your web--></body>
</html>