inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tìm hiểu và thực hành về môi trường phát triển frontend (webpack, babel, eslint..)

Plugin (giải pháp)

질문입니다.

364

andrewlee

35 câu hỏi đã được viết

0

강의 중간중간에 나머지 연산자에 대한 내용을 자주 언급하시는데 구글링을 해도 마땅한 정보를 찾을 수가 없어서.. 

이것이 무슨 뜻이고 어떤 기능인지 설명 좀 해주시거나 구글에서 어떤 키워드로 검색해야 학습이 가능한지 알고 싶습니다.

2. webpack으로 dist 폴더를 생성한 후에 index.html 파일안에 input 태그의 가장 중요한 속성인 type 속성이 사라진 것을 확인했는데 이건 어떤 문제인지 알 수 있을까요? 

< webpack.config.js> 

const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin}  = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

process.env.NODE_ENV = process.env.NODE_ENV || "development"

module.exports = {
  mode: "production",
  entry: {
    main: "./src/app.js"
  },
  output: {
    filename: "[name].js",
    path: path.resolve("./dist")
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
            process.env.NODE_ENV==="production" ? MiniCssExtractPlugin.loader"style-loader"            
            , "css-loader"]
      },
      {
        test: /\.(png|jpg|svg|gif)$/,
        loader: "url-loader",
        options: {
          name: "[name].[ext]?[hash]",
          limit: 10000 // 10Kb
        }
      }
    ]
  },
  plugins:[
      new webpack.BannerPlugin({
        banner : `빌드 날짜 : ${new Date().toLocaleString()}`
      }),
      new HtmlWebpackPlugin({
          template: './src/index.html',
          templateParameters :{
              env:process.env.NODE_ENV === 'development'?'(개발용)' :'',
          }
      }),

      new CleanWebpackPlugin(),

      ...(process.env.NODE_ENV==='production' ?
      [new MiniCssExtractPlugin({
          filename :'[name].css'
      })] :[]),
      
    ]
  /**
   * TODO: 아래 플러그인을 추가해서 번들 결과를 만들어 보세요.
   * 1. BannerPlugin: 결과물에 빌드 시간을 출력하세요.
   * 2. HtmlWebpackPlugin: 동적으로 html 파일을 생성하세요.
   * 3. CleanWebpackPlugin: 빌드 전에 아웃풋 폴더를 깨끗히 정리하세요.
   * 4. MiniCssExtractPlugin: 모듈에서 css 파일을 분리하세요.
   */
};

<index.html> in dist 

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>검색</title>
    <link href="main.css?9d95228d2bede0c25351" rel="stylesheet">

</head>

<body>
    <div id="app">
        <header>
            <h2 class="container">검색</h2>
        </header>
        <div class="container">
            <form class="FormView">
// type 속성 어디갓지
<input placeholder="검색어를 입력하세요" autofocus>
 <button type="reset"
                    class="btn-reset"></button></form>
            <div class="content">
                <div id="tabs"></div>
                <div id="search-keyword"></div>
                <div id="search-history"></div>
                <div id="search-result"></div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="main.js?9d95228d2bede0c25351"></script>
</body>

</html>

좋은 강의 감사합니다.

웹팩 babel eslint nodejs

Câu trả lời 4

1

Holden Colfield

- 나머지 연산자는 rest operator

- 전개 연산자는 spread operator

위 둘을 찾으면 좋을 것 같습니다.

문법(syntax)이 비슷해서 혼동이 올 수 있을 것 같아요.

1

jeonghwan

2) 브라우져에서 type 기본값이 text 라서 빠진게 아닌가 싶어요. 이건 저도 몰랐네요 

1

jeonghwan

1) 이거 참고하시면 되요 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

0

andrewlee

답변 감사합니다.

지금 시점에서 해당 강의를 듣는 것에 대하여

1

111

3

2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)

1

223

1

에러 해결 공유드립니다

1

225

2

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

1

234

2

eslint

0

381

3

도와주세요!

0

167

2

[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전

1

145

1

질문 an error occurred while loading the image

1

470

1

webpack에서 babel-loader 사용할때 질문

1

151

1

자주 사용하는 플러그인 에서 질문이 있습니다.

1

168

1

eslint no-extra-semi 관련 질문

1

144

1

webpack5 에서 open index.html하는법 + 질문

1

169

1

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

2

302

1

혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?

1

371

1

에러없이 png안뜨시는 분들

1

275

1

Error: Cannot find module &#x27;node:crypto&#x27;

1

465

1

DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함

1

407

1

깃허브 확인 문의

0

575

1

폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문

0

407

1

해쉬값과 캐쉬 갱신

1

461

1

Hash 에러 발생

1

2668

2

webpack.config.js에서의 CommonJS방식에 대한 질문

0

831

3

웹팩 버전

0

524

1

웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?

0

485

1