时间戳

首页 > 解决方案 > 如何将公共文件夹添加到 react-boilerplate webpack 配置？

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

问题描述

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

提前致谢

标签： reactjswebpackreact-boilerplate

解决方案

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

  1. 安装copy-webpack-plugin：
npm i copy-webpack-plugin --save-dev
  1. 在 /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',
            },
        ]),
  ]),
  1. 现在您可以public在源根目录中创建文件夹，并且该文件夹中的所有文件都将复制到build文件夹中。

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

推荐阅读