静的ファイルをWebpackでビルドディレクトリにコピーする方法は？

からに移動しようとしGulpていWebpackます。でGulp、私はそのコピーからすべてのファイルとフォルダのタスク持た/静的/フォルダへ/ビルド/フォルダを。同じようにするにはどうすればよいWebpackですか？プラグインは必要ですか？

Webpackの動作はgulpとは異なります。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設定を介して適用されます：

// 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-pluginがもたらす利点の1つは、これまでに説明されていないことですが、ここで説明する他のすべての方法では、リソースをバンドルファイルにバンドルします（また、どこかにリソースを「要求」または「インポート」する必要があります）。一部の画像やテンプレートの部分テンプレートを移動するだけの場合は、JavaScriptバンドルファイルを不要な参照で乱雑にしたくないので、ファイルを適切な場所に出力します。これをwebpackで行う他の方法は見つかりませんでした。確かに、それは本来webpackが設計されたものではありませんが、間違いなく現在のユースケースです。（@BreakDSこれがあなたの質問に答えることを願っています-あなたがそれを望むならそれだけが利益です）

上記の提案は良いです。しかし、あなたの質問に直接答えようとするためにcpy-cli、あなたので定義されたスクリプトで使用することをお勧めしますpackage.json。

この例ではnode、パスのどこかに期待しています。cpy-cli開発依存関係としてインストールします。

npm install --save-dev cpy-cli

次に、いくつかのnodejsファイルを作成します。1つはコピーを行い、もう1つはチェックマークとメッセージを表示します。

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

おそらくあなたはkevlened answerで言及されたCopyWebpackPluginを使うべきです。代わりに、.htmlや.jsonなどのある種のファイルでは、raw-loaderまたはjson-loaderを使用することもできます。を介してインストールしてnpm install -D raw-loaderから、webpack.config.jsファイルに別のローダーを追加するだけです。

お気に入り：

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

注：構成の変更を有効にするには、webpack-dev-serverを再起動します。

そして、相対パスを使用してhtmlファイルを要求できるようになりました。これにより、フォルダの移動がはるかに簡単になります。

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

方法I荷重静的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それを機能させるためにインストールすることを忘れないでください。

あなたはpackage.jsonにbashを書くことができます：

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

私もここで行き詰まりました。copy-webpack-pluginがうまくいきました。

ただし、私の場合は「copy-webpack-plugin」は必要ありませんでした（後で学習しました）。

webpackがルートパスを無視する
例

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

したがって、「copy-webpack-plugin」を使用せずにこれを機能させるには、パスで「〜」を使用します

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

'〜'は 'packets'をモジュールと見なすようにwebpackに指示します

注：画像ディレクトリの親ディレクトリを

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

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

（webpack 2の）webpack構成ファイルを使用すると、最後のステップでwebpack構成オブジェクトが返される限り、promiseチェーンをエクスポートできます。promise configuration docsを参照してください。そこから：

webpackが設定ファイルからPromiseを返すことをサポートするようになりました。これにより、構成ファイルで非同期処理を実行できます。

ファイルをコピーする単純な再帰的コピー関数を作成し、その後にのみ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, /^\.\/.*\.*/);