为什么我配置的React项目加载不出来?
如题。在使用Webpack手配了一个React项目后却加载不出来,浏览器一直是“正在加载”的状态而显示不出来我要的内容。求各位大神看看我的配置哪里出了问题
下面是我的配置:
// webpack.config.js
const path = require('path');
const EslintWebpackPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { getStyleLoaders } = require('./funcs/GetLoaders.js');
module.exports = {
entry: './src/index.tsx',
output: {
path: undefined,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[hash:10][ext][query]',
},
module: {
// 处理CSS
rules: [
{
test: /\.css$/,
use: getStyleLoaders(),
},
{
test: /\.less$/,
use: getStyleLoaders('less-loader'),
},
// 处理图片
{
test: /\.(jpe?g|png|gif|bmp|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024,
}
}
},
// 处理其他资源
{
test: /\.(woff2|ttf)$/,
type: 'asset/resource',
},
// 处理js
{
test: /\.jsx?$/,
use: ['babel-loader'],
include: path.resolve(__dirname, '../src'),
exclude: /node_modules/,
options: {
cacheDirectory: true,
cacheCompression: false,
}
},
// 处理ts
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'ts-loader',
options: {
transpileOnly: true,
},
},
],
}
],
},
plugins: [
new EslintWebpackPlugin({
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',
cache: true,
cacheLocation: path.resolve(__dirname, '../node_modules/.cache/.eslintcache')
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.htm'),
filename: 'index.htm'
}),
],
mode: 'development',
devtool: 'cheap-module-source-map',
optimization: {
splitChunks: {
chunks: 'all',
},
runtimeChunk: {
name: entrypoint => `runtime~${entrypoint.name}.js`,
}
},
devServer: {
port: 4155,
open: true,
host: 'localhost',
hot: true,
historyApiFallback: true,
},
resolve: {
alias: {
'@': path.resolve(__dirname, '../src'),
},
extensions: [
'.tsx',
'.ts',
'.jsx',
'.js',
'.json',
'.vue'
],
},
};
// GetLoaders.js
const getStyleLoaders = (loaderUsed = '') => [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
'postcss-preset-env',
['autoprefixer', {
browsers: ['Android >= 4.0', 'iOS >= 7']
}],
['postcss-pxtorem', {
rootValue: 16,
propList: ['*']
}],
]
} ,
},
},
loaderUsed,
].filter(loader => !!loader);
module.exports = {
getStyleLoaders,
};
回复
1个回答
test
2024-07-09
看一下控制台输出?应该会有有异常抛出。打不开控制台,也可以先开启控制台再进入项目页面。或者使用 Shift+ES
的快捷键看看项目的内存和CPU使用率。
如果还是看不到,可以尝试使用 Firefox
我记得里面是可以看到死循环的提示及错误定位的。Chrome
暂时好像没看到这个功能。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容