reactjs - 如何将公共(public)文件夹添加到react-boilerplate webpack配置中？

Question

我正在使用 React 及其样板 react-boilerplate 设置一个新的 Web 应用程序。现在我想在根目录中添加一个公共(public)文件夹，其中包含index.html以及robot.txt .htaccess文件和一些外部js库。有人可以指导我编辑 webpack 配置文件以使其表现得像这样吗？

提前致谢

Answer 1

您可以使用copy-webpack-plugin将文件从公共(public)文件夹复制到构建文件夹。执行后续步骤以使其正常工作:

1. 安装copy-webpack-plugin :

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

在/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',
            },
        ]),
  ]),

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

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