webpack打包转换es6_webpack打包，同时将ES6转为ES5，初探

webpack打包，同时将ES6转为ES5，第一次尝试搞了一下午才弄好，所有的问题均来自ES6转es5上面，可能天分不够把，但愿各大浏览器快点支持ES6吧！忽略nodejs安装。

第一，新建一个项目文件夹，目录类似下面，

第二，进入该目录，按住shift+鼠标右键打开命令提示面板，package.json是通过命令npm init -y生成的。

第三，安装3.10.0版本webpack，不好意思只有3.10.0尝试成功，命令

npm install webpack@3.10.0 --save-dev

第四，安装babel-core,babel-loader,babel-preset-env，可以一个个安装，也可以一起安装：

npm install babel-core --save-dev

npminstall babel-loader --save-dev

npminstall babel-preset-env --save-dev

第五，更改package内容如下：

{"name": "webpackes","version": "1.0.0","description": "","main": "webpack.config.js","dependencies": {},"devDependencies": {"babel-core": "^6.26.3","babel-loader": "^7.1.4","babel-preset-env": "^1.7.0","webpack": "^3.10.0"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack"},"author": "","license": "ISC"}

主要增加一个，build命令，运行npm run build直接打包

第六，新建一个默认webpack.config.js打包js文件，内容如下：

const path = require('path');

module.exports={

entry:path.resolve(__dirname,'src/pixiEngine/Main.js'),

output: {

filename:'bundle.js',

path:path.resolve(__dirname,'build'),

},

module:{

rules:[

{

test:/(\.jsx|\.js)$/,

use:{

loader:"babel-loader",

options:{

presets:["env"]

}

},

exclude:path.resolve(__dirname,"node_modules"),

include:path.resolve(__dirname,"src")

}

]

}

}

最需要注意的就是路径，文件目录里必须有相应的路径，如果没有，会报错，无法打包。比如build目录不存在就会报错。

大功告成，运行npm run build

打包完成，最后打开build文件夹发现生成了一个bundle.js文件，即是最终打包出的文件。

机械式的生搬硬套也可以学到很多东西，就比如说今天输入npm install webpack 输入了几十次，然后就很熟练的记住了，是不是很神奇，不能像记忆碎片里的男主角，一分钟就忘了，什么玩意。

第一次努力的尝试，尝试成功了，很欣慰。