วิธีคัดลอกไฟล์คงที่เพื่อสร้างไดเรกทอรีด้วย Webpack

ฉันพยายามที่จะย้ายจากไปGulp WebpackในGulpฉันมีงานที่คัดลอกไฟล์และโฟลเดอร์ทั้งหมดจาก/ คงที่ /โฟลเดอร์ไปที่/ สร้าง /โฟลเดอร์ วิธีการทำเช่นเดียวกันกับWebpack? ฉันต้องการปลั๊กอินไหม

คุณไม่จำเป็นต้องคัดลอกสิ่งต่าง ๆ webpack ทำงานต่างจากอึก 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'

โดยทั่วไปแล้ว loader จะถูกนำไปใช้ผ่านการกำหนดค่า webpack:

// webpack.config.js

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

แน่นอนคุณต้องติดตั้งตัวโหลดไฟล์ก่อนเพื่อให้สามารถใช้งานได้

เนื้อหาที่ต้องการโดยใช้โมดูลตัวโหลดไฟล์เป็นวิธีที่ 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([
            { 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 บันเดิลของฉันยุ่งเหยิงโดยไม่มีการอ้างอิงถึงพวกเขาฉันแค่ต้องการให้ไฟล์ที่ถูกปล่อยออกมาถูกที่แล้ว ฉันไม่พบวิธีอื่นในการทำ webpack เป็นที่ยอมรับว่าไม่ใช่สิ่งที่ออกแบบมาสำหรับ webpack แต่เป็นกรณีการใช้งานในปัจจุบัน (@BreakDS ฉันหวังว่านี่จะตอบคำถามของคุณ - มันจะเป็นประโยชน์ถ้าคุณต้องการ)

คำแนะนำข้างต้นเป็นสิ่งที่ดี แต่การที่จะพยายามที่จะตอบคำถามของคุณโดยตรงผมขอแนะนำให้ใช้ในสคริปต์ที่กำหนดไว้ในของคุณcpy-clipackage.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

เป็นไปได้มากว่าคุณควรใช้ 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')  

วิธีที่ฉันโหลดคงที่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 ใน package.json ของคุณ:

# 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' use '~' ในพา ธ

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

'~' บอกให้ webpack พิจารณา 'images' เป็นโมดูล

หมายเหตุ: คุณอาจต้องเพิ่มไดเรกทอรีหลักของไดเรกทอรีรูปภาพใน

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

เยี่ยมชมhttps://vuejs-templates.github.io/webpack/static.html

ไฟล์กำหนดค่า webpack (ใน webpack 2) ให้คุณส่งออกเครือสัญญาได้ตราบใดที่ขั้นตอนสุดท้ายส่งคืนวัตถุกำหนดค่า webpack ดูเอกสารการกำหนดค่าสัญญา จากที่นั่น:

ตอนนี้ webpack สนับสนุนการคืนสัญญาจากไฟล์การกำหนดค่า สิ่งนี้อนุญาตให้ทำการประมวลผล async ในไฟล์กำหนดค่าของคุณ

คุณสามารถสร้างฟังก์ชั่นการคัดลอกซ้ำแบบง่ายๆที่คัดลอกไฟล์ของคุณและหลังจากนั้นจะทริกเกอร์ 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, /^\.\/.*\.*/);