如何配置Webpack编译TS文件但不自动注入至HTML？

这个问题很典型——当你需要编译某个脚本但不想让Webpack自动把它加到HTML里时，只需要调整HtmlWebpackPlugin的配置就能轻松解决，核心就是限制插件只注入你需要的chunk。

问题根源 #

你当前的Webpack配置里，entry定义了两个入口（main和optional），而HtmlWebpackPlugin默认会把所有入口chunk都自动注入到生成的index.html中，这就是为什么两个脚本标签都出现了。

解决方案：指定要注入的Chunk #

修改HtmlWebpackPlugin的配置，添加chunks选项，明确告诉插件只注入main这个chunk。这样optional.ts依然会被编译成optional.js输出到dist目录，但不会自动出现在index.html里。

修改后的Webpack配置中，plugins部分的HtmlWebpackPlugin配置如下：

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,
  // 新增这一行：只注入main chunk
  chunks: ['main']
}),

完整修改后的Webpack配置 #

为了更清晰，这里给出完整的修改后配置：

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,
    chunks: ['main'] // 关键修改
  }),
  new MiniCssExtractPlugin({ filename: 'css/style.css' }),
  new CompressionPlugin({ test: /\.(js|css)$/, algorithm: 'gzip', }),
 ]
}

后续按需加载optional.js #

现在optional.js已经编译完成，你可以根据用户操作动态加载它，比如通过动态创建script标签：

// 在main.ts中添加动态加载逻辑
document.querySelector('#load-optional-btn')?.addEventListener('click', () => {
  const script = document.createElement('script');
  script.src = './optional.js';
  script.onload = () => {
    console.log('Optional script loaded');
    // 调用optional中的方法，比如假设optional.ts导出了doSomething
    (window as any).doSomething();
  };
  document.body.appendChild(script);
});

或者用Webpack的动态导入（推荐，支持代码分割和类型检查）：

// 在main.ts中
async function loadOptional() {
  const { doSomething } = await import('./optional.ts');
  doSomething();
}

document.querySelector('#load-optional-btn')?.addEventListener('click', loadOptional);

内容的提问来源于stack exchange，提问作者Automatico