babel-webpack简易安装使用笔记(更新中)

babel是es6及es2017转es5的公认好工具，（虽然说是为了兼容万恶的ie），接下来为你们带来babel-webpack的简易安装教程，本人水平有限，若有纰漏或错误之处，请与评论区指出，但愿你们不吝赐教

看了babel和官网和webpack的文档，发现好多坑啊，因此在这里写一篇文章，但愿能帮助你们

环境的配置

babel和webpack的环境比较坑，咱们须要安装的如下几个环境：

·babel-loader
·babel-core
·babel-preset-env
·babel-pollyfill
·webpack

若是你没有装node，那就先安装node吧
传送门：http://www.runoob.com/nodejs/...
国内镜像（必装）:https://cnodejs.org/topic/4f9...

那么开始吧

第一步

npm init -y

或者

npm init

而后本身选择相应的配置

如今目录应该是这样的：

/
——package.json

第二步，安装上面所提到的几个环境

npm i -D babel-loader babel-core babel-preset-env babel-polyfill webpack

若是报错权限不足的话，就再执行一次，暴力膜

如今的目录结构：

.
|-- node_modules
`-- package.json

安装完成之后，还须要配置babel环境和webpack的设置

第三步,配置webpack.config.js

在/目录（根目录下新建一个webpack.config.js文件，而后复制如下代码）

const path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

如今的目录结构：

.
|-- node_modules
|-- package.json
`-- webpack.config.js

第四步，配置babel预设文件

咱们须要在这一步在根目录()新建一个.babelrc文件，可是用windows的文件管理器是作不到的，怎么办呢？咱们能够用编辑器或者git bash建立一个文件

echo > .babelrc

好的，如今打开目录，出现了.babelrc文件，那么，咱们来配置一下babel的预设环境吧
在.babelrc中粘贴以下代码：

{
  "presets": ["env"]
}

自此，咱们基本的环境就搭建完毕了,那么接下来咱们来构建咱们第一个项目吧
如今的目录结构：

.
|-- node_modules
|-- package.json
|-- .babelrc
`-- webpack.config.js

第五步，新建index.js和index.html文件

在根目录下新建src目录和dist目录

mkdir src dist

在src/目录下新建一个文件index.js
内容为

import "babel-polyfill";
let name = 'max';
console.log(Number.isNaN(0));

蓝后，在根目录下面建一个index.html
内容为

<script src="./dist/bundle.js" charset="utf-8"></script>

好的，至此项目建立完毕，能够开始编译了
如今的目录结构为：

.
|-- .babelrc
|-- dist
|-- index.html
|-- node_modules
|   `-- .staging
|-- package.json
|-- src
|   `-- index.js
`-- webpack.config.js

index.js文件会编译成dist目录里面的文件，具体的转换规则在webpack.config.js中，之后更新时会介绍具体用法

第六步，编译文件

在命令行中输入
ps:根据下载的方式不一样可能有不一样的路径

node ./node_modules/webpack/bin/webpack.js

完成后会提示

$ node ./node_modules/webpack/bin/webpack.js
Hash: a7e9dbe767d3662fefe0
Version: webpack 3.8.1
Time: 17858ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  264 kB       0  [emitted]  [big]  main
  [89] (webpack)/buildin/global.js 488 bytes {0} [built]
 [124] ./src/index.js 90 bytes {0} [built]
    + 325 hidden modules

那么恭喜你，基本ok了

而后打开index.html,打开console，若是出现false则安装好了

本文章正在更新，若是有错误或者遇到的地方欢迎在评论区指出，我会尽可能解决问题