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', }), ] }
import './styles.scss';