Question

我一直在玩Webpack试图理解它是如何工作的，但无论我做什么，似乎从来没有像我期望的那样考虑文档和众多视频似乎在说什么。

作为实现我的最终目标的第一步，我只想将./src目录中的所有文件复制到./dist目录，维护完整的文件夹结构。经过一些挖掘后，似乎我需要的是{my} 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

Answer 2

webpack的目的是你不应该像你说的那样自己复制文件。例如，如果您尝试从＆＃39; ./ src＆＃39;到＆＃39; ./ dist＆＃39;你已经走错了路。：P谷歌周围的一些＆＃34; web pack启动项目＆＃34;。让其中一个让你工作配置。然后从那里开始，积累起来。从头开始将有点棘手。如果你有充分的理由复制文件，我可以告诉你一个webpack插件，但我认为你不需要它。

这是一个使用插件的文件（我的项目）：

https://github.com/Clay-Ferguson/meta64/blob/master/src/main/resources/public/webpack.config.js

我没有使用＆＃39;文件副本＆＃39;插件，但我正在使用＆＃39; webpack-shell-plugin＆＃39;这是强大的，因为它可以让你在构建之前和/或之后运行你想要的任何脚本。

如何使用Webpack复制目录？

2 个答案: