webpack es6支持配置

  1. Install Babel and the presets:

     npm install --save-dev babel-core babel-preset-es2015

  2. Install babel-loader:

     npm install --save-dev babel-loader

  3. Configure Babel to use these presets by adding .babelrc

     { "presets": [ "es2015" ] }

  4. Modify webpack.config.js to process all .js files using babel-loader.

     module.exports = {
     entry: './src/app.js',
     output: {
         path: './bin',
         filename: 'app.bundle.js',
     },
     module: {
         loaders: [{
             test: /\.js$/,
             exclude: /node_modules/,
             loader: 'babel-loader',
         }]
     }
 }

    We are excluding node_modules here because otherwise all external libraries will also go through Babel, slowing down compilation.

  5. Install the libraries you want to use (in this example, jQuery):

     npm install --save jquery babel-polyfill

    We are using --save instead of --save-dev this time, as these libraries will be used in runtime. We also usebabel-polyfill so that ES2015 APIs are available in older browsers.

  6. Edit src/app.js:

     import 'babel-polyfill';
 import cats from './cats';
 import $ from 'jquery';

 $('<h1>Cats</h1>').appendTo('body');
 const ul = $('<ul></ul>').appendTo('body');
 for (const cat of cats) {
     $('<li></li>').text(cat).appendTo(ul);
 }

  7. Bundle the modules using webpack:

     webpack

  8. Add index.html so this app can be run:

     <!DOCTYPE html><body>
 <script src="bin/app.bundle.js"></script>

posted on   荣锋亮  阅读(1831)  评论(0)  编辑  收藏  举报

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

导航

< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5
点击右上角即可分享
微信分享提示