加载一个与捆绑包分开的库

问题描述 投票:0回答:1

我正在尝试使用this库,但这取决于已经全局加载的THREE.js。我正在使用typescriptwebpackwebpack-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"
  ]
}
typescript webpack webpack-dev-server
1个回答
0
投票

可能值得将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>
热门问题
推荐问题
最新问题