webpack - 如何使用Webpack复制目录？

Question

我一直在与Webpack一起尝试并理解它的工作原理，但是无论我做什么，在考虑文档和大量视频的内容之后，它似乎都并没有达到我的期望。

作为实现最终目标的第一步，我只想将./src目录中的所有文件复制到./dist目录中，并保持完整的文件夹结构。经过一番挖掘后，看来我的webpack.config.js规则中需要的是这样的东西(出于测试目的，我目前在源目录中只有html，css和js文件):

test: /\.(html|js|css)$/,
use: [
    {
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]'
        }
    }
]

现在在根目录中的 entry.js文件中，我有以下内容:

function requireAll (r) { r.keys().forEach(r); }
requireAll(require.context('./src/', true, /\.(html|js|css)$/));

...由于我的理解，我需要将所有要处理的文件导入到我的条目文件中，以便可以使用 file-loader将它们放置到新目录中。

通过此设置，运行webpack将创建一个dist文件夹，如下所示:

dist/
    chunk.js     <-- (the output filename set in my webpack config)
    entry.js     <-- (an exact duplicate of the entry file)

这显然不是我想要的。我不知道我是否只需要调整设置，或者我做错了什么。

Answer 1

您可以使用copy webpack plugin。
npm install --save-dev copy-webpack-plugin
编辑您的webpack.config.js文件:

//Add a plugin declaration at the begining of file
const CopyWebpackPlugin = require('copy-webpack-plugin');

//...

//search (or create) the plugin array. 
plugins: [
    // ...
    // Add your plugin
    new CopyWebpackPlugin([

        // Copy directory contents to {output}/to/directory/
        //{ from: 'from/directory', to: 'to/directory' },
        { from: 'src', to: 'dist' },
    ]
  ],

文档中有很多简单的 examples