告诉webpack显式包含一个文件夹

Question

我正在使用serverless.com将我的node js应用程序部署到亚马逊网络服务。

我需要包括目录./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(...)建立引用文件如果您文件(在本例中为.ejs)不需要包含在任何.js文件中，则不会包含该文件。

此外，webpack几乎总是将几个.js文件转换或构建为一个缩小或压缩的javascript文件。ejs文件是以静态方式需要的，因此不需要缩小或压缩。

正如评论所说，在webpack结果之后添加ejs文件作为文件夹