我对webpack配置有一个反应应用程序。 但有时我在正常浏览器模式下出现空白屏幕问题。 当我在隐身/私密模式下打开此功能时,不会发生此问题。 从其他类似的问题,从BrowserRouter更改为HashRouter解决了他们的问题,但在我的情况下这是不一样的,因为我的问题有时(不是所有时间)和20分钟或40分钟或1小时(大约时间)后发生页面似乎又好了。
这是我的package.json和配置文件
的package.json
"homepage": "/dev",
"scripts": {
"start": "webpack-dev-server --open --config webpack.dev.js",
"build": "webpack --mode production --config webpack.prod.js",
"serv": "webpack-dev-server --mode production --config webpack.prod.js -
-host dev-test.cc --port 65001"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"hard-source-webpack-plugin": "^0.13.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.1",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
}
webpack.dev.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
const basename = '/dev';
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
entry: {
'app': path.resolve('./src/index.js'),
},
devServer: {
// publicPath: basename,
historyApiFallback: true,
disableHostCheck: true,
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.html$/,
use: [
{
loader: "html-loader",
},
],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: 'url-loader',
},
],
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
],
},
resolve:
{
alias: {
'handlebars': 'handlebars/dist/handlebars.js',
},
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: '[name].bundle.js',
},
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;
},
},
}
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'Dev test',
template: './src/index.html',
homepage: "/dev/",
}),
new webpack.DefinePlugin({
'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
'BaseName': JSON.stringify(basename),
}),
new webpack.HashedModuleIdsPlugin(),
],
};
webpack.prod.js
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
const basename = '/dev';
module.exports = {
entry: {
'app': path.resolve(__dirname, './src/index.js'),
},
devServer: {
// publicPath: basename,
historyApiFallback: true,
disableHostCheck: true
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
use: [
{
loader: 'url-loader'
},
]
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
{ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader" },
]
},
resolve:
{
alias: {
'handlebars': 'handlebars/dist/handlebars.js'
}
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: '[name].[contenthash].js',
},
optimization: {
runtimeChunk: {
name: 'runtime'
},
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
return `npm.${packageName.replace('@', '')}`;
},
},
}
},
},
plugins: [
new HtmlWebpackPlugin({
title: 'Dev test',
template: './src/index.html',
homepage: "/dev/",
}),
new webpack.DefinePlugin({
'ApiUrl': JSON.stringify('https://dev-test.cc/api/'),
'BaseName': JSON.stringify(basename),
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.HashedModuleIdsPlugin(),
],
};
我不知道这是我的构建问题还是因为在本地开发环境中这种情况从未发生过。 我遵循以下方式来运行我的项目,我认为我没有正确地完成它,因为我对生产/部署事物没有任何熟悉。 - npm run build - nohup npm run serv&(我转到我的项目所在的同一个目录)。
我想问的另一个问题是 - >目前我正在使用webpack-dev-server,而不是需要使用的内容以及 如何提供构建文件? (这部分让我很困惑)