You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
constpath=require("path");// const { BannerPlugin, DefinePlugin } = require("webpack");// const childProcess = require("child_process");constHtmlWebpackPlugin=require("html-webpack-plugin");// const MiniCssExtractPlugin = require("mini-css-extract-plugin");constisDevMode=(process.env.NODE_ENV||"development").trim()==="development";console.log("is DEV mode?",isDevMode);console.log("__dirname: ",__dirname);module.exports={mode: isDevMode ? "development" : "production",// entry: webpack 시작되는 부분이라고 생각하면 된다.entry: {main: "./src/index.js",},/** * output * entry point를 기준으로 * 모든 .js 파일을 합쳐서 하나의 bundle 파일로 만드는데, * 이걸 어디에 저장할 것인지 지정하는 option */output: {path: path.resolve(__dirname,"dist"),filename: isDevMode ? "[name].js" : "main.[contenthash].js",chunkFilename: "[id].chunk.js",assetModuleFilename: "images/[hash][ext][query]",clean: true,},devServer: {port: 3000,hot: true,client: {overlay: {errors: true,warnings: false,},},// static: {// directory: path.resolve(__dirname, './src/assets/'),// },},/** * module * test에 설정한 파일들을 inspect 하여, * 조건에 맞는 파일들에 대해 loader 들을 실행하여 해석함 */module: {rules: [// {// test: /\.(sa|sc|c)ss$/i,// exclude: [/node_modules/],// use: [// // creates 'style' nodes from JS strings// isDevMode// ? 'style-loader'// : {// loader: MiniCssExtractPlugin.loader,// options: {// publicPath: '',// },// },// // translates css into common JS// 'css-loader',// 'postcss-loader',// // complies sass to css// 'sass-loader',// ],// },{test: /\.(png|svg|jpg|jpeg|gif)$/i,exclude: [/node_modules/],type: "asset/resource",parser: {dataUrlCondition: {// 크기가 8kb 미만인 파일은 inline 모듈로 처리되고 그렇지 않으면 resource 모듈로 처리됩니다.maxSize: 4*1042,},},// generator: {// publicPath: './assets/',// outputPath: './assets/',// },},{test: /\.js$/,exclude: [/node_modules/],loader: "babel-loader",},// {// test: /\.(woff|woff2|eot|ttf|otf)$/i,// exclude: [/node_modules/],// type: 'asset/resource',// },],},plugins: [/** * 개발할 때 API 서버주소, * 배포했을 때 API 서버주소를 설정하는 Plugin */// new DefinePlugin({// NODE_ENV: 'development',// }),// new BannerPlugin({// banner: `Build Date: ${new Date().toLocaleString()}// Commit Version: ${childProcess.execSync('git rev-parse --short HEAD')}// Author: ${childProcess.execSync('git config user.name')}`,// }),newHtmlWebpackPlugin({template: "./public/index.html",templateParameters: {env: isDevMode ? "개발용" : "배포용",},minify: !isDevMode
? {collapseWhitespace: true,removeComments: true,}
: false,}),// ...(!isDevMode// ? [// new MiniCssExtractPlugin({// filename: isDevMode ? '[name].css' : '[name].[contenthash].css',// chunkFilename: isDevMode ? '[id].css' : '[id].[contenthash].css',// }),// ]// : []),],};
src/index.js
// 이미지 파일도 모듈로 가져옵니다.// 웹팩 module 설정에 이미지 파일에 대한 규칙을 추가했기 때문에 가능합니다.// 이렇게 가져온 이미지파일을 빌드하면 아웃풋 폴더에 지정한 이름 규칙으로 파일이 생성될 것입니다.importimagefrom"./assets/image.png";document.addEventListener("DOMContentLoaded",()=>{constimgEl=document.createElement("img");imgEl.src=image;document.body.appendChild(imgEl);});
The text was updated successfully, but these errors were encountered:
인프런 질문: 개발환경에서 assets 파일 참조관련 질문에 대한 답변입니다.
webpack.config.js:
src/index.js
The text was updated successfully, but these errors were encountered: