webpack+babel常见问题

最新推荐文章于 2022-07-22 22:04:58 发布

原创最新推荐文章于 2022-07-22 22:04:58 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #babel #js #html #node

webpack 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍Webpack中Babel配置的两种方法，并介绍如何通过Babel polyfill来兼容旧版浏览器，同时提供排除node_modules文件夹的方法以提高编译速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习`webpack`打包的时候，在babel上踩了几个坑，领导又要兼容IE，所以在这里写一下吧

1. 首先是在使用`babel-loader`的时候，需要配置，如果没有配置的情况下，IE会报语法错误的报错，所以需要配置一下

第一种配置方法是直接在webpack.config.js中写出来

        {
            test:/\.js$/,
            use: {
                loader: 'babel-loader',
                options: {
                  presets: ['env']
                }
              },
            include: path.resolve(__dirname,'src')    
        },

第二种配置方法是在项目根目录下新建一个配置文件.babelrc

这里写图片描述

配置如下

         {
            "presets": [
              "latest",
              "react",
              "stage-2"
            ],
            "plugins": []
          }

2.babel-polyfill

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。Babel 默认不转码的 API 非常多，详细清单可以查看 definitions.js 文件

所以需要安装polyfill

$ npm install -save-dev babel-polyfill

接下来有三种引入方式
1. 在webpack配置文件中引入

module.exports = { entry: ['babel-polyfill', './app/js'] }

2. 在入口js文件中引用

import "babel-polyfill"

3. 同是js文件中引用

require("babel-polyfill");

3.babel会编译会包含node_modules

node_module中有大量的js文件，编译的时候会很慢，所以应该排除这个文件夹，有两种解决方法

只包含要编译的文件夹

  include: path.resolve(__dirname,'src')

排除node_modules
```
  exclude:/node_modules/
```

webpack+babel常见问题

学习webpack打包的时候，在babel上踩了几个坑，领导又要兼容IE，所以在这里写一下吧

1. 首先是在使用babel-loader的时候，需要配置，如果没有配置的情况下，IE会报 语法错误的报错，所以需要配置一下

2.babel-polyfill

3.babel会编译会包含node_modules

学习`webpack`打包的时候，在babel上踩了几个坑，领导又要兼容IE，所以在这里写一下吧

1. 首先是在使用`babel-loader`的时候，需要配置，如果没有配置的情况下，IE会报语法错误的报错，所以需要配置一下