webpack4.x下babel的安装、配置及使用

0.下载node（8.10）
1.安装G盘，点击path
webpack配置步骤：
0、node文件夹打开cmd
1、创建工程目录；mkdir webpack0然后cd webpack0
2、初始化工程目录：npm init。 
3、全局安装：npm install -g webpack 
4、全局安装npm install -g webpack-cli
5、工程目录创建src文件夹：手动建立index.js，index.html
6、在package.json中scripts中加入两个成员：
"dev":"webpack --mode development","build":"webpack --mode production"配置dev和build的脚本，只需运行npm run dev/build，作用相同。 (npm run dev或npm run build)
7.下载安装style-loader和css-loader：npm install --save-dev style-loader css-loader
  下载html-webpack-plugin：npm install html-webpack-plugin --save-dev
 一、npm i babel-core babel-loader babel-preset-env --save-devbabel-loader：就是用于将ES6或更高版本标准的JS转换成ES5的loader：

二、配置babel规则：

第1方法：在package.json文件中增加一个“babel"属性：

"babel":{
  "presets": ["env"],
  "plugins": []
}
第2方法：在项目根目录下新建.babelrc文件：
{
  "presets": ["env"]

}

三、建立并配置webpack.config.js文件：

module.exports={

    module:{
        rules:[
            {
                test: /\.js$/,
                 exclude: /node_modules/, 
                 loader: "babel-loader"
            }
        ]
    }

}

根目录：src文件夹index.js:

var a=require('./a.js');
function hello(str){
alert(str);
}
hello('hello world');

a.arrowTest();

和src文件夹a.js：

exports.arrowTest=function(){
alert([1,2,3].map(n=> n+1));

}

根目录：index.html：

 
 
 
 
  


 

执行：npm run build

结果：第一次是"hello world"，第二次是"2,3,4"。