Làm cách nào để sao chép tệp tĩnh để xây dựng thư mục với Webpack?

Tôi đang cố gắng chuyển từ Gulpsang Webpack. Trong Gulptôi có nhiệm vụ sao chép tất cả các tệp và thư mục từ / static / thư mục sang / build / thư mục. Làm thế nào để làm điều tương tự với Webpack? Tôi có cần một số plugin không?

Bạn không cần phải sao chép mọi thứ xung quanh, webpack hoạt động khác với gulp. Webpack là một gói mô-đun và mọi thứ bạn tham chiếu trong tệp của bạn sẽ được bao gồm. Bạn chỉ cần xác định một trình tải cho điều đó.

Vì vậy, nếu bạn viết:

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

Trước tiên, Webpack sẽ cố phân tích tệp được tham chiếu là JavaScript (vì đó là mặc định). Tất nhiên, điều đó sẽ thất bại. Đó là lý do tại sao bạn cần chỉ định một trình tải cho loại tệp đó. Ví dụ, tệp - hoặc trình tải url lấy tệp được tham chiếu, đặt nó vào thư mục đầu ra của webpack (cần có buildtrong trường hợp của bạn) và trả về url được băm cho tệp đó.

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

Thông thường các trình tải được áp dụng thông qua cấu hình webpack:

// webpack.config.js

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

Tất nhiên bạn cần cài đặt trình tải tập tin trước để thực hiện công việc này.

Yêu cầu tài sản bằng cách sử dụng mô-đun trình tải tệp là cách webpack được sử dụng ( nguồn ). Tuy nhiên, nếu bạn cần linh hoạt hơn hoặc muốn có giao diện sạch hơn, bạn cũng có thể sao chép trực tiếp các tệp tĩnh bằng cách sử dụng copy-webpack-plugin( npm , Github ) của tôi. Để tiện staticcho buildví dụ:

const CopyWebpackPlugin = require('copy-webpack-plugin');

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

Nếu bạn muốn sao chép các tệp tĩnh của mình, bạn có thể sử dụng trình tải tệp theo cách này:

cho các tệp html:

trong webpack.config.js:

module.exports = {
    ...
    module: {
        loaders: [
            { test: /\.(html)$/,
              loader: "file?name=[path][name].[ext]&context=./app/static"
            }
        ]
    }
};

trong tập tin js của bạn:

  require.context("./static/", true, /^\.\/.*\.html/);

./static/ liên quan đến vị trí tệp js của bạn.

Bạn có thể làm tương tự với hình ảnh hoặc bất cứ điều gì. Bối cảnh là một phương pháp mạnh mẽ để khám phá !!

Một lợi thế mà plugin-webpack-plugin đã nói ở trên chưa được giải thích trước đó là tất cả các phương pháp khác được đề cập ở đây vẫn gói tài nguyên vào các tệp bó của bạn (và yêu cầu bạn "yêu cầu" hoặc "nhập" chúng ở đâu đó). Nếu tôi chỉ muốn di chuyển một số hình ảnh xung quanh hoặc một số phần mẫu, tôi không muốn làm lộn xộn tệp gói javascript của mình với các tham chiếu vô dụng đến chúng, tôi chỉ muốn các tệp được phát ra ở đúng nơi. Tôi không tìm thấy cách nào khác để làm điều này trong webpack. Phải thừa nhận rằng đó không phải là gói web ban đầu được thiết kế cho, nhưng đây chắc chắn là trường hợp sử dụng hiện tại. (@BreakDS Tôi hy vọng điều này trả lời câu hỏi của bạn - nó chỉ là một lợi ích nếu bạn muốn nó)

Trên đề xuất là tốt. Nhưng để cố gắng trả lời trực tiếp câu hỏi của bạn, tôi khuyên bạn nên sử dụng cpy-clitập lệnh được xác định trong package.json.

Ví dụ này mong đợi nodeở đâu đó trên con đường của bạn. Cài đặt cpy-clinhư một phụ thuộc phát triển:

npm install --save-dev cpy-cli

Sau đó tạo một vài tập tin nodejs. Một để làm bản sao và cái còn lại để hiển thị một dấu kiểm và thông báo.

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;

Thêm tập lệnh vào package.json. Giả sử tập lệnh là trong<project-root>/scripts/

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

Để chạy sript:

npm run copy

Nhiều khả năng bạn nên sử dụng CopyWebpackPlugin đã được đề cập trong câu trả lời kevlened. Thay thế cho một số loại tệp như .html hoặc .json, bạn cũng có thể sử dụng trình tải thô hoặc trình tải json. Cài đặt nó qua npm install -D raw-loadervà sau đó những gì bạn chỉ cần làm là thêm một trình tải khác vào webpack.config.jstệp của chúng tôi .

Giống:

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

Lưu ý: Khởi động lại webpack-dev-server để mọi thay đổi cấu hình có hiệu lực.

Và bây giờ bạn có thể yêu cầu các tệp html bằng cách sử dụng các đường dẫn tương đối, điều này giúp việc di chuyển các thư mục xung quanh dễ dàng hơn nhiều.

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

Cách tôi tải tĩnh imagesvà 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/'
          },
        }
    ]
}

Đừng quên cài đặt file-loaderđể làm việc đó.

Bạn có thể viết bash trong gói.json của bạn:

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

Tôi cũng bị kẹt ở đây. copy-webpack-plugin làm việc cho tôi.

Tuy nhiên, 'copy-webpack-plugin' không cần thiết trong trường hợp của tôi (tôi đã học sau).

webpack bỏ qua
ví dụ đường dẫn gốc

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

Do đó, để làm cho công việc này hoạt động mà không cần sử dụng 'copy-webpack-plugin', hãy sử dụng '~' trong đường dẫn

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

'~' yêu cầu webpack coi 'hình ảnh' là một mô-đun

lưu ý: bạn có thể phải thêm thư mục mẹ của thư mục hình ảnh trong

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

Truy cập https://vuejs-temsheet.github.io/webpack/static.html

Tệp cấu hình webpack (trong webpack 2) cho phép bạn xuất chuỗi hứa hẹn, miễn là bước cuối cùng trả về một đối tượng cấu hình webpack. Xem tài liệu cấu hình hứa hẹn . Từ đó:

webpack hiện hỗ trợ trả lại một Promise từ tệp cấu hình. Điều này cho phép thực hiện xử lý async trong tệp cấu hình của bạn.

Bạn có thể tạo một chức năng sao chép đệ quy đơn giản sao chép tệp của mình và chỉ sau khi kích hoạt gói web. Ví dụ:

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

giả sử tất cả các tài sản tĩnh của bạn nằm trong một thư mục "tĩnh" ở cấp gốc và bạn muốn sao chép chúng vào thư mục xây dựng để duy trì cấu trúc của thư mục con, sau đó trong tệp nhập của bạn) chỉ cần đặt

//index.js or index.jsx

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