Bagaimana cara menyalin file statis untuk membangun direktori dengan Webpack?

Saya mencoba untuk pindah dari Gulpke Webpack. Di GulpSaya punya tugas yang menyalin semua file dan folder dari / static / folder ke / build / folder. Bagaimana caranya melakukan hal yang sama Webpack? Apakah saya memerlukan plugin?

Anda tidak perlu menyalin banyak hal, webpack bekerja berbeda dari tegukan. Webpack adalah bundler modul dan semua yang Anda rujuk dalam file Anda akan disertakan. Anda hanya perlu menentukan loader untuk itu.

Jadi, jika Anda menulis:

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

Webpack pertama-tama akan mencoba mem-parsing file yang direferensikan sebagai JavaScript (karena itu defaultnya). Tentu saja itu akan gagal. Itu sebabnya Anda perlu menentukan loader untuk tipe file itu. The File - atau url-loader misalnya mengambil file direferensikan, memasukkannya ke dalam folder output Webpack (yang harus builddalam kasus Anda) dan mengembalikan url hash untuk file itu.

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

Biasanya loader diterapkan melalui konfigurasi webpack:

// webpack.config.js

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

Tentu saja Anda perlu menginstal file-loader terlebih dahulu untuk membuat ini berfungsi.

Membutuhkan aset menggunakan modul file-loader adalah cara webpack dimaksudkan untuk digunakan ( sumber ). Namun, jika Anda membutuhkan fleksibilitas yang lebih besar atau ingin antarmuka yang lebih bersih, Anda juga dapat menyalin file statis langsung menggunakan saya copy-webpack-plugin( NPM , Github ). Untuk Anda staticke buildcontoh:

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

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

Jika Anda ingin menyalin file statis, Anda dapat menggunakan pemuat file dengan cara ini:

untuk file html:

di webpack.config.js:

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

dalam file js Anda:

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

./static/ adalah relatif ke tempat file js Anda.

Anda dapat melakukan hal yang sama dengan gambar atau apa pun. Konteksnya adalah metode yang ampuh untuk dijelajahi !!

Satu keuntungan yang dibawa oleh copy-webpack-plugin yang belum dijelaskan sebelumnya adalah bahwa semua metode lain yang disebutkan di sini masih membundel sumber daya ke dalam file bundel Anda (dan mengharuskan Anda untuk "mengharuskan" atau "mengimpor" mereka di suatu tempat). Jika saya hanya ingin memindahkan beberapa gambar di sekitar atau sebagian parsial template, saya tidak ingin mengacaukan file bundel javascript saya dengan referensi yang tidak berguna untuk mereka, saya hanya ingin file dipancarkan di tempat yang tepat. Saya belum menemukan cara lain untuk melakukan ini di webpack. Diakui itu bukan apa webpack awalnya dirancang untuk, tapi itu pasti kasus penggunaan saat ini. (@BreakDS Saya harap ini menjawab pertanyaan Anda - itu hanya menguntungkan jika Anda menginginkannya)

Saran di atas bagus. Tetapi untuk mencoba menjawab pertanyaan Anda secara langsung, saya sarankan untuk menggunakan cpy-cliskrip yang ditentukan dalam package.json.

Contoh ini mengharapkan nodesuatu tempat di jalur Anda. Instal cpy-clisebagai ketergantungan pengembangan:

npm install --save-dev cpy-cli

Kemudian buat beberapa file nodejs. Satu untuk melakukan penyalinan dan yang lainnya untuk menampilkan tanda centang dan pesan.

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;

Tambahkan skrip di package.json. Dengan asumsi skrip berada dalam<project-root>/scripts/

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

Untuk menjalankan sript:

npm run copy

Kemungkinan besar Anda harus menggunakan CopyWebpackPlugin yang disebutkan dalam jawaban kevlened. Atau untuk beberapa jenis file seperti .html atau .json, Anda juga dapat menggunakan pemuat mentah atau pemuat json. Instal via npm install -D raw-loaderdan kemudian yang perlu Anda lakukan adalah menambahkan loader lain ke webpack.config.jsfile kami .

Suka:

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

Catatan: Mulai ulang webpack-dev-server agar perubahan konfigurasi diterapkan.

Dan sekarang Anda dapat memerlukan file html menggunakan jalur relatif, ini membuatnya lebih mudah untuk memindahkan folder.

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

Cara saya memuat statis imagesdan 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/'
          },
        }
    ]
}

Jangan lupa untuk menginstal file-loaderagar berfungsi.

Anda dapat menulis bash di package.json Anda:

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

Saya terjebak di sini juga. copy-webpack-plugin bekerja untuk saya.

Namun, 'copy-webpack-plugin' tidak diperlukan dalam kasus saya (saya pelajari nanti).

webpack mengabaikan
contoh path root

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

Oleh karena itu, untuk membuatnya bekerja tanpa menggunakan 'copy-webpack-plugin' gunakan '~' di jalur

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

'~' memberi tahu webpack untuk mempertimbangkan 'gambar' sebagai modul

Catatan: Anda mungkin harus menambahkan direktori induk direktori gambar di

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

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

File konfigurasi webpack (di webpack 2) memungkinkan Anda untuk mengekspor rantai janji, selama langkah terakhir mengembalikan objek konfigurasi webpack. Lihat dokumen konfigurasi janji . Dari sana:

webpack sekarang mendukung pengembalian Janji dari file konfigurasi. Ini memungkinkan untuk melakukan pemrosesan async dalam file konfigurasi Anda.

Anda dapat membuat fungsi salin rekursif sederhana yang menyalin file Anda, dan hanya setelah itu memicu webpack. Misalnya:

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

katakanlah semua aset statis Anda berada di folder "statis" di tingkat root dan Anda ingin menyalinnya ke folder build yang mempertahankan struktur subfolder, lalu di file entri Anda) cukup masukkan

//index.js or index.jsx

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