我正在尝试将我的react项目部署到dev server.
它在我的本地mac笔记本电脑上运行良好。但是在开发服务器中部署react项目到PM2时发生了错误。
这是我的错误信息的一部分。
2021-01-20 14:39 +09:00: [../node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 7.68 KiB {vendor} [built]
2021-01-20 14:39 +09:00: [./index.tsx] ./src/index.tsx 4.83 KiB {www} [built]
2021-01-20 14:39 +09:00: + 2297 hidden modules
2021-01-20 14:39 +09:00:
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/SignUp/index.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './Signup' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/SignUp'
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/SignUp/index.tsx 24:37-56
2021-01-20 14:39 +09:00: @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00: @ ./src/index.tsx
2021-01-20 14:39 +09:00: @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00:
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/ConfirmVerifyBank.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './confirmVerifyBank.scss' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank'
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/ConfirmVerifyBank.tsx 14:0-35
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/components/ConfirmVerfiyBank/index.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/UtransferBankVerify.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/components/UtransferBankVerify/index.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/Verification.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/Verification/index.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/AccountManagement.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/UMyPage/AccountManagement/index.tsx
2021-01-20 14:39 +09:00: @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00: @ ./src/index.tsx
2021-01-20 14:39 +09:00: @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00:
2021-01-20 14:39 +09:00: ERROR in ./src/pages/mobile/Policy/index.tsx
2021-01-20 14:39 +09:00: Module not found: Error: Can't resolve './policy' in '/home/nkok/workspace/ut-user-web/src/pages/mobile/Policy'
2021-01-20 14:39 +09:00: @ ./src/pages/mobile/Policy/index.tsx 28:37-56
2021-01-20 14:39 +09:00: @ ./src/pages/routes.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/App.tsx
2021-01-20 14:39 +09:00: @ ./src/components/App/index.tsx
2021-01-20 14:39 +09:00: @ ./src/index.tsx
2021-01-20 14:39 +09:00: @ multi react-hot-loader/patch webpack-hot-middleware/client location-origin ./index.tsx
2021-01-20 14:39 +09:00: Child html-webpack-plugin for "index.html":
2021-01-20 14:39 +09:00: Asset Size Chunks Chunk Names
2021-01-20 14:39 +09:00: index.html 540 KiB 0
2021-01-20 14:39 +09:00: Entrypoint undefined = index.html
2021-01-20 14:39 +09:00: [../node_modules/html-webpack-plugin/lib/loader.js!./assets/index.html] ./node_modules/html-webpack-plugin/lib/loader.js!./src/assets/index.html 4.28 KiB {0} [built]
似乎我必须修改webpack来解决上面的错误。
但是我不熟悉Webpack。请给我一些建议来解决这个错误。
这是我的tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": false,
"noEmit": true,
"noImplicitAny": false,
"jsx": "react",
"baseUrl": ".",
"paths": {
"~/*": [
"./src/*"
]
}
},
"include": [
"src"
]
}
webpack.config.base.js
const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DotEnv = require('dotenv-webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const isProduction = process.env.NODE_ENV !== 'development';
const env = new DotEnv({
path: '.env',
systemvars: true,
});
const config = {
context: `${__dirname}/src`,
entry: {
www: ['location-origin', './index.tsx'],
},
output: {
path: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
type: 'javascript/auto',
test: /.json$/,
use: 'json-loader',
},
{
test: /.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProduction,
},
},
{
loader: 'css-loader',
options: {
importLoaders: 2,
sourceMap: !isProduction,
modules: {
mode: 'local',
localIdentName: '[local]',
context: path.resolve(__dirname, 'src'),
hashPrefix: 'ut',
},
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: !isProduction,
},
},
{
loader: 'sass-loader',
options: {
modules: true,
sourceMap: !isProduction,
},
},
],
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: !isProduction,
},
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: !isProduction,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: !isProduction,
},
},
],
},
{
test: /.(base64|txt)(?S*)?$/,
use: 'raw-loader',
},
{
test: /.(ico|png|jpe?g|gif|svg)(?S*)?$/,
loader: 'url-loader',
options: {
name: '[name]_[hash:base64:5].[ext]',
limit: 5000,
},
},
{
test: /.(woff|woff2|otf|ttf|eot)(?S*)?$/,
loader: 'url-loader',
options: {
name: '[name]_[hash:base64:5].[ext]',
limit: 5000,
},
},
{
test: /.worker.js$/,
use: {
loader: 'worker-loader',
},
},
],
},
optimization: {
splitChunks: {
chunks: 'initial',
cacheGroups: {
zlib: {
test: /node_modules/react-zlib-js/,
chunks: 'initial',
name: 'zlib',
priority: 11,
enforce: true,
},
vendor: {
test: /node_modules/,
chunks: 'initial',
name: 'vendor',
priority: 10,
enforce: true,
},
// Merge all the CSS into one file
styles: {
name: 'common',
test: /src/components/.+.s?css$/,
chunks: 'all',
enforce: true,
},
},
},
},
plugins: [
// eslint-disable-next-line no-useless-escape
new webpack.ContextReplacementPlugin(/moment[/\]locale$/, /ko/),
new webpack.DefinePlugin(env.definitions),
new CleanWebpackPlugin({
cleanAfterEveryBuildPatterns: ['dist'],
}),
new CopyPlugin([{ from: `${__dirname}/src/assets`, to: `${__dirname}/dist/assets` }]),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: `${__dirname}/src/assets/index.html`,
},
isProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
],
resolve: {
extensions: [
'.ts',
'.tsx',
'.js',
'.jsx',
'.json',
'.sass',
'.scss',
'.css',
'.wasm',
'.mjs',
'.js',
'.json',
'.jsx',
'.svg',
'.png',
'.jpg',
'.jpeg',
],
alias: {
'~': path.resolve(__dirname, 'src/'),
assets: path.resolve(__dirname, 'src/assets/'),
'proxy-polyfill': path.resolve(__dirname, 'node_modules/proxy-polyfill/proxy.min.js'),
},
},
stats: {
children: false,
},
};
module.exports = config;
const chalk = require('chalk');
// console.log(`nn🤔 ${chalk.red('Development')} Building..n`);
// console.log(chalk.red('⚠️ Please wait more.. until build complete.nn'));
const webpack = require('webpack');
const webpackMerge = require('webpack-merge');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpackBaseConfig = require('./webpack.config.base');
const config = webpackMerge(
{
mode: 'development',
devtool: 'source-map',
devServer: {
publicPath: '/',
hot: true,
historyApiFallback: true,
},
entry: {
www: ['react-hot-loader/patch', 'webpack-hot-middleware/client'],
},
output: {
filename: '[name].js',
},
module: {
rules: [
{
test: /.js[x]?$/,
include: /node_modules/proxy-polyfill/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['react-hot-loader/babel'],
},
},
{
test: /.(ts[x]?)$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
plugins: ['react-hot-loader/babel'],
},
},
{
enforce: 'pre',
test: /.js$/,
exclude: /node_modules/,
use: 'eslint-loader',
},
],
},
optimization: {
minimize: false,
minimizer: [new UglifyJsPlugin()],
},
plugins: [
new webpack.LoaderOptionsPlugin({
options: {},
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[name].css',
ignoreOrder: false,
}),
],
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
},
webpackBaseConfig,
{
output: {
publicPath: '/',
},
}
);
module.exports = config;
已更新:删除特定的SCSS文件和文件夹后，它没有错误地工作。这是否意味着我必须修改webpack配置?比如添加额外的加载器?
请告诉我解决这个问题的正确方法。
语法错误。我只是固定了文件名，它工作了