2

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', }), ] } 
2
  • Are you using any template engin? ejs, pug, etc? Commented Aug 30, 2020 at 10:28
  • No, just plain html, but I do include some styling elements, scss, which is just imported in the html (from index.ts). import './styles.scss'; Commented Aug 30, 2020 at 11:14

1 Answer 1

2

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> <% } %> <% } %> 
Sign up to request clarification or add additional context in comments.

1 Comment

This seemed to work! Thank you! Just a small note; this will prevent all injections, including CSS, so those have to be added manually as well.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.