无法在 webpack 的开发模式下从公用文件夹加载资产
[英]Can't load assets from public folder in development mode in webpack
问题描述
I am new to webpack.
我是 webpack 的新手。 I am trying to access my assets file outside of the src folder during development mode.我试图在开发模式下访问 src 文件夹之外的资产文件。 The only solution I found in the internet is using copy-webpack-plugin.我在互联网上找到的唯一解决方案是使用 copy-webpack-plugin。 But I think that is for build.但我认为这是为了构建。 But since I am in development mode all things will load into memory.但由于我处于开发模式，所有东西都会加载到 memory 中。 I might be wrong.我可能错了。 This is my file structure right now File Sturcutre这是我现在的文件结构File Sturcutre
And I am trying to access those file in index.html我正在尝试访问 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>
And this is my webpack config file这是我的 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/')
}
}
};
NB: I am using react@17.0.2, webpack@4.43.0注意：我正在使用 react@17.0.2、webpack@4.43.0
1 个解决方案
解决方案1
0 2021-05-10 14:39:33
Webpack just loads images that was in the webpack flow... If you want to copy extra assets you will need plugins like copy-webpack-plugin as you say. Webpack 只加载webpack流程中的图像......如果你想复制额外的资产，你将需要像你说copy-webpack-plugin这样的插件。
loaders:装载机：
{
test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,
loader: 'url-loader?limit=100000'
}
Just would copy the *..(jpg|jpeg|png|woff|woff2|eot|ttf|svg) files that are imported in tree generated by the entry ( entry: './src/index.js' ).只需复制在条目生成的树中导入的*..(jpg|jpeg|png|woff|woff2|eot|ttf|svg)文件（ entry: './src/index.js' ）。 In your case the image was imported in the index.html file, which is not in the file tree generated by the webpack entry .在您的情况下，图像是在 index.html 文件中导入的，该文件不在webpack entry生成的文件树中。 If you import that image on './src/index.js' you will see the image in the output folder dist如果您在'./src/index.js'上导入该图像，您将在 output 文件夹dist中看到该图像
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.