Webpack: JS JS -Skript in die HTML -Seite für den Entwicklungsbau einfügen ⇐ JavaScript

[Anonymous]

Ich habe eine bestimmte lokale JS-Datei, die ich vor React-DOM in meine HTML-Seiten injizieren muss. Nehmen wir an, die Datei heißt Tools.js
Wie kann ich dieses Skript nur für die lokale Entwicklung injizieren?

Code: Select all

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
mode: 'development',
devtool: 'cheap-module-source-map'
});

Webpack.common.js

Code: Select all

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
entry: {
popup: path.resolve('src/popup/popup.tsx'),
options: path.resolve('src/options/options.tsx'),
background: path.resolve('src/background/background.ts'),
contentScript: path.resolve('src/contentScript/contentScript.js')
},
module: {
rules: [
{
use: 'ts-loader',
test: /\.tsx?$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/i
},
{
type: 'asset/resource',
test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/
}
]
},
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false
}),
new CopyPlugin({
patterns: [
{
from: path.resolve('src/static'),
to: path.resolve('dist/')
}
]
}),
...getHtmlPlugin(['popup', 'options'])
],
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: '[name].js',
path: path.resolve('dist')
},
optimization: {
splitChunks: {
chunks: 'all'
}
}
};

function getHtmlPlugin(chunks) {
return chunks.map(
(chunk) =>
new HtmlPlugin({
title: 'Test',
filename: `${chunk}.html`,
chunks: [chunk]
})
);
}