-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
webpack nodejs 질문
20.08.05 15:57 작성 조회수 88
0
안녕하세여 다름이 아니라 제가 react는 webpack 그리고 백엔드는 noejs epxress를 하는데 작업을하다가 갑자기 프론트 터미널에 에러가 뜨는데 보니깐 node 모듈이랑 꼬여서 그런거같더라고요. 이런 경우에는 webpack에 target을 target:node해야되나요?? target:node하니깐 require is notdefind에 react is notdefind 이렇게 뜨더라고요... 대체 원인이 먼지 모르겠습니다.
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
module.exports = {
name: "wehago",
mode: "development",
devtool: "eval",
target: 'node',
resolve: {
extensions: [".js", ".jsx", "css", "scss"],
},
entry: {
app: ["babel-polyfill","./client"],
},
externals: [nodeExternals()],
externals: {
"React": "react",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
debug: true,
},
],
"@babel/preset-react",
],
plugins: ["react-hot-loader/babel"],
},
exclude: path.join(__dirname, "node_modules"),
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
{
test: /\.scss$/,
loaders: [
require.resolve("style-loader"),
require.resolve("css-loader"),
require.resolve("sass-loader"),
],
},
{
test: /\.(ico|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader",
options: {
publicPath: "./dist/",
name: "[name].[ext]?[hash]",
},
},
],
},
node: {
net: 'empty',
tls: 'empty',
fs: 'empty'
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
}),
new webpack.ProvidePlugin({
"React": "react",
}),
],
output: {
path: path.join(__dirname, "dist"),
filename: "[name].js",
publicPath: "/dist",
},
};
답변을 작성해보세요.
0
조현영
지식공유자2020.09.03
노드랑 리액트랑 같이 작업하실 때는 노드는 webpack 처리를 하시면 안 되고 react만 따로 웹팩처리하셔야 합니다.
웹팩처리된 react 결과물을 node에서 서버로 서빙하는 프로세스를 갖춰야 합니다.
답변 1