webpack之解析ES6

最新推荐文章于 2025-09-27 14:49:41 发布

原创最新推荐文章于 2025-09-27 14:49:41 发布 · 384 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#构建工具 #打包工具 #webpack

webpack 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍如何使用Babel和Webpack进行项目配置，包括安装必要依赖、创建并配置.babelrc文件、在webpack.config.js中添加loader规则，实现对现代JavaScript语法的转换与打包。

1.首先安装 cnpm i @babel/core @babel/preset-env babel-loader -D

2.然后在项目根目录下创建一个.babelrc文件

3.在.babelrc下增加babel preset配置

{
	"presets":[
    	"@babel/preset-env"
	]
}

4.在webpack.config.js中module添加规则

"use strict";

const path=require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.join(__dirname,'dist'),
        filename:'bundle.js'
    },
    mode:'production',
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'babel-loader'
            }
        ]
    }
}