0

我只想在我的 HTML 模板中插入供应商脚本。

这些脚本收集在src/vendor目录中。

我想在我的模板 HTML 文件中将它们导入为<script>.

例如：

<script src="../vendor/luxon.min.js"></script>

当我运行 webpack 时，它会将 luxon 存储在dist/assets名为ba9f5c2186e41fc21fa3.js. HTML 文件无法导入脚本，因为由 webpack 创建的名称错误：

<script src="assets/8939b829f8da59dc2687.js"></script>

如何将我的供应商 js 文件插入到我的 HTML 中？

我的 webpack 配置：

   mode: "production",
   entry: {
        base: "./src/base.ts",
        material: "./src/ts/material.ts",
    },
    output: {
        filename: "[name]-[contenthash].js",
        path: path.resolve(__dirname, "dist"),
        clean: true,
        assetModuleFilename: 'assets/[hash][ext][query]',
        chunkFilename: "[id].chunk.js",
        library: pkg.name,
        libraryTarget: 'umd',
    },
    module: {
        rules: [
            // Resolves urls in templates from <img>
            {
                test: /\.html$/i,
                use: ["html-loader",],
            },
            // Support typescript
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            // Supports importing graphics in js/ts and html.
            {
                test: /\.(svg|png|jpg|jpeg|gif)$/i,
                type: "asset/resource",
                generator: {
                    filename: 'assets/images/[hash][ext][query]'
                }
            },
            // Support importing fonts
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'assets/fonts/[hash][ext][query]'
                }
            },
            // SASS support.
            {
                test: /\.scss$/i,
                use: [
                    MiniCssExtractPliugin.loader, // Extract css into files
                    "css-loader", // Turns css into commonjs
                    "postcss-loader", // Cross browser support
                    "sass-loader", // Turns sass into css
                ],
            },
        ]
    },
    plugins: [
        new MiniCssExtractPliugin({
            filename: "css/[name]-[contenthash].css",
        }),
        new HtmlWebpackPlugin({
            title: 'index',
            filename: 'index.html',
            template: "./src/templates/index.html",
            chunks: ['base'],
        }),
        new HtmlWebpackPlugin({
            title: 'about',
            filename: 'about.html',
            template: './src/templates/about.html',
            chunks: ['material'],
        }),
    ],
    optimization: {
        minimize: true, // Minimize css
    },
    alias: {
            Style: path.resolve(__dirname, 'src/sass'),
            Fonts: path.resolve(__dirname, 'src/fonts'),
            Images: path.resolve(__dirname, 'src/images'),
        },
        extensions: ['.ts'],
    // External libraries which are ignored.
    externals: {
        luxon: 'luxon',
    },

我试图添加一个规则，以便导入的 js 文件的名称不会改变，但是我的加载器会抛出很多错误。

 {
                test: /\.js$/i,
                type: "asset/resource",
                generator: {
                    filename: 'vendor/[name][ext][query]'
                }
            },

编辑： 尝试了 webpack 文档中的代码拆分示例（防止重复）。现在使用luxon.min.js. 不幸的是，它现在完全没用了，因为您不能再使用 luxon 的任何功能（luxon.DateTime在浏览器控制台中输入返回luxon is not defined）。

   entry: {
        base: {
            import: "./src/base.ts"
        },
        material: {
            import: "./src/ts/material.ts",
            dependOn: 'shared',
        },
        shared: './src/vendor/luxon.min.js',
    },
    ... 
    optimization: {
        minimize: true, // Minimize css
        runtimeChunk: 'single',
    },
4

0 回答 0