如何用WebPack复制静态文件构建目录？

Question

我正在尝试从gulp转移到webpack。在gulp中，我有一个任务，将所有文件和文件夹从/statig/folder复制到/build/folder。如何对webpack执行同样的操作？我需要一些插件吗？

Answer 1

您不需要复制周围的东西，webpack的工作方式不同于gulp。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'

// webpack.config.js

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