es6 webpack轉es5


更新時間:

2018-7-31 首次更新.

 

先生成package.json

npm init -y

 

再安裝以下npm插件

 npm i babel-core babel-loader babel-preset-es2015 webpack -D && npm i -g webpack-cli

 

看起來應該是這樣的(除版本號外),詳細的配置文件不細說

webpack.config.js

 1 const path = require('path');  2 module.exports = {  3     // 入口
 4     // 一旦package.json里面配置了webpack --mode=production,下面的mode:'production'就不必了
 5     // mode:'production',
 6     entry:path.resolve(__dirname,'app.js'),  7  output: {  8         // 出口重命名js
 9         filename: 'bundle.js', 10         // 出口文件夾名
11         path:path.resolve(__dirname,'build'), 12  }, 13  module:{ 14  rules:[ 15  { 16                 test:/(\.jsx|\.js)$/, 17  use:{ 18                     loader:"babel-loader", 19  options:{ 20  presets:[ 21                             "env"
22  ] 23  } 24  }, 25                 exclude:path.resolve(__dirname,"node_modules"), 26                 include:path.resolve(__dirname,"src") 27  } 28  ] 29  } 30 }

 

 

 

入口文件為app.js,你可以隨意寫路徑或者更改js.

 

運行命令:npm run start


正確的運行代碼應該是這樣的(無報錯,無警告),不過最開始運行時產生了一條警告(https://webpack.js.org/concepts/mode/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM