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")
+}

Es 7: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 experimentalDecorators,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 MiniCssExtractPluggin({filename:'main.css’})
これらのファイルの接尾辞名を省略して書くことができます.

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

エラー:Error:getaddrinfo ENOTOFUND localhost at GetAddrInfoReqWrap.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は1人当たり$3)cdn導入をパッケージ化しない
react関連yarnadd react-dom redux react-redux react-redux react-router-dom antd react-dev-utls react-app-polyfill yarnadd@babel/preset-react@babel/pluin-syntax-dynamic-import-D yarnadd babel-plugin-import-D yarnadd less@^2.7.3 jsのmodule rulesにpluinsに[import]を追加し、d’,style:true}]