webpack --Charlie

Install:
yarn add webpack webpack-cli babel-loader @babel/core -D
압축 출력: +mode: "production"
Load css:
yarn add style-loader css-loader -D

+module: {

+rules:[

+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }

+]
+}

Load img: yarn add file-loader -D

+       {
+         test: /\.(png|svg|jpg|gif)$/,
+         use: [
+           'file-loader'
+         ]
+       }

Load font:

+       {
+         test: /\.(woff|woff2|eot|ttf|otf)$/,
+         use: [
+           'file-loader'
+         ]
+       }

Load csv,tsv,xml: yarn add csv-loader xml-loader -D

+       {
+         test: /\.(csv|tsv)$/,
+         use: [
+           'csv-loader'
+         ]
+       },
+       {
+         test: /\.xml$/,
+         use: [
+           'xml-loader'
+         ]
+       }

Load es6: yarn add @babel/core babel-loader @babel/preset-env -D

+{
        +        test:/(\.jsx|\.js)$/,
        +        use:{
            +        loader:"babel-loader",
          +          options:{
          +              presets:[
            +                "@babel/preset-env"
             +           ],
			plugins:[
				‘@babel/plugin-proposal-class-properties’
			]
             +       }
           +     },
          +      exclude:path.resolve(__dirname,"node_modules"),
          +      include:path.resolve(__dirname,"src")
+}

Es7: yarn add @babel/plugin-proposal-class-properties - D yarn add @babel/plugin-proposal-decorators - D yarn add @babel/plugin-transform-runtime - D yarn add @babel/runtime yarn add @babel/polyfill(패치)

               + plugins:[
		+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
			+ ["@babel/plugin-proposal-class-properties", { "loose" : true }],
                   + [
                       + "@babel/plugin-transform-runtime",
                      +  {
                       +   "corejs": false,
                        +  "helpers": true,
                       +   "regenerator": true,
                       +   "useESModules": false
                      +  }
                  +    ]

               + ]

(인테리어 오류: vscose settings experimental Decorators, ranh 를 선택하면 됩니다) Load less/sass: yarn add less less-loader - D yarn add sass node-sass sass-loader - D

+{
            +test: /\.less$/,
           + use: ['style-loader', 'css-loader', 'less-loader']
       + }
or
+{
            +test: /\.less$/,
           + use: ['style-loader', 'css-loader’,‘node-sass’, ‘sass-loader']
       + }

Server: yarn add webpack-dev-server -D

   + devServer:{//      
     +    port:8080,
      +   progress:true,//   
      +   contentBase:'./dist',//  
       +  open:true,//       
       +  compress:true,//  
  +  },

Html plugin: yarn add html-webpack-plugin -D
let HtmlWebpackPlugin=require(‘html-webpack-plugin’);

   + plugins:[
      +  new HtmlWebpackPlugin({
          +  template:'./src/index.html',
         +   filename:'index.html'//      
       + })
  +  ],

Clear/dist:
yarn add clean-webpack-plugin -D const CleanWebpackPlugin = require(‘clean-webpack-plugin’);

new CleanWebpackPlugin([‘dist’]),

css: yarn add mini-css-extract-plugin - D new MiniCssExtractPlugin ({filename: "main. css"})
이러한 파일의 접미사 이름은 생략하고 쓰지 않을 수 있음을 나타냅니다.

   + resolve:{
        +extensions:['.js','.jsx','.json'],//                 
       + alias:{
          +  '@':path.join(__dirname,'./src')//  @         src      （    ）
      +  }
  +  },

오류 보고: Error: getaddrinfo ENOTFOUND localhost at GetAddrinfo ReqWrap.onlookup [as oncomplete] (dns.js:57:26) Emitted ‘error’ event at: at GetAddrInfoReqWrap.doListen [as callback] (net.js:1438:12) at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:17)
hosts 파일 수정 127.0.0.1 localhost 오른쪽 단추를 누르고 방문하여 폴더/etc로hosts 파일 찾기 수정점 탄창 복사 수정 새 파일 저장 후 복사 원본 파일host 파일 바꾸기 Or 또는ihosts로 직접 수정할 수 있습니다
Eslint: yarn add eslint-loader eslant -D

   + {
      +  test:/(\.jsx|\.js)$/,
      +  use:{
        +    loader:'eslint-loader',
         +   options:{
         +       enforce:"pre"//previous    
            +    //post                            
         +   }
      +  },
 +   },

글로벌 변수 문제:
1) expose-loader가 window에 노출 2)providePlugin은 모든 사람에게 $3) cdn 도입 패키지 없음
react 관련 yarn add react react-dom react 관련 yact-react-router-dom antd react-dev-utils react-dom react-react-react-react-router-dom antd reactd react-act-act-act-act-act-app-ppolyfillyarn add @babel/prababbel/prebel/preset-rerereset-react-react-react-react @babel/plugin-blugin-syyyynax-yynax-ynax-dynax-dynax-d-dnaxynax-d