Как скопировать статические файлы для создания каталога с помощью Webpack?

Ответ 1

Вам не нужно копировать вещи, webpack работает иначе, чем gulp. Webpack - это модуль-модуль, и все, что вы укажете в своих файлах, будет включено. Вам просто нужно указать загрузчик для этого.

Итак, если вы пишете:

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

Webpack сначала попытается проанализировать ссылочный файл как JavaScript (потому что это значение по умолчанию). Конечно, это провалится. Поэтому вам нужно указать загрузчик для этого типа файла. file - или url-loader, например, связанный файл, поместите его в папку вывода webpack (которая должна быть build в вашем случае) и вернуть хешированный url для этого файла.

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

Обычно загрузчики применяются через конфигурацию webpack:

// webpack.config.js

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

Конечно, вам нужно сначала установить файл-загрузчик, чтобы сделать эту работу.

Ответ 2

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

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

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

_{1. Я являюсь автором этого плагина.}

Ответ 3

Если вы хотите скопировать свои статические файлы, вы можете использовать файловый загрузчик следующим образом:

для 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.

Вы можете сделать то же самое с изображениями и т.д. Контекст - это мощный метод для изучения!

Ответ 4

Выше предложения хороши. Но чтобы попытаться ответить на ваш вопрос напрямую, я бы предложил использовать cpy-cli в script, определенном в вашем 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;

Добавьте script в package.json. Предполагая, что скрипты находятся в <project-root>/scripts/

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

Чтобы запустить sript:

npm run copy

Ответ 5

Скорее всего, вы должны использовать CopyWebpackPlugin, о котором упоминалось в kevlened ответе. Альтернативно для таких файлов, как . Html или . Json вы также можете использовать загрузчик raw-loader или json-loader. Установите его через npm install -D raw-loader, а затем вам нужно только добавить другого загрузчика в наш webpack.config.js файл.

Как

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

Примечание. Перезапустите webpack-dev-сервер для любых изменений конфигурации, которые вступят в силу.

И теперь вы можете потребовать файлы html с использованием относительных путей, что значительно облегчает перемещение папок.

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

Ответ 6

Вы можете написать bash в своем пакете. json:

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

Ответ 7

Одно из преимуществ того, что упомянутый выше copy-webpack-plugin не объясняет, что все другие упомянутые здесь методы все еще связывают ресурсы в ваши файлы пакетов (и требуют, чтобы вы "требуют" или "импортировать" их где-нибудь). Если я просто хочу переместить некоторые изображения или некоторые частичные части шаблонов, я не хочу загромождать свой файл javascript bundle с бесполезными ссылками на них, я просто хочу, чтобы файлы были выбраны в нужном месте. Я не нашел другого способа сделать это в webpack. По общему признанию, это не то, для чего первоначально был создан веб-пакет, но это определенно настоящий вариант использования. (@BreakDS Я надеюсь, что это ответит на ваш вопрос - это только преимущество, если вы этого хотите)

Ответ 8

Я тоже застрял здесь. copy-webpack-plugin работал у меня.

Однако в моем случае "copy-webpack-plugin" не был необходим (я узнал позже).

webpack игнорирует корневые пути
Пример

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

Следовательно, чтобы сделать эту работу без использования 'copy-webpack-plugin' используйте '~' в путях

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

'~' сообщает webpack рассматривать "изображения" как модуль

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

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

Посетите https://vuejs-templates.github.io/webpack/static.html

Ответ 9

Файл конфигурации webpack (в webpack 2) позволяет экспортировать цепочку обещаний, если последний шаг возвращает объект конфигурации webpack. Обратитесь к документации по настройке. Оттуда:

webpack теперь поддерживает возврат Promise из файла конфигурации. Это позволяет выполнять асинхронную обработку в конфигурационном файле.

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

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

Ответ 10

позволяет сказать, что все ваши статические активы находятся в папке "static" на корневом уровне и вы хотите скопировать их в папку сборки, поддерживая структуру подпапки, затем в вашем файле ввода) просто поставьте

//index.js or index.jsx

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