如何将公共文件夹添加到 react-boilerplate webpack 配置？

Question

我正在使用 react 和它的样板react-boilerplate设置一个新的网络应用程序。现在我想在包含 index.html 以及 robots.txt .htaccess 文件和一些外部 js 库的根目录中添加一个公共文件夹。有人可以指导我编辑 webpack 配置文件以使其行为如此。

提前致谢

Answer 1

您可以使用copy-webpack-plugin将文件从公共文件夹复制到您的构建文件夹。执行以下步骤以使其正常工作：

1. 安装copy-webpack-plugin：

npm i copy-webpack-plugin --save-dev

2. 在 /internals/webpack 中编辑 webpack.base.babel.js：

const path = require('path');
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin'); <-- import plugin

module.exports = options => ({
    ...
    plugins: options.plugins.concat([
        ...
        new CopyWebpackPlugin([ <-- add plugin 
            {
                from: 'public',
            },
        ]),
  ]),

3. 现在您可以public在源根目录中创建文件夹，并且该文件夹中的所有文件都将复制到build文件夹中。

重要的！您已经有了由 HtmlWebpackPlugin 从 /app/index.html 模板生成的 index.html。如果您在public文件夹中创建了 index.html ，它可能会覆盖生成的一个。