webpack4, babel-loader8, babel7综合使用

最新推荐文章于 2023-09-17 21:38:24 发布

Bright's Dream

最新推荐文章于 2023-09-17 21:38:24 发布

阅读量852

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 Babel JavaScript

本文链接：https://blog.youkuaiyun.com/weixin_37994110/article/details/90136876

前端同时被 3 个专栏收录

34 篇文章

订阅专栏

JavaScript

26 篇文章

订阅专栏

Babel

2 篇文章

订阅专栏

本文介绍了如何在webpack4项目中综合使用babel-loader v8、@babel/core和@babel/preset-env进行JavaScript代码转译。通过安装相关依赖、配置webpack和创建babel.config.js文件，确保代码兼容低版本浏览器。详细步骤包括npm安装、webpack配置文件的修改以及使用@babel/polyfill来处理未转译的ES新特性。

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

安装

npm install --save-dev babel-loader @babel/core @babel/preset-env webpack

使用

安装上面所示的插件，其中babel-loader是webpack的loader，用于打包时处理js文件，@babel/core是babel的核心功能，@babel/preset-env是babel预置的一系列转换ECMAScript2015+的插件。但是有可能不会把你代码中用到的所有特性都进行转译，这是可以通过@babel/polyfill来自动添加转义需要的功能。

npm install --save-dev @babel/polyfill

修改webpack的配置文件

moodule: [
	rules: [
		{
			test: /\.m?js$/,
			exclude: /(node_modules)|(bower_components)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: ['@babel-env']
				}
			}
		}
	]
]

通过options选项可以将参数传给babel-loader

运行打包命令，js文件会被自动编译成兼容低版本浏览器的代码

一个可正确运行的webpack.config.js文件代码如下（添加了polyfill）：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = {
  mode: 'development',
  entry: ["@babel/polyfill", './src/index.js'],
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'pushbox.bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [{
      test: /(\.png)|(\.jpg)|(\.gif)$/,
      use: ['file-loader']
    },
    {
      test: /\.m?js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './index.html',title:'推箱子小游戏'}),
    new CopyWebpackPlugin([{
      from: './src/assets',
      to:'./assets'
    }])
  ],
  optimization: {
    minimize: true
  }
}

module.exports = config;

通过babel配置文件进行配置

通过babel配置文件，也能够向babel传递参数，我们在项目根目录下面新建babel.config.js：

module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          ie: "9"
        }
      }
    ]
  ]
}

presets的详细配置项看这里：https://www.babeljs.cn/docs/babel-preset-env