如何复制静态文件以使用Webpack构建目录？

javascript webpack

2022-08-29 23:26:24

我正在尝试从移动到 .在我有任务，将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何做同样的事情？我需要一些插件吗？GulpWebpackGulpWebpack

答案 1

要求使用文件加载器模块的资产是 webpack 的使用方式（源）。但是，如果您需要更大的灵活性或想要更干净的界面，您也可以直接使用my（npm，Github）复制静态文件。例如：copy-webpack-pluginstaticbuild

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

兼容性说明：如果您使用的是旧版本的 webpack，请使用。否则使用最新。webpack@4.x.xcopy-webpack-plugin@6.x.x

答案 2

你不需要复制东西，webpack的工作方式与gulp不同。Webpack是一个模块捆绑器，您在文件中引用的所有内容都将包含在内。您只需要为此指定一个加载程序。

所以如果你写：

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

Webpack将首先尝试将引用的文件解析为JavaScript（因为这是默认设置）。当然，这将失败。这就是为什么您需要为该文件类型指定加载程序的原因。例如，文件或 url 加载程序获取引用的文件，将其放入 webpack 的输出文件夹（应该在您的案例中），然后返回该文件的散列 url。build

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" }
        ]
    }
};

当然，您需要先安装文件加载程序才能实现此目的。