Question

我正在使用serverless.com将节点js应用程序部署到AWS。

我需要包含目录./src/email-templates/**，该目录包含电子邮件模板模块使用的.ejs和.scss文件。

例如：

import * as EmailTemplate from 'email-templates';
template = EmailTemplate.EmailTemplate('./email-templates/default');

这是我的webpack的样子：

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const slsw = require('serverless-webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const isLocal = slsw.lib.webpack.isLocal;

module.exports = {
  mode: isLocal ? 'development' : 'production',
  entry: slsw.lib.entries,
  externals: [nodeExternals(), "aws-sdk"],
  devtool: 'source-map',
  resolve: {
    extensions: [ '.js', '.jsx', '.json', '.ts', '.tsx' ]
  },
  output: {
    libraryTarget: 'commonjs2',
    path: path.join(__dirname, '.webpack'),
    filename: '[name].js'
  },
  target: 'node',
  module: {
    rules: [
      { test: /\.ejs$/, loader: 'ejs-loader?variable=data' },
      {
        // Include ts, tsx, js, and jsx files.
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'cache-loader',
            options: {
              cacheDirectory: path.resolve('.webpackCache')
            }
          },
          'babel-loader'
        ]
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          'style-loader',
          // Translates CSS into CommonJS
          'css-loader',
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()]
};

当我运行sls deploy --stage=dev部署EmailTemplates实例时，找不到该文件夹。这是错误：

Failed to render email { [Error: ENOENT: no such file or directory, stat './email-templates/notification']
  errno: -2,
  code: 'ENOENT',
  syscall: 'stat',
  path: './email-templates/notification' }

因此，似乎webpack没有打包它。

无论如何，有没有明确告诉webpack包含文件夹？

Answer 1

其中一条评论提到CopyWebpackPlugin，我认为这是您正在寻找的最“规范的webpack”方法：

将已存在的单个文件或整个目录复制到构建目录。

安装后：

npm install copy-webpack-plugin --save-dev

在您的webpack配置文件中要求它：

const CopyPlugin = require('copy-webpack-plugin')

并在配置中更新plugins属性：

  plugins: [
    new CopyPlugin({
      patterns: [
        // ALL .scss files emitted under '<top-level-dist>/email-templates', maintaining sub-folder structure
        {
          from: 'src/email-templates/**/*.scss',
          to: './email-templates',
        },
        // ALL .ejs files copied under '<top-level-dist>/email-templates', maintaining sub-folder structure
        {
          from: 'src/email-templates/**/*.ejs',
          to: './email-templates',
        },
      ],
    }),
    new ForkTsCheckerWebpackPlugin()
  ]

Answer 2

Webpack只是使用require（...）构建引用的文件，如果在任何.js文件中都不需要您的文件（在您的情况下为.ejs），则不会包含该文件。

而且，webpack几乎总是可以将多个.js文件转换或构建为一个精简或压缩的javascript文件。静态需要使用ejs文件，因此不需要缩小或压缩。

正如评论所说，将webpack结果后的ejs文件添加为文件夹

告诉Webpack明确包含文件夹

2 个答案: