Webpack - копирование файлов из исходного в общедоступное с использованием CopyWebpackPlugin

Question

У меня есть приложение, в котором я использую Webpack. В этом приложении мне нужно скопировать некоторые статические файлы.html из различных каталогов в моем source каталог к ​​той же иерархии в public каталог. В попытке сделать это, я использую CopyWebpackPlugin. В настоящее время мой файл webpack.config.js выглядит следующим образом:

webpack.config.js

const path = require('path');
const projectRoot = path.resolve(__dirname, '../');

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    app: './source/index.html.js',
  },
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: '[name].package.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loaders: ['style-loader','css-loader']        
      },
    ]
  },
  plugins: [
    new CopyWebpackPlugin(
      [ { from: './source/**/*.html', to: './public', force:true } ],
      { copyUnmodified: true }
    )
  ]
};

Когда я бегу webpack из командной строки все работает как я хочу. HTML-файлы успешно скопированы, включая их каталоги, в public каталог. Однако при копировании имя исходного каталога включается. Например, если моя структура каталогов такая:

/source
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

Я ожидаю результата CopyWebpackPlugin вывести на следующее:

Ожидаемый результат :

/public
  /dir-1
    /child-a
      index.html
      page.html
    /child-b
      index.html
      contact.html
  /dir-2
    index.html

Однако то, что я на самом деле получаю, это:

фактический:

/public
  /source
    /dir-1
      /child-a
        index.html
        page.html
      /child-b
        index.html
        contact.html
    /dir-2
      index.html

Обратите внимание, как source каталог включен в цель копирования. Я не понимаю, почему это включено. Что еще более важно, я должен удалить это. Как мне удалить source каталог с пути в целевой?

Answer 1

Вы можете использовать контекстный параметр.

new CopyWebpackPlugin(
    [{
        context: './source/',
        from: '**/*.html',
        to: './public',
        force: true
    }], {
        copyUnmodified: true
    }
)

Answer 2

Я использовал переменную имени.

      patterns: [
    { from: "src/*.svg",    to: '[name].svg'},
]

Answer 3

Я смог скопировать папку src/pages/Content/libв папку build/libи сохраните исходную структуру со следующей конфигурацией:

          new CopyWebpackPlugin({
      patterns: [
        {
          from: 'src/pages/Content/lib',
          to({ context, absoluteFilename }) {
            return path.join(__dirname, 'build', 'lib', path.relative(context, absoluteFilename));
          },
        },
      ],
    }),

Я использую webpack 5.23 и copy-webpack-plugin 7.

Следующий пример страницы помог мне понять, как настроить плагин: https://webpack.js.org/plugins/copy-webpack-plugin/#copy-in-new-directory .

обратите внимание, что рядом с от и до вы можете добавить свойства force: trueа также info: { minimized: true }чтобы переопределить предыдущие файлы и не выполнять минимизацию этих