-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
babel-loader질문입니다! 왜쓰는지 궁금합니다!
23.04.14 01:55 작성 조회수 444
0
react-typescript강좌 끝말잇기 부분에서 미래에서 온 제로초님께서
webpack.config.ts파일에 추가하라고 하신 babel-loader에 관해서 질문이 있습니다.
module설정하는 부분에 babel-loader를 추가해주었는데 버전이 업데이트 되면서 왜 이 로더를 추가해야될까요??
그리고 에러를 해결하는 과정에서 질문이있습니다. module.rules 부분에 순서는 상관없다고 생각해서 ts-loader설정을 먼저 적고 babel-loader를 적어주었습니다. 그러나 아래와 같이 오류가 떳습니다
그러나 설정 순서를 바꿔주었더니 해결이 되었는데 어떤 처리과정이 있길래 이 순서를 바꿔주어서 해결을 할 수 있게됬는지 의문입니다.
아래는 해결되서 적어놓은 webpack.config.ts파일입니다!
import path from 'node:path';
import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
import { Configuration as WebpackConfiguration } from "webpack";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const config: Configuration = {
name: 'word-relay-dev',
mode: 'development', //after production
devtool: 'eval',
resolve: {
extensions: ['.jsx', '.js', '.tsx', '.ts'],
},
entry: {
app: './client'
},
module: {
rules: [
{
loader: 'babel-loader',
options: { plugins: ['react-refresh/babel'] },
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: path.join(__dirname, 'node_modules'),
},]
},
plugins: [
new ReactRefreshPlugin(),
new ForkTsCheckerWebpackPlugin()
],
output: {
filename: '[name].js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist/',
}, devServer: {
devMiddleware: { publicPath: '/dist' },
static: { directory: path.resolve(__dirname) },
hot: true
}
}
export default config;
답변을 작성해보세요.
0
조현영
지식공유자2023.04.14
사실 이 강좌도 연식이 좀 된지라 이제는 ts-loader만 해도 됩니다. 여기서는 react-refresh/babel을 쓰려고 같이 썼습니다.
모듈 순서는 매우 중요합니다. 그 역순서대로 처리되니까요. ts-loader가 ts를 js로 바꾼 뒤에 babel-loader가 핫 리로딩을 붙입니다.
답변 1