Cộng đồng Hỏi & Đáp của Inflearn

tlagksshl46574

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

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)

질문입니다.

Viết

358

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

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

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>