Question

我正在尝试使用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"
  ]
}

Answer 1

将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>

Answer 2

我通过在Webpack配置中将three.js添加到externals并通过CDN来解决这个问题。

从捆绑包中单独加载一个库

2 个答案: