webpack教学——webpack对js的处理

① 兼容性处理

   需要下载的包  npm install babel babel/core babel-loader babel/preset-env core-js。

   babel/preset-env 将es6转换为es5 但是只能转换简单的语法。  高级语法就不能转换了比如promise 

 core-js 是对高级语法的转换， 也是按需加载，根据详细配置对转换，比方说兼容到哪些版本就不在兼容了。

    babel/core是babel的一个核心库。其实在这里我也比较纳闷既然是核心库为什么不直接放在babel中。 我也没做过多的了解。npm包 更新都是挺快的，可能今天你了解了，明天就不适用了。

  对于目前学习来说只要知道工具怎么用就可以了。

  

const { resolve } = require("path");

 module.exports = {

    //    入口文件

     entry:'./src/js/index.js',

     output:{

 // 打包后的文件名

         filename:'js/index.js',

 // 路径

         path:resolve(__dirname,'build')

     },

     module:{

         rules:[

             {

                //    只检查js文件

                test:/\.js$/,

                // 只检查src当前目录中src文件下的js文件,避免 检查了node_modules中的文件

                include:resolve(__dirname,'src'),

                loader:'babel-loader',

                options:{

                    //  预处理选项

                    presets:[

                        // 将es6转换为es5语法, 但是此方法只能转换

                        '@babel/preset-env',{

                            //  按需加载

                            userBuiltIns:'usage',

                            corejs:{

                                // 指定版本

                                version:3

                            },

                            targets:{

                                // 兼容谷歌浏览器 60以上版本，包括60

                                chrome:'60',

                                // 兼容ie浏览器 8以上版本，包括8

                                ie:'8',

                                // 兼容苹果浏览器 10以上版本，包括10

                                safari:'10'

                            }

                      }

                    ]

                }

          }  

         ]

     },

     mode:'development'

 }

② 语法检查

    需要下载的包  npm install eslint eslint-loader eslint-config-airbnb-base 

  语法风格推荐airbnb 这个是目前使用量比较多的。

eslint-config-airbnb-base 就是语法风格

  

const { resolve } = require("path");

module.exports = {

    //    入口文件

     entry:'./src/js/index.js',

     output:{

        //  输出文件名

         filename:'js/index.js',

        //  输出的路径

         path:resolve(__dirname,'build')

     },

     module:{

         rules:[

             {

             /*

             eslint-loader-airbnb-base  包需要在paackage.json文件从 引入

              "eslintConfig":{

                //   引入语法风格

                  extends:'airbnb-base'

              }      

              */

                 //   只检查js文件

              test:/\.js$/,

            //   只检查  src下的文件

           

              include:resolve(__dirname,'src'),

            //    语法检查

              loader:'eslint-loader',

              option:{

                //   自动修复

                  fix:true

              }

               

             }  

         ]

     },

    //  开发环境

     mode:'development'

 }

③ js文件压缩

    webpack5中只要在生产环境中打包就会自动压缩js文件