webpack4 es6轉換

在webpack裏用es6語法, ie瀏覽器不識別,爲了讓瀏覽器識別,須要用到bebal轉換;

bebal,英文是通天塔 的意思, 咱們常說的巴比倫也是這個詞;我估計是當初設計者是想用它做爲一個溝通es6新語法和之前的就的js語法的一個工具,因此用了bebal. 

步驟: 1在bebal官網的設置裏,點擊webpack,就會出現相應的教程:

                    第一步2install讓下載babel-loader @babel/core;第二步3usage讓在你的webpack.config.js配置module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] }第三步:4生成一個配置文件.babelrc 注意是在根路徑,也就是和你要打包的js文件同一級別.而且在裏面寫上{ "presets": ["@babel/preset-env"] }, 按照它的要求安裝@babel/preset-env,並進行設置

           2 設置preset-env,按照上面的例子

           3按照polyfill,這個轉換promise這種關鍵字的工具. 並將useBuildin屬性設爲useage;

            並在打包的文件開頭require("@babel/polyfill"); 或者用module.exports = { entry: ["@babel/polyfill", "./app/js"], };

生產環境下的打包

在docs選項裏 transform-runtime插件按照要求一步一步作,最後把corejs的屬性改爲2,而後下載個corejs就能夠了. 
下圖是把配置放到了配置項裏,固然放到.bebalrc文件也能夠

 1 { 
 2             test: /\.js$/, 
 3             exclude: /node_modules/,
 4             loader: "babel-loader" 
 5             // options:{
 6             //     // "presets": [
 7             //     //     [
 8             //     //         "@babel/preset-env",{
 9             //     //             "useBuiltIns": "usage",
10
11             //     //             "targets": {
12             //     //                 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
13             //     //               },
14             //     //         }
15             //     //     ]
16             //     //   ]
17 
18                 
19             //         "plugins": [["@babel/plugin-transform-runtime", {
20             //             "corejs": 2,
21             //             "helpers": true,
22             //             "regenerator": true,
23             //             "useESModules": false
24             //           }]]
25 
26                   
27             // }
28          
29         },