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

【问题标题】：How to add a public folder to react-boilerplate webpack config?如何将公共文件夹添加到 react-boilerplate webpack 配置？
【发布时间】：2019-05-06 14:29:49
【问题描述】：

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

提前致谢

【问题讨论】：

标签： reactjs webpack react-boilerplate

【解决方案1】：

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

安装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，它可能会覆盖生成的一个。

【讨论】：