Як скопіювати статичні файли для створення каталогу за допомогою Webpack?

Я намагаюся перейти з Gulpна Webpack. У Gulpмене є завдання, яке копіює всі файли та папки з / static / folder у / build / folder. Як зробити те ж саме з Webpack? Мені потрібен плагін?

Копіювати речі не потрібно, веб-пакет працює інакше, ніж глотком. Webpack є модулем, і все, що ви посилаєтеся у своїх файлах, буде включено. Для цього просто потрібно вказати завантажувач.

Тож якщо ви пишете:

var myImage = require("./static/myImage.jpg");

Спочатку Webpack спробує проаналізувати посилається файл як JavaScript (тому що це за замовчуванням). Звичайно, це не вдасться. Ось чому вам потрібно вказати завантажувач для цього типу файлів. Наприклад, файл - або завантажувач URL-адрес, беруть згаданий файл, поміщають його у вихідну папку webpack (яка має бути buildу вашому випадку) та повертають хешований URL-адресу для цього файлу.

var myImage = require("./static/myImage.jpg");
console.log(myImage); // '/build/12as7f9asfasgasg.jpg'

Зазвичай завантажувачі застосовуються через конфігурацію веб-пакету:

// webpack.config.js

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/, loader: "file" }
        ]
    }
};

Звичайно, для цього потрібно спочатку встановити завантажувач файлів.

Потрібні активи, що використовують модуль завантажувача файлів, - це спосіб використання webpack ( джерело ). Однак якщо вам потрібна більша гнучкість або потрібен більш чистий інтерфейс, ви також можете скопіювати статичні файли безпосередньо за допомогою my copy-webpack-plugin( npm , Github ). Для вашого staticдо buildприкладу:

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

module.exports = {
    context: path.join(__dirname, 'your-app'),
    plugins: [
        new CopyWebpackPlugin([
            { from: 'static' }
        ])
    ]
};

Якщо ви хочете скопіювати статичні файли, ви можете використовувати завантажувач файлів таким чином:

для html-файлів:

в webpack.config.js:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

у вашому js-файлі:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ стосується вашого файлу js.

Можна зробити те ж саме із зображеннями чи будь-чим іншим. Контекст - це потужний метод дослідження !!

Однією з переваг, яку згаданий вище плагін copy-webpack приносить, що раніше не було пояснено, є те, що всі інші методи, згадані тут, як і раніше, зв'язують ресурси у ваші файли пакетів (і вимагають, щоб ви десь «вимагали» або «імпортували»). Якщо я просто хочу перемістити деякі зображення навколо або деякі шаблони шаблонів, я не хочу захаращувати свій файл пакета javascript з марними посиланнями на них, я просто хочу, щоб файли видавалися в потрібному місці. Я не знайшов іншого способу зробити це в webpack. Справді, це не те, для чого розроблявся веб-пакет, але це, безумовно, сучасний випадок використання. (@BreakDS Я сподіваюся, що це відповідає на ваше запитання - це лише користь, якщо ви цього хочете)

Наведені вище пропозиції хороші. Але щоб спробувати відповісти на ваше запитання безпосередньо, я б запропонував використовувати cpy-cliсценарій, визначений у вашому package.json.

Цей приклад розраховує nodeдесь на вашому шляху. Встановіть cpy-cliяк залежність від розвитку:

npm install --save-dev cpy-cli

Потім створіть пару файлів nodejs. Один зробити копію, а інший - відобразити галочку та повідомлення.

copy.js

#!/usr/bin/env node

var shelljs = require('shelljs');
var addCheckMark = require('./helpers/checkmark');
var path = require('path');

var cpy = path.join(__dirname, '../node_modules/cpy-cli/cli.js');

shelljs.exec(cpy + ' /static/* /build/', addCheckMark.bind(null, callback));

function callback() {
  process.stdout.write(' Copied /static/* to the /build/ directory\n\n');
}

checkmark.js

var chalk = require('chalk');

/**
 * Adds mark check symbol
 */
function addCheckMark(callback) {
  process.stdout.write(chalk.green(' ✓'));
  callback();
}

module.exports = addCheckMark;

Додати сценарій у package.json. Якщо припустити, що сценарії є в<project-root>/scripts/

...
"scripts": {
  "copy": "node scripts/copy.js",
...

Щоб запустити sript:

npm run copy

Швидше за все, вам слід скористатися CopyWebpackPlugin, про який було сказано у відповіді з кевлем. Крім того, для таких файлів, як .html або .json, ви також можете використовувати raw-loader або json-loader. Встановіть його через npm install -D raw-loaderі тоді вам потрібно лише додати ще один завантажувач до нашого webpack.config.jsфайлу.

Подібно до:

{
    test: /\.html/,
    loader: 'raw'
}

Примітка. Перезавантажте веб-сервер dev-сервера, щоб зміни конфігурації набули чинності.

Тепер ви можете вимагати html-файлів, використовуючи відносні шляхи, це значно полегшує переміщення папок.

template: require('./nav.html')  

Спосіб завантаження статичного imagesта fonts:

module: {
    rules: [
      ....

      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        /* Exclude fonts while working with images, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/fonts'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/'
          }
        }]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg|otf)(\?v=\d+\.\d+\.\d+)?$/,
        /* Exclude images while working with fonts, e.g. .svg can be both image or font. */
        exclude: path.resolve(__dirname, '../src/assets/images'),
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
          },
        }
    ]
}

Не забудьте встановити, file-loaderщоб це працювало.

Ви можете написати bash у своєму пакеті.json:

# package.json
{
  "name": ...,
  "version": ...,
  "scripts": {
    "build": "NODE_ENV=production npm run webpack && cp -v <this> <that> && echo ok",
    ...
  }
}

Я і тут застряг. copy-webpack-плагін працював на мене.

Однак "copy-webpack-plugin" у моєму випадку не знадобився (я дізнався пізніше).

webpack ігнорує
приклад кореневих шляхів

<img src="/images/logo.png'>

Отже, щоб зробити цю роботу без використання 'copy-webpack-plugin', використовуйте '~' у шляхах

<img src="~images/logo.png'>

'~' вказує webpack вважати 'images' модулем

Примітка: можливо, вам доведеться додати батьківський каталог директорій зображень у

resolve: {
    modules: [
        'parent-directory of images',
        'node_modules'
    ]
}

Відвідайте https://vuejs-templates.github.io/webpack/static.html

Конфігураційний файл вебпакету (у вебпаку 2) дозволяє експортувати ланцюжок обіцянок, доки останній крок повертає об’єкт конфігурації вебпакету. Див. Документи про конфігурацію обіцянок . Звідти:

webpack тепер підтримує повернення Обіцянки з файлу конфігурації. Це дозволяє виконати обробку асинхронізації у вашому файлі конфігурації.

Ви можете створити просту рекурсивну функцію копіювання, яка копіює ваш файл, і лише після цього запускається веб-пакет. Наприклад:

module.exports = function(){
    return copyTheFiles( inpath, outpath).then( result => {
        return { entry: "..." } // Etc etc
    } )
}

скажемо, що всі ваші статичні активи знаходяться у папці "статично" на кореневому рівні, і ви хочете скопіювати їх у папку збірки, зберігаючи структуру підпапки, а потім у свій файл входу) просто поставте

//index.js or index.jsx

require.context("!!file?name=[path][name].[ext]&context=./static!../static/", true, /^\.\/.*\.*/);