Webpack ile dizin oluşturmak için statik dosyalar nasıl kopyalanır?

Ben den hareket etmeye çalışıyorum Gulpiçin Webpack. İçinde Gulptüm dosyaları ve klasörleri / static / klasöründen / build / klasörüne kopyalayan görevim var. Aynı şey nasıl yapılır Webpack? Eklentiye ihtiyacım var mı?

Bir şeyleri kopyalamanıza gerek yok, webpack yıpranmadan farklı çalışır. Webpack bir modül paketleyicisidir ve dosyalarınızda referans verdiğiniz her şey dahil edilecektir. Bunun için bir yükleyici belirtmeniz yeterlidir.

Eğer yazarsanız:

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

Webpack önce başvurulan dosyayı JavaScript olarak ayrıştırmaya çalışır (çünkü bu varsayılan değerdir). Tabii ki, bu başarısız olacak. Bu nedenle, bu dosya türü için bir yükleyici belirtmeniz gerekir. Dosya - veya url-yükleyici , örneğin başvurulan dosyayı almak WebPack çıkış klasörüne yerleştirin (olması gereken buildsizin durumunuzda) ve bu dosya için karma url dönün.

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

Genellikle yükleyiciler webpack yapılandırmasıyla uygulanır:

// webpack.config.js

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

Elbette, bu işi yapabilmek için önce dosya yükleyiciyi kurmanız gerekir.

Dosya yükleyici modülünü kullanarak varlıklara gereksinim duymak, web paketinin kullanılması için tasarlanan yoldur ( kaynak ). Ancak, daha fazla esnekliğe ihtiyacınız varsa veya daha temiz bir arayüz istiyorsanız, statik dosyaları doğrudan copy-webpack-plugin( npm , Github ) kullanarak kopyalayabilirsiniz . Senin için statichiç buildÖrneğin:

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

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

Statik dosyalarınızı kopyalamak istiyorsanız dosya yükleyiciyi şu şekilde kullanabilirsiniz:

html dosyaları için:

webpack.config.js dosyasında:

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

js dosyanızda:

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

./static/, js dosyanızın bulunduğu yere göredir.

Aynı şeyi görüntülerle veya her neyse yapabilirsiniz. Bağlam keşfetmek için güçlü bir yöntemdir !!

Yukarıda belirtilen copy-webpack-plugin'in daha önce açıklanmadığı bir avantajı, burada belirtilen diğer tüm yöntemlerin hala kaynakları paket dosyalarınıza paketlemesidir (ve bunları bir yere "gerektirmenizi" veya "içe aktarmanızı" gerektirir). Sadece bazı görüntüleri veya bazı şablon parçalarını hareket ettirmek istersem, javascript paket dosyamı onlara gereksiz bir referansla karıştırmak istemiyorum, sadece dosyaların doğru yerde yayınlanmasını istiyorum. Bunu web paketinde yapmanın başka bir yolunu bulamadım. Kuşkusuz, webpack başlangıçta bunun için tasarlanmamıştı, ancak kesinlikle güncel bir kullanım durumu. (@BreakDS Umarım bu soruya cevap verir - bu sadece istersen fayda sağlar)

Yukarıdaki öneriler iyidir. Ancak sorunuzu doğrudan yanıtlamaya çalışmak için cpy-cli, sizin tanımladığınız bir komut dosyasında kullanmanızı öneririm package.json.

Bu örnek yolunuzda bir yer bekliyor node. cpy-cliGeliştirme bağımlılığı olarak yükleyin :

npm install --save-dev cpy-cli

Sonra birkaç nodejs dosyası oluşturun. Biri kopyayı, diğeri bir onay işareti ve mesajı görüntülemek için.

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;

Komut dosyasını içine ekleyin package.json. Komut dosyalarının var olduğu varsayılarak<project-root>/scripts/

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

Komut dosyasını çalıştırmak için:

npm run copy

Büyük olasılıkla kevlened cevabında belirtilen CopyWebpackPlugin'i kullanmalısınız. Alternatif olarak .html veya .json gibi bazı dosyalar için ham yükleyici veya json yükleyici de kullanabilirsiniz. Aracılığıyla yükleyin npm install -D raw-loaderve tek yapmanız gereken webpack.config.jsdosyamıza başka bir yükleyici eklemek .

Sevmek:

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

Not: Yapılandırma değişikliklerinin etkili olması için webpack-dev-server'ı yeniden başlatın.

Ve şimdi göreli yolları kullanarak html dosyalarına ihtiyaç duyabilirsiniz, bu klasörlerin taşınmasını çok daha kolay hale getirir.

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

Statik yükleme şekli imagesve 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Çalışması için yüklemeyi unutmayın .

Paketinize bash yazabilirsiniz. Json:

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

Ben de burada takılıp kaldım. copy-webpack-plugin benim için çalıştı.

Ancak, benim durumumda 'copy-webpack-plugin' gerekli değildi (daha sonra öğrendim).

webpack kök yolları
örneğini yok sayar

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

Bu nedenle, bu işi yollarda 'copy-webpack-plugin' use '~' kullanmadan yapmak için

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

'~' web paketine 'resimleri' modül olarak kabul etmesini söyler

not: resim dizininin üst dizinini

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

Https://vuejs-templates.github.io/webpack/static.html adresini ziyaret edin

Webpack yapılandırma dosyası (webpack 2'de), son adım bir webpack config nesnesi döndürdüğü sürece bir söz zincirini dışa aktarmanıza olanak tanır. Vaat yapılandırma belgelerine bakın . Buradan:

webpack artık yapılandırma dosyasından bir Söz döndürmeyi destekliyor. Bu, yapılandırma dosyanızda zaman uyumsuz işlemeye izin verir.

Dosyanızı kopyalayan basit bir özyinelemeli kopyalama işlevi oluşturabilirsiniz ve ancak bundan sonra web paketi tetiklenir. Örneğin:

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

diyelim ki tüm statik varlıklarınız kök düzeyinde "statik" bir klasörde ve bunları alt klasörün yapısını koruyan yapı klasörüne, ardından giriş dosyanıza kopyalamak istiyorsunuz)

//index.js or index.jsx

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