에서 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작동 하도록 설치 하는 것을 잊지 마십시오 .
