html 파일에서 환경파일을 사용하고싶습니다.(웹팩)

Question

우선 cra를 사용하지 않고 직접 웹팩 설정들을 설정하고 있습니다.그리고 api key 들을 가려주기 위해서 웹팩에서 dotenv와 DefinePlugin를 사용해서 불러오려 합니다.하지만 계속 해봐도 불러오질 못해서 질문하게 됐습니다. 먼저 웹팩 설정 파일입니다.import path from 'path'; import ReactRefreshPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import { Configuration as WebpackConfiguration, DefinePlugin } from 'webpack'; import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server'; import dotenv from 'dotenv'; // const HtmlWebpackPlugin = require('html-webpack-plugin'); dotenv.config(); interface Configuration extends WebpackConfiguration { devServer?: WebpackDevServerConfiguration; } const webpackConfig: Configuration = { name: 'preTravelPlan', mode: 'development', //배포 production devtool: 'eval', resolve: { extensions: ['.js', '.jsx', '.tsx', '.ts'], alias: { '@src': path.resolve(__dirname, 'src'), }, }, entry: { app: './client', }, module: { rules: [ { test: /\.(ts|tsx)$/, loader: 'babel-loader', options: { plugins: ['react-refresh/babel'] }, }, { test: /\.tsx?$/, loader: 'ts-loader', exclude: path.join(__dirname, 'node_modules'), }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {}, }, ], }, { test: /\.css$/i, include: path.resolve(__dirname, 'src') as string, use: ['style-loader', 'css-loader', 'postcss-loader'], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './src/assets/fonts/', }, }, ], }, plugins: [ // new HtmlWebpackPlugin({ // template: './index.html', // minify: false, // KAKAOMAP_API_KEY: process.env.KAKAOMAP_API_KEY, // }), new ReactRefreshPlugin(), new ForkTsCheckerWebpackPlugin(), new DefinePlugin({ 'process.env': JSON.stringify(process.env), KAKAOMAP_API_KEY: JSON.stringify(process.env.KAKAOMAP_API_KEY), }), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist/', }, devServer: { port: 8080, devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true, historyApiFallback: true, //존재하지 않는 url일경우 -> index.html }, }; export default webpackConfig; 그리고 html에서 이를 사용하는 부분입니다.= Document

대체 어느 부분이 잘못돼서 못불러오는지 모르겠습니다 ㅠㅠ 도와주세요!

코린이듈리 · Accepted Answer

스크립트를 불러오는 훅을 만들어서 해결했습니다!

html 파일에서 환경파일을 사용하고싶습니다.(웹팩)

1개의 답변

#webpack5 목록