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

假设您所有的静态资产都位于根级别的“静态”文件夹中，并且您想将其复制到维护子文件夹结构的build文件夹中，然后将其复制到条目文件中）

//index.js or index.jsx

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

您可以在package.json中编写bash：

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

webpack配置文件（在webpack 2中）允许您导出承诺链，只要最后一步返回webpack配置对象即可。请参阅Promise配置文档。从那里：

webpack现在支持从配置文件返回Promise。这允许在配置文件中进行异步处理。

您可以创建一个简单的递归复制功能来复制文件，并且仅在此之后触发webpack。例如：

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

前面没有提到的copy-webpack-plugin带来的一个好处是，这里提到的所有其他方法仍然将资源捆绑到捆绑文件中（并要求您“需要”或“将其导入”某处）。如果我只想移动一些图像或某些模板部分，我不想用无用的引用弄乱我的javascript捆绑文件，而只想在正确的位置发出这些文件。我还没有在webpack中找到其他方法来做到这一点。诚然，这并不是webpack最初设计的目的，但绝对是当前的用例。（@BreakDS，我希望这能回答您的问题-如果您愿意，这只是一种好处）

如果要复制静态文件，则可以通过以下方式使用文件加载器：

对于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文件所在的位置。

您可以对图像或其他内容进行相同的操作。上下文是探索的强大方法！