웹 팩을 사용하여 정적 파일을 빌드 디렉토리에 복사하는 방법

웹 팩을 사용하여 정적 파일을 빌드 디렉토리에 복사하는 방법

는 지금 이 Gulp로로 합니다.WebpackGulp/static/ 폴더에서 /build/ 폴더로 모든 파일과 폴더를 복사하는 작업이 있습니다.에서 같은 작업을 수행하는 방법Webpack러그그 츠요시

파일 로더 모듈을 사용하여 자산을 요구하는 것이 웹 팩을 사용하는 방법입니다(소스).단, 뛰어난 유연성을 필요로 하거나 보다 깨끗한 인터페이스를 필요로 하는 경우,copy-webpack-plugin(npm, Github).고객님의static로로 합니다.build§:

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

---

호환성 노트:이전 버전의 웹 팩을 사용하는 경우webpack@4.x.x하다, 사용하다copy-webpack-plugin@6.x.x 최신 버전을 합니다. 이치노

웹 팩은 여러 가지를 복사할 필요가 없습니다. 웹 팩은 꿀꺽하는 것과 다릅니다.Webpack은 모듈번들러로 파일 내에서 참조하는 모든 내용이 포함됩니다.로더를 지정하기만 하면 됩니다.

다음과 같이 적습니다.

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

Webpack은 처음에 참조된 파일을 JavaScript로 해석하려고 합니다(기본값이 JavaScript이기 때문입니다).물론 그것은 실패할 것이다.따라서 해당 파일 유형에 대해 로더를 지정해야 합니다.예를 들어 file-loader 또는 url-loader는 참조된 파일을 가져와 웹 팩의 출력 폴더에 넣습니다(이 폴더는 다음과 같습니다).build【URL】【URL】

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

일반적으로 로더는 웹 팩 설정을 통해 적용됩니다.

// webpack.config.js

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

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

스태틱 파일을 카피하는 경우는, 다음의 방법으로 파일 로더를 사용할 수 있습니다.

html 파일의 경우:

webpack.config.config:

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 이 질문에 대한 답변이 있기를 바랍니다.필요한 경우에만 혜택입니다.)

Webpack 5는 일반적인 파일 로더의 대체품인 자산 모듈을 추가합니다.아래 문서의 관련 부분을 복사했습니다.

• asset/resource에는 URL 을 사용하여 수 .이전에는 를 사용하여 얻을 수 있었습니다.file-loader.
• asset/inlineURI를 사용하다한 것은 을 사용하여 수 .url-loader.
• asset/source에셋의 소스 코드를 내보냅니다.한 것은 을 사용하여 수 .raw-loader.
• asset는 데이터 URI를 내보내는 것과 개별 파일을 내보내는 것 중 하나를 자동으로 선택합니다.한 것은 을 사용하여 수 .url-loader자산 크기 제한이 있습니다.

에 1 을 추가하려면 , 다음과 같이 설정합니다.

// webpack.config.js

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

파일이 출력되는 방법을 제어하려면 템플릿 경로를 사용할 수 있습니다.

이 설정에서는 글로벌템플릿을 다음과 같이 설정할 수 있습니다.

// webpack.config.js
module.exports = {
    ...
    output: {
        ...
        assetModuleFilename: '[path][name].[hash][ext][query]'
    }
}

특정 자산 집합을 재정의하려면 다음을 수행합니다.

// webpack.config.js

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.(jpe?g|gif|png|svg|woff|ttf|wav|mp3)$/,
                type: "asset/resource"
                generator: {
                    filename: '[path][name].[hash][ext][query]'
                }
            }
        ]
    }
};

제공된 템플릿은 다음과 같은 파일 이름을 생성합니다.build/images/img.151cfcfa1bd74779aadb.png을 사용하다당신은 당신의 요구에를 수정해야 한다.

위 제안 좋다., 이 는 제가 사용하기를 cpy-cli되어 있습니다.package.json.

에서는 '예상하다'라고 합니다.node수명이 당신의 경로에.cpy-cli「 」 「 」 。

npm install --save-dev cpy-cli

그리고nodejs 파일의 커플을 만들었다.하나는 복사본을 하는 것이고 그는 checkmark과 메시지를 표시할 다른.

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

로드 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이 경우, 이 경우, 이 경우.

패키지에 bash 라고 쓸 수 있습니다.json:

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

대부분의 경우 Copy Web pack Plugin을 사용해야 합니다.Copy Web pack Plugin은 kevlened 답변에 기재되어 있습니다.대신 .html이나 .json과 같은 파일에는 raw-loader 또는 json-loader를 사용할 수도 있습니다.설치 방법npm install -D raw-loader 더 .webpack.config.jsfilename을 클릭합니다.

예를 들어 다음과 같습니다.

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

주의: webpack-dev-server 를 재기동하고, 설정 변경을 유효하게 합니다.

이제 상대 경로를 사용하여 html 파일이 필요하므로 폴더를 이동하기가 훨씬 쉬워졌습니다.

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

나도 여기 갇혔어.copy-web-pack-flashing이 효과가 있었어요.

다만, 제 경우는 「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 config 파일(webpack 2)을 사용하면 마지막 단계에서 webpack config 객체를 반환하는 한 약속 체인을 내보낼 수 있습니다.약속 설정 문서를 참조하십시오.여기서부터:

이제 webpack은 컨피규레이션파일에서 Promise를 반환할 수 있게 되었습니다.이를 통해 Configuration파일로 비동기 처리를 실행할 수 있습니다.

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

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

모든 정적 자산이 루트 레벨의 "static" 폴더에 있으며 하위 폴더 구조를 유지하는 빌드 폴더에 복사하고 엔트리 파일에 복사한다고 가정합니다.)

//index.js or index.jsx

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

파일의 저작권이 올바른 경우

이 스레드에 대한 궁극적인 솔루션과 그림 및 명령어 설명을 나타냅니다.

복사하는 동안 폴더가 덮어쓰여질 수 있으므로 폴더 오류가 나타납니다.

https://stackoverflow.com/a/72959857/4452831

언급URL : https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack