webpack中babel的设置

webpack中使用babel可以把 es6的代码转换在 es5的代码，来适应大多数的浏览器

方法

1 安装 babel-loader babel-core

命令行 npm install --save-dev babel-loader babel-core

2.大webpack.config.js 中配置

//这里解释一下 mode
//webpack4 中的 mode是必须配置的 
//  当mode:none 的时候，打包的代码不会进行任何优化；这样子打包出来的代码是不可用的
//  对于开发环境来说 这样的代码 阅读性不好
//  对于生产环境来说 代码太雍肿
//  所以，当mode: development 时，打包的代码 对开发比较友好
//  所以，当mode：production 时，打包的代码 简洁，压缩等好处


let path = require("path");  //引入 nodejs 的path 函数

module.exports = {
    mode:"none",    //model的值 development/production/none  分别是 development 开发模式                  
                    // production 生产模式   none 不做配置
    entry:{
        app:"./app.js"  //这里要使用相对路径
    },
    
    output:{
        path:path.resolve('./bundle/'),
        filename:"[name].bundle.[hash:5].js"
    },
    
    module:{
        rules:[
            {
                test:/\.js$/,       //匹配文件夹中后缀名是 .js的文件（注意这里不能加 引号）
                exclude:/node_modules/, //排除 node_modules 中的js文件（注意这里不能加引号）
                loader:"babel-loader"            //对匹配的 js文件用 babel来编译
            }
        ]
    }

}

3.webpack.config.js 中配置好后，要想使babel生效，则还要下一步

安装 babel-preset-env

命令行 npm install babel-preset-env --save-dev

安装完成后在项目的根目录中新建 .babelrc 文件

文件中定义如下：

{
"presets": ["env"]
}

参见 https://www.babeljs.cn/docs/setup#installation

这里有一个需要注意的问题

babel-loader 和 babel-core 之间会有版本适配的问题

官方给出的是两个方案

webpack 4.x + babel-loader 8.x + babel 7.x （当babel-loader 的版本是8.x的时候相匹配的 babel为7.x）

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x + babel-loader 7.x + babel 6.x （当babel-loader 的版本是7.x的时候相匹配的 babel为6.x）

npm install -D babel-loader@7 babel-core babel-preset-env webpack

webpack中babel的设置

猜你喜欢