javascript - 如何使用 Webpack 构建 React 应用程序并导入资产文件夹?
问题描述
我的主要问题是我正在尝试构建一个 React 应用程序,但资产文件夹丢失,我不知道如何导入它并在 webpack.conf 中配置它。另一个问题是index.html的相对路径:不知道会不会在应用构建中受到影响。
提前致谢。
索引.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>App</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" href="src/assets/favicon.ico"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
网络包配置:
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.tsx',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".jsx", ".json"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}
]
},
plugins: [
new HTMLWebpackPlugin({
template: 'public/index.html'
}),
new MiniCssExtractPlugin("style.css")
],
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
devServer: {
historyApiFallback: true,
port: 3000
}
};
解决方案
作为构建过程的一部分,您可以使用webpack-copy-plugin复制其他文件夹/文件
new CopyPlugin([{
from: path.resolve(__dirname, 'src', 'assets'),
to: path.resolve(__dirname, 'build', 'assets')
}])
推荐阅读
- python - 使用python将(理想情况下)doc转换为pdf或将docx转换为pdf,但出现错误
- c++ - C++ Winmm PlaySound API 返回 False 且不播放声音
- c# - 使用堆栈面板内的按钮导航到页面的框架
- python - 试图制作一个函数来调用石头剪刀布游戏但显示错误无效命令名称“.!button8”
- testing - 如何将功能文件关键字连接到空手道中的 java 代码?
- php - 在 php 中使用多重选择需要数据库中的多行
- javascript - 在电子应用程序中如何在 Mac OS 和 Windows 的侧边栏视图中显示给定目录
- eslint - 如何使用 Vue 3 和 Prettier 自定义 HTML 格式?
- android - 与 Accu Check 即时血糖仪集成
- apex - 无法从组件控制器获取值到 visualforce 自定义组件