Webpack FileLoader 将引用的文件插入到 HTML

如何解决Webpack FileLoader 将引用的文件插入到 HTML

我正在使用以下 Webpack 配置构建我的 React 应用程序，我需要在我的 index.html 中添加对 external.config.js 文件的引用，以将其包含在版本控制中。这里使用file-loader处理external.config.js文件，保持为纯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,'index.html') })],};
};

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

解决方法

我能够使用 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,'index.html') })],};
};

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

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

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