为 .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. You can write templates 加载文件并注入脚本标签。
如果你只想添加你的 webpack 条目，它会自动发生。

您唯一需要注意的是，html-webpack-plugin 也使用了 ejs 模板。所以你需要 .

为 .ejs 设置 Webpack

Set up Webpack for .ejs

javascript

ejs

webpack

webpack-dev-server