WebPack compile TS file without including in HTML

user_741850 0
Viewed 179

I'm working on a simple webpage where I am trying to selectively load a script based on user actions.

Because of this, I would like a script to be compiled by WebPack, but not automatically added as an import (script tag) in the output HTML. The setup I have (see below) creates a main.js, and an optional.js with the following output in my index.html

<script src="main.js"></script><script src="optional.js"></script>

Is there some configuration I can change so that optional.js is not included in the output html?

Here is the relevant files

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true
    }
}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    entry: {
        main: './src/index.ts',
        optional: './src/optional.ts'
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            }
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
                minifyCSS: true,
                minifyJS: true
            },
            cache: false
        }),
        new MiniCssExtractPlugin({
            filename: 'css/style.css'
        }),
        new CompressionPlugin({
            test: /\.(js|css)$/,
            algorithm: 'gzip',
        }),
    ]
}
webpack typescript
1 Answers

You can disable automatically injection with inject: false:

// ...
new HtmlWebpackPlugin({
    inject: false,
    template: './src/index.html',
    // ...

This way you have to add the script manually (index.html):

<script src="main.js"></script>

The opportunity with a template engine(e.g ejs) is to have access to the compiled files with htmlWebpackPlugin.files.js:

// index.html
<% for(var js in htmlWebpackPlugin.files.js) { %>
    <% if (js === 'main.js') { %>
        <script src="<%= js%>"></script>
    <% } %>
<% } %>
user_109442190
Related