Webpack 文件加载器将引用的文件插入 HTML

Question

我正在使用以下 Webpack 配置构建我的 React 应用程序，我需要在我的 index.html 中添加对 external.config.js 文件的引用以将其包含在版本控制中。此处，external.config.js 文件使用 file-loader 处理，以维护为普通 js 文件。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devConfig = require('./config/dev.config.json');
const certConfig = require('./config/cert.config.json');
const stagingConfig = require('./config/staging.config.json');
const productionConfig = require('./config/production.config.json');
const packageJson = require('./package.json');

const version = packageJson.version;

module.exports = (env) => {
  let configPath;
  switch (env) {
    case 'dev':
      configPath = devConfig;
      break;
    case 'cert':
      configPath = certConfig;
      break;
    case 'staging':
      configPath = stagingConfig;
      break;
    case 'production':
      configPath = productionConfig;
      break;
    default:
    // error logs
  }

  return {
    mode: 'development',
    entry: {
      bundle: path.resolve(__dirname, 'src', 'index.js')
    },
    output: {
      path: __dirname + '/dist',
      filename: `[name].v${version}.js`
    },
    module: {
      rules: [
        {
          test: /\.(woff|woff2|ttf|eot)$/,
          use: 'file-loader?name=fonts/[name].[ext]!static',
        },
        {
          test: /external.config.js$/,
          loader: 'file-loader',
          options: {
            name: `[name].v${version}.[ext]`,
          },
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties'],
          },
        },
        {
          test: /\.(scss|css)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
          ],
        },
        {
          test: /\.html$/,
          use: [
            { loader: 'html-loader' },
          ],
        },
      ],
    },
    externals: {
      Config: JSON.stringify(configPath),
    },
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.less', '.json'],
      modules: ['node_modules', 'path/to/your/static_resource'],
    },
    plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src', 'index.html') })],
  };
};

我尝试将其作为 Webpack 条目，但我无法阻止它进行转译。

Answer 1

我能够使用 HtmlWebpackPlugin 实现这一点，它似乎非常支持管理 html 输出。首先，我不得不删除 webpack.config 中的 html-loader，我没有将其用于某个目的，然后将以下配置添加到 HtmlWebpackPlugin.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const devConfig = require('./config/dev.config.json');
const certConfig = require('./config/cert.config.json');
const stagingConfig = require('./config/staging.config.json');
const productionConfig = require('./config/production.config.json');
const packageJson = require('./package.json');

const version = packageJson.version;
const externalConfigPath = `/external.config.v${version}.js?`;

module.exports = (env) => {
  let configPath;
  switch (env) {
    case 'dev':
      configPath = devConfig;
      break;
    case 'cert':
      configPath = certConfig;
      break;
    case 'staging':
      configPath = stagingConfig;
      break;
    case 'production':
      configPath = productionConfig;
      break;
    default:
    // error logs
  }

  return {
    mode: 'development',
    entry: {
      bundle: path.resolve(__dirname, 'src', 'index.js'),
    },
    output: {
      path: __dirname + '/dist',
      filename: `[name].v${version}.js`
    },
    module: {
      rules: [
        {
          test: /\.(woff|woff2|ttf|eot)$/,
          use: 'file-loader?name=fonts/[name].[ext]!static',
        },
        {
          test: /external.config.js$/,
          loader: 'file-loader',
          options: {
            name: `[name].v${version}.js`,
          },
        },
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: ['@babel/plugin-syntax-dynamic-import', '@babel/plugin-proposal-class-properties'],
          },
        },
        {
          test: /\.(scss|css)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
          ],
        },
      ],
    },
    externals: {
      Config: JSON.stringify(configPath),
    },
    resolve: {
      extensions: ['.js', '.jsx', '.css', '.less', '.json'],
      modules: ['node_modules', 'path/to/your/static_resource'],
    },
    plugins: [new HtmlWebpackPlugin({ title: 'Custom template', configURL: externalConfigPath, template: path.resolve(__dirname, 'src', 'index.html') })],
  };
};

然后在 index.html 中将以下引用添加到我的脚本标记 src 属性中文件。

<script type="text/javascript" src=<%= htmlWebpackPlugin.options.configURL %>></script>

参考资料：https://github.com/jantimon/html-webpack-plugin#options

Webpack 文件加载器将引用的文件插入 HTML

Webpack FileLoader insert referenced File to HTML

webpack

webpack-file-loader