问无法在webpack的开发模式下加载公用文件夹中的资产
EN

Stack Overflow用户

提问于 2021-05-07 18:26:38

回答 1查看 37关注 0票数 0

我是新来的webpack。在开发模式下，我正在尝试访问src文件夹之外的资产文件。我在互联网上找到的唯一解决方案就是使用拷贝-webpack-插件。但我认为这是为了构建。但是因为我处于开发模式，所以所有的东西都会加载到内存中。我可能错了。这是我现在的文件结构，File Sturcutre

我正在尝试访问index.html中的这些文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="Fuse React - Material design admin template with pre-built apps and pages" />
        <meta
            name="keywords"
            content="React,Redux,Material UI Next,Material,Material Design,Google Material Design,HTML,CSS,Firebase,Authentication,Material Redux Theme,Material Redux Template"
        />
        <meta name="author" content="Withinpixels" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="theme-color" content="#000000" />
        <base href

        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />

        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsOutlined.css" rel="stylesheet" />
        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIcons.css" rel="stylesheet">-->
        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsRound.css" rel="stylesheet">-->
        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsSharp.css" rel="stylesheet">-->
        <!--        <link href="%PUBLIC_URL%/assets/fonts/material-design-icons/MaterialIconsTwoTone.css" rel="stylesheet">-->

        <link href="%PUBLIC_URL%/assets/fonts/meteocons/style.css" rel="stylesheet" />

        <noscript id="jss-insertion-point"></noscript>
        <title>Fuse React - Material Design Admin Template</title>
    </head>
    <body>
        <noscript> You need to enable JavaScript to run this app. </noscript>
        <div id="root" class="flex">
            <!-- FUSE Splash Screen -->
            <div id="fuse-splash-screen">
                <div class="center">
                    <div class="logo">
                        <img width="128" src="assets/images/logos/fuse.svg" alt="logo" />
                    </div>

                    <!-- Material Design Spinner -->
                    <div class="spinner-wrapper">
                        <div class="spinner">
                            <div class="inner">
                                <div class="gap"></div>
                                <div class="left">
                                    <div class="half-circle"></div>
                                </div>
                                <div class="right">
                                    <div class="half-circle"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- / Material Design Spinner -->
                </div>
            </div>
            <!-- / FUSE Splash Screen -->
        </div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.

          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.

          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
    </body>
</html>

这是我的webpack配置文件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const PUBLIC_DIR = path.join(__dirname, './public');
const PUBLIC_URL = process.env.PUBLIC_URL || '/';
const HTML_TEMPLATE = 'index.html';

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: 'index_bundle.js',
        publicPath: '/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    // MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [require('tailwindcss'), require('autoprefixer')]
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // new HtmlWebpackPlugin(),
        new HtmlWebpackPlugin({
            // template: `${PUBLIC_DIR}/${HTML_TEMPLATE}`,
            template: './public/index.html',
            filename: 'index.html',
            templateParameters: {
                PUBLIC_URL
            }
        })
        // new MiniCssExtractPlugin()
    ],
    resolve: {
        alias: {
            '@fuse': path.resolve(__dirname, './src/@fuse/'),
            '@history': path.resolve(__dirname, './src/@history/'),
            '@lodash': path.resolve(__dirname, './src/@lodash'),
            i18n: path.resolve(__dirname, './src/i18n'),
            app: path.resolve(__dirname, './src/app/')
        }
    }
};

注:我使用的是react@17.0.2，webpack@4.43.0

reactjs

webpack

回答 1

Stack Overflow用户

发布于 2021-05-10 22:39:34

Webpack只是加载了webpack flow中的图片...如果你想复制额外的资源，你将需要像你所说的copy-webpack-plugin这样的插件。

加载器：

{
  test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
  loader: 'url-loader?limit=100000'
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67433220

复制

相似问题

问无法在webpack的开发模式下加载公用文件夹中的资产
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在webpack的开发模式下加载公用文件夹中的资产EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法在webpack的开发模式下加载公用文件夹中的资产
EN