Jak skopiować pliki statyczne do katalogu z Webpackiem?

Próbuję przejść od Gulpdo Webpack. W GulpMam zadanie, które kopiuje wszystkie pliki i foldery z / static / folder do / build / folder. Jak zrobić to samo z Webpack? Czy potrzebuję wtyczki?

Nie musisz kopiować rzeczy, webpack działa inaczej niż gulp. Webpack to pakiet modułów i wszystko, do czego odnosisz się w swoich plikach, zostanie uwzględnione. Musisz tylko określić moduł ładujący.

Więc jeśli napiszesz:

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

Webpack najpierw spróbuje parsować plik, do którego istnieje odwołanie, jako JavaScript (ponieważ jest to ustawienie domyślne). Oczywiście to się nie powiedzie. Dlatego musisz określić moduł ładujący dla tego typu pliku. Plik - lub URL-ładowarki na przykład wziąć odwołuje plik, umieścić go w folderze wyjściowym WebPACK (która powinna być buildw danym przypadku) i powrót zakodowanego adresu URL dla tego pliku.

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

Zazwyczaj programy ładujące są stosowane przez konfigurację webpack:

// webpack.config.js

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

Oczywiście musisz najpierw zainstalować moduł ładujący pliki, aby to zadziałało.

Wymaganie zasobów za pomocą modułu ładującego pliki to sposób, w jaki przeznaczony jest pakiet WWW ( źródło ). Jeśli jednak potrzebujesz większej elastyczności lub chcesz uzyskać czystszy interfejs, możesz również skopiować pliki statyczne bezpośrednio za pomocą my copy-webpack-plugin( npm , Github ). Dla Państwa staticna buildprzykład:

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

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

Jeśli chcesz skopiować pliki statyczne, możesz użyć modułu ładującego w następujący sposób:

dla plików HTML:

w pliku webpack.config.js:

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

w twoim pliku js:

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

./static/ odnosi się do położenia pliku js.

Możesz zrobić to samo z obrazami lub cokolwiek innego. Kontekst jest potężną metodą eksploracji !!

Jedną z zalet, o której wspomniana wtyczka copy-webpack-plug-in , która nie została wcześniej wyjaśniona, jest to, że wszystkie inne metody tu wymienione nadal łączą zasoby w pliki pakietu (i wymagają „gdzieś” lub „zaimportowania” ich gdzieś). Jeśli chcę po prostu przesuwać niektóre obrazy lub częściowe szablony, nie chcę zaśmiecać mojego pakietu javascript z bezużytecznymi odniesieniami do nich, chcę tylko, aby pliki były emitowane we właściwym miejscu. Nie znalazłem innego sposobu na zrobienie tego w pakiecie internetowym. Trzeba przyznać, że nie jest to, do czego pierwotnie przeznaczony był webpack, ale zdecydowanie jest to aktualny przypadek użycia. (@BreakDS Mam nadzieję, że to odpowiada na twoje pytanie - to tylko korzyść, jeśli chcesz)

Powyższe sugestie są dobre. Ale, aby spróbować bezpośrednio odpowiedzieć na twoje pytanie, sugerowałbym użycie cpy-cliw skrypcie zdefiniowanym w twoim package.json.

Ten przykład oczekuje nodegdzieś na twojej ścieżce. Zainstaluj cpy-clijako zależność programistyczną:

npm install --save-dev cpy-cli

Następnie utwórz kilka plików nodejs. Jeden wykonuje kopię, a drugi wyświetla znacznik wyboru i komunikat.

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;

Dodaj skrypt w package.json. Zakładając, że istnieją skrypty<project-root>/scripts/

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

Aby uruchomić sript:

npm run copy

Najprawdopodobniej powinieneś użyć CopyWebpackPlugin, który został wspomniany w odpowiedzi kevlened. Alternatywnie dla niektórych rodzajów plików, takich jak .html lub .json , można również użyć modułu ładującego raw lub modułu ładującego json. Zainstaluj go przez, npm install -D raw-loadera następnie wystarczy dodać kolejny moduł ładujący do naszego webpack.config.jspliku.

Lubić:

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

Uwaga: Zrestartuj serwer webpack-dev-server, aby zmiany konfiguracji zostały wprowadzone.

Teraz możesz wymagać plików HTML przy użyciu ścieżek względnych, co znacznie ułatwia przenoszenie folderów.

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

Sposób ładowania statycznego imagesi 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/'
          },
        }
    ]
}

Nie zapomnij zainstalować, file-loaderaby działał.

Możesz napisać bash w pakiecie.json:

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

Utknąłem tutaj również. Copy-webpack-plugin działał dla mnie.

Jednak „copy-webpack-plugin” nie był w moim przypadku konieczny (dowiedziałem się później).

webpack ignoruje
przykład ścieżek root

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

Aby więc działało to bez użycia „copy-webpack-plugin” użyj „~” w ścieżkach

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

„~” mówi webpackowi, aby traktował „obrazy” jako moduł

Uwaga: może być konieczne dodanie katalogu nadrzędnego katalogu obrazów w

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

Odwiedź https://vuejs-templates.github.io/webpack/static.html

Plik konfiguracyjny webpack (w webpack 2) pozwala wyeksportować łańcuch obietnic, o ile ostatni krok zwraca obiekt konfiguracyjny webpack. Zobacz dokumenty konfiguracji obietnicy . Stamtąd:

webpack obsługuje teraz zwracanie obietnicy z pliku konfiguracyjnego. Umożliwia to przetwarzanie asynchroniczne w pliku konfiguracyjnym.

Możesz utworzyć prostą funkcję kopiowania rekurencyjnego, która kopiuje plik i dopiero wtedy uruchamia pakiet WWW. Na przykład:

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

powiedzmy, że wszystkie zasoby statyczne znajdują się w folderze „statycznym” na poziomie głównym i chcesz je skopiować do folderu kompilacji, zachowując strukturę podfolderu, a następnie w pliku wejściowym)

//index.js or index.jsx

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