js語法檢查eslint

語法檢查： eslint-loader eslint
注意：只檢查自己寫的源代碼，第三方的庫不用檢查
設置檢查規則：
package.json 中 eslintConfig 中配置~
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb 規則指南--> eslint-config-airbnb-base, eslint-plugin-import, eslint 三個庫
安裝：npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

{
    test: /\.js$/,
    exclude: /node_moudles/, // 排除，防止eslint檢測
    loader: 'eslint-loader',
       options: {
           // 自動修復
           fix: true
       }
}

js 的兼容性處理

工具：babel-loader @babel/core @babel/preset-env
1. 基本js兼容性處理 --> @babel/preset-env
問題：只能轉換基本語法，如 promise 高級語法不能轉換
2. 全部的 js 兼容性處理 --> @babel/polyfill （不考慮）
問題：我只要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了~
3. 需要做兼容性處理的就做：按需加載 --> corejs npm i core-js -D
結合1 和3 完成js的兼容性處理

 {
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      options: {
           // 預設: 指示 babel 做怎樣的兼容處理
           // presets: ['@babel/preset-env']
           presets: [
               [ 
                  '@babel/preset-env',
                  {
                     // 按需加載
                     useBuiltIns: 'usage',
                     // 指定 core-js 版本
                     corejs: {
                       version: 3
                     },
                    // 指定兼容性做到哪個版本的瀏覽器
                    targets: {
                       chrome: '60',
                       firefox: '60',
                       ie: '9',
                       safari: '10',
                       edge: '17'
                    }
              ]
          ]
    }
},

注：正常來講，一個文件只能被一個loader處理
當一個文件要被多個loader處理，那么一定要指定loader執行的先后順序
先執行eslint 在執行babel
enforce： ‘pre’ 優先執行

js壓縮

生產環境下會自動壓縮js代碼

mode: 'production'

html 壓縮

new HtmlWebpackPlugin({
            template: './src/index.html',
            // 壓縮html
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注釋
                removeComments: true
            }
}),