我在webpack生产部署中遇到问题,我收到控制台错误,提示 net :: ERR_NAME_NOT_RESOLVED 。我认为我在某处缺少某些东西,但无法弄清楚。我已经尝试了几乎所有的Google搜索,但无法获得正确的提示。所以我不确定这是我的配置代码问题还是某些服务器端问题。 我已经在下面的package.json文件的脚本中附加了配置代码。我不知道我在哪里。
控制台错误: https://prnt.sc/o1giau
我在控制台中遇到以下错误
https://de-test.cc:65001/sockjs-node/info?t=1560479337759网:: ERR_NAME_NOT_RESOLVED
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(),
],
};
此配置文件中的 devServer 是否需要?为什么我在控制台错误中看到 webpack-dev-server 。虽然我使用了生产模式,但这只是让我感到困惑,不是吗?还是我错过了什么?
如果任何人已经通过此类或类似的产品进行生产,那么任何帮助都是非常有意义的。谢谢!