webpack教学（三）babel的使用

上一篇我们有一个知识点漏掉了，就是启动项目的时候我们用的自己搭的本地服务，现在我们用nodejs的一个本地服务模块dev-server

此时挂载一篇dev-server源码讲解的博客https://www.cnblogs.com/wulinzi/p/8110125.html

执行命令

cnpm install --save-dev webpack-dev-server

在webpack.config.js中配置我们的devserver

//配置devserver
    devServer: {
        contentBase: "./", //本地服务器所加载的页面所在的目录
        historyApiFallback: true, //不跳转
        hot: true, //实现热加载         
        port: 8080, //设置端口 
        inline: true //试试刷新
    },

然后在package.js这个npm运行说明书上增加启动命令 就OK了

"start": "webpack-dev-server --open",

好了，开始我们今天的主题babel

想必大家在用vue框架的时候用习惯了import  export 等语法了 突然使用common.js的require很不习惯，但是es6语法可不是能随便用的，有的浏览器是不支持的。这个时候就得需要将es6转成es5了。

首先依赖我们的工具

"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.0",
"babel-runtime": "^6.26.0",

介绍一下这几个东西是干什么的

所需要的依赖：babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtime

babel-loader：在import或加载模块时，对es6代码进行预处理，es6语法转化为es5语法。
babel-core：允许我们去调用babel的api，可以将js代码分析成ast（抽象语法树），方便各个插件分析语法进行相应的处理.
babel-preset-env：指定规范，比如es2015，es2016，es2017，latest，env（包含前面全部）
babel-polyfill：它效仿一个完整的ES2015+环境，使得我们能够使用新的内置对象比如 Promise，静态方法比如Array.from 或者 Object.assign, 实例方法比如 Array.prototype.includes 和生成器函数（提供给你使用 regenerator 插件）。为了达到这一点， polyfill 添加到了全局范围，就像原生类型比如 String 一样。
babel-runtime babel-plugin-transform-runtime：与babel-polyfill作用一样，使用场景不一样。

此时我们在根目录添加文件 名字为.babelrc

这个文件是babel的配置文件，具体里面的配置参数大家可以去官网查查

{
    "presets": [
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
      }]
    ],
    "env": {
      "test": {
        "presets": ["env"]
      }
    }
  }
  

此时我们再来到webpack.config.js文件来配置我们的babel模块。

与devServer模块同级添加以下内容

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

mudule是对于不同的模块的处理规则。

module的rules属性代表不同的处理规则。rules是一个对象。对象的属性有test、use、exclude、include。

use属性是对象数组。数组的话，是从后往前解析。

对象的参数为loader/options。

1是2的简写形式。3是4的简写形式。参考https://blog.csdn.net/qq_33745501/article/details/80271754

1、

module:{
  	rules:[
  	{
  		test:/\.css$/,
  		use:[
  		"style-loader",
  		"css-loader"
  		]
  	}]
  },

2、

module:{
  	rules:[
  	{
  		test:/\.css$/,
  		use:[{loader:"style-loader"},{loader:"css-loader"}]
        }]
}

3、

 {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude:/node_modules/
      },

4、

 {
        test: /\.js$/,
        use[{loader: 'babel-loader'}],
        exclude:/node_modules/
      },

接下来我们之前有一个模块js 叫greeter.js 现在我们重新写一下

// module.exports = function(){
//     var geet = 'hello webpack woshimingling'
//     return geet
// }

const aa = function(){
    var geet = 'hello webpack woshimingling'
    return geet
}
export default aa

用es6导出，相应的导入的方式也要改一下，main.js里面这样写

// var con = require('../greeter.js')
import con from '../greeter.js'
var dom = document.getElementById('mydiv')
dom.innerHTML = con();

好，我们的配置总算是完成了，接下来就开始打包 npm run build

此时就算是配置成功了，打包也成功了。

当时打包的时候碰到了个问题

Error: Cannot find module '@babel/core'

说这个文件找不到，原因是在我们依赖插件版本号的原因，我们的babel-loader是8.几的版本，但是babel-core是6点几的版本，

所以我们只需将bael-loader强行降低到7.几就好啦

cnpm install --save-dev babel-loader@7.1.5

在执行命令 npm run build 就打包成功了