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

Question

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

提前致谢

Answer 1

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

安装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 文件夹。

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

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

How to add a public folder to react-boilerplate webpack config?

reactjs

webpack

react-boilerplate