Início / coding / Perguntas / 79582541
Accepted
Samuel
Asked: 2025-04-19 23:16:02 +0800 CST

Insira o script na seção principal do HTML quando estiver em desenvolvimento e não em produção

  • 772

Quero inserir a tag de script abaixo no meu popup.htmle options.htmlquando compilado na pasta dist:

<script src="http://localhost:8097"></script>

Preciso que este seja o primeiro script antes de qualquer outro. Veja como espero que o script fique no meu HTML:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
 <script src="http://localhost:8097"></script>
 <script src="example.js"></script>
 <script src="react.js"></script>
</head>
<body>
  
</body>
</html>

Como posso injetar esse script apenas para desenvolvimento local ao trabalhar com o Webpack?

Aqui está minha configuração até agora:

webpack.dev.js:

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:

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]
            })
    );
}

Pacote.json

{
 ...
 "devDependencies": {
  "webpack": "^5.94.0",
  "webpack-cli": "^5.1.4",
  "webpack-merge": "^6.0.1"
  }
 ...
}
javascript

1 respostas

  1. Best Answer

    Você pode injetar um script personalizado (como http://localhost:8097) em seus arquivos HTML gerados somente em desenvolvimento usando HtmlWebpackPluginas opções templateParametersou inject, ou usando um modelo HTML personalizado com lógica para adicionar condicionalmente esse script somente em desenvolvimento.

    Acho que você pode até mesmo duplicar seus arquivos com outros nomes e ajustar seus scripts para usá-los no modo de desenvolvimento (popup-dev.html, options-dev.html)

    Se for para HtmlWebpackPlugin:

    Com EJS você pode usar um template.ejsfor personalizado popup.htmleoptions.html

    1. template.ejsCrie um arquivo compartilhado dentro do seu projeto (por exemplo, src/templates/template.ejs):
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= htmlWebpackPlugin.options.title %></title>
  <% if (htmlWebpackPlugin.options.devMode) { %>
    <script src="http://localhost:8097"></script>
  <% } %>
</head>
<body>
  <div id="app"></div>
</body>
</html>

    Isso verifica devModee, se for verdadeiro, insere seu script dev.

    1. Modificar getHtmlPlugin()emwebpack.common.js

    Atualize sua função auxiliar para incluir o modelo e passar o sinalizador dev dinamicamente:

    function getHtmlPlugin(chunks) {
    const isDev = process.env.NODE_ENV === 'development';

    return chunks.map(
        (chunk) =>
            new HtmlPlugin({
                title: 'Test',
                filename: `${chunk}.html`,
                chunks: [chunk],
                template: path.resolve(__dirname, 'src/templates/template.ejs'),
                templateParameters: {
                    devMode: isDev
                },
                inject: 'body'
            })
    );
}
    1. Definir NODE_ENVcorretamente

    Certifique-se de que você esteja configurando NODE_ENV=developmentao executar webpack-dev-serverou construir localmente:

    cross-env NODE_ENV=development webpack --config webpack.dev.js

    Adicione "cross-env"às suas dependências de desenvolvimento, se necessário:

    npm install --save-dev cross-env

    Se você quiser modelos separados para popupeoptions

    Você pode passar diferentes modelos HtmlWebpackPlugincomo getHtmlPlugin()este:

    template: path.resolve(__dirname, `src/${chunk}/${chunk}.ejs`)

    Então faça popup.ejse options.ejscom a mesma if (htmlWebpackPlugin.options.devMode)lógica.

    • 2

relate perguntas