반응형
npm run build 를 실행하다가 나타난 code: 'ERR_INVALID_ARG_TYPE' 에러 메세지
배포용으로 빌드할 때의 webpack.config.js 설정은 개발 설정과 다르게 plugin의 ReactRefreshWebpackPlugin 이 있으면 안된다고 한다.
배포용으로 만들 때 제거해야할 것 ↓↓
ReactRefreshWebpackPlugin
React-refresh/babel
개발일 때는 가능 / 배포용일 때는 주석처리하기
->아래처럼 주석처리를 하고 다시 npm run build를 하니깐 되었다 !
const path = require('path')
//const RefreshwebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin') // 1
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
// const mode = 'production'
// const devtool = 'hidden-source-map'
const mode = 'development'
const devtool = 'eval'
const isDevelopment = mode === 'production';
const refresh = isDevelopment ? [] : ['react-refresh/babel']
module.exports = {
name:'ingoo',
mode:mode,
devtool:devtool,
resolve:{
extensions:['.js', '.jsx']
},
entry:{
app:['./index.jsx']
},
module:{
rules:[
{
test:/\.jsx?$/,
loader:'babel-loader',
options:{
presets:[
['@babel/preset-env',{
targets:{browsers:['last 2 chrome versions']}
}],
'@babel/preset-react'
],
plugins:refresh
},
},
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,'css-loader']
}
],
},
plugins:[
//new RefreshwebpackPlugin(), // 2
new webpack.LoaderOptionsPlugin({debug:true}),
new MiniCssExtractPlugin({ filename: 'app.css' })
],
output:{
path:path.join(__dirname,'dist'),
filename:'app.js',
publicPath:'/dist',
},
devServer:{
publicPath:'/dist',
hot:true,
proxy: {
'/api': 'http://localhost:3000',
},
host: '0.0.0.0',
}
}
반응형