为 .ejs 设置 Webpack

Question

我有使用 ejs 文件的项目。唯一的问题是我在服务器端使用 ejs 文件。代码如下。我需要以某种方式设置 webpack，它会即时插入 index.ejs<script src="frontend/build/..."></script>和<style src="frontend/build/..."/>. 我只知道我应该以某种方式使用 webpack-middleware。如果有人有经验，请帮我设置。

// webpack.config.js

import path from 'path';

import ExtractTextPlugin from 'extract-text-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';

const inProduction = process.argv[process.argv.length - 1]
  .match(/[a-z]+$/g)[0] === 'production';

const basic = {
  entry: {
    app: path.join(__dirname, 'frontend/source/scripts/main.js'),
  },
  output: {
    path: path.join(__dirname, 'frontend/build'),
    filename: '[name].[chunkhash].js',
  },
};

const module = {
  rules: [{
      test: /\.css$/,
      use: ExtractTextPlugin.extract({
        use: ['css-loader'],
      }),
    },
    {
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: ['/node_modules'],
    },
  ],
};

const plugins = [
  new ExtractTextPlugin('[name].[contenthash].css'),
  new CleanWebpackPlugin('build'),
];

export default {
  ...basic,
  module,
  plugins,
};

<!-- index.ejs -->

<header class="header">Git Rendering</header>
   
    <main class="container">

      <% if (branches) { %>
        <%- include('branches'); %>
      <% } %>

      <% if (commits) { %>
        <%- include('commits'); %>
      <% } %>

      <% if (files) { %>
        <%- include('files'); %>
      <% } %>

      <% if (file) { %>
        <%- include('file'); %>
      <% } %>
      
    </main>

Answer 1

最简单的解决方案是使用html-webpack-plugin加载文件。您可以编写模板并注入脚本标签。
如果你只是想添加你的 webpack 条目，它会自动发生。

您唯一需要注意的是，html-webpack-plugin 也使用 ejs 模板。因此，您需要更改您的或插件模板语法。