Webpack으로 디렉토리를 빌드하기 위해 정적 파일을 복사하는 방법은 무엇입니까?

에서 Gulp로 이동하려고 합니다 Webpack. 에서 Gulp나는 복사하는 모든 파일 및 폴더 작업이 / 정적 / 폴더 / 구축 / 폴더에 있습니다. 어떻게 Webpack합니까? 플러그인이 필요합니까?

당신은 주위에 물건을 복사 할 필요가 없습니다. Webpack은 모듈 번 들러이며 파일에서 참조하는 모든 것이 포함됩니다. 로더를 지정하기 만하면됩니다.

그래서 당신이 쓰는 경우 :

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

Webpack은 먼저 참조 파일을 JavaScript로 구문 분석하려고 시도합니다 (기본값이므로). 물론, 그것은 실패 할 것입니다. 따라서 해당 파일 형식에 대한 로더를 지정해야합니다. 파일 - 또는 URL 로더 예를 들면은, 참조 된 파일을 웹팩의 출력 폴더에 넣어 (수 있어야하는 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" }
        ]
    }
};

물론이 작업을 수행하려면 먼저 파일 로더를 설치해야합니다.

파일 로더 모듈을 사용하여 자산을 요구하는 것은 웹팩이 사용되는 방식입니다 ( source ). 그러나 더 큰 유연성이 필요하거나 더 깨끗한 인터페이스를 원한다면 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 의 이점 중 하나 는 여기에 언급 된 다른 모든 방법이 여전히 리소스를 번들 파일에 번들링한다는 것입니다. 일부 이미지 또는 일부 템플릿 부분을 옮기고 싶다면 Javascript 번들 파일을 쓸모없는 참조로 어지럽히고 싶지 않고 파일이 올바른 위치에 방출되기를 원합니다. 웹팩에서 다른 방법을 찾지 못했습니다. 분명히 웹팩은 원래 설계된 것이 아니라 확실히 현재 사용 사례입니다. (@BreakDS이 질문에 대한 답변이 되었기를 바랍니다. 원하는 경우에만 도움이됩니다)

위의 제안이 좋습니다. 그러나 귀하의 질문에 직접 대답하려면에 cpy-cli정의 된 스크립트를 사용 하는 것이 좋습니다 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;

에 스크립트를 추가하십시오 package.json. 스크립트가 있다고 가정<project-root>/scripts/

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

sript를 실행하려면

npm run copy

대부분의 경우 당신은 kevlened 답변에서 언급 된 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'>

'~'는 '이미지'를 모듈로 고려하도록 웹팩에 지시합니다.

참고 : 이미지 디렉토리의 상위 디렉토리를 추가해야 할 수도 있습니다.

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

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

webpack 구성 파일 (webpack 2에 있음)을 사용하면 마지막 단계에서 webpack 구성 객체를 반환하는 한 promise 체인을 내보낼 수 있습니다. 약속 구성 문서를 참조하십시오 . 거기에서:

webpack은 이제 구성 파일에서 Promise 반환을 지원합니다. 이를 통해 구성 파일에서 비동기 처리를 수행 할 수 있습니다.

파일을 복사하는 간단한 재귀 복사 기능을 만들 수 있으며 그 후에 만 ​​웹팩을 트리거 할 수 있습니다. 예 :

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, /^\.\/.*\.*/);