webpack打包转换es6_webpack打包_同时将ES6转为ES5_入门教程

导读：

[导读] webpack打包_同时将ES6转为ES5_入门教程 webpack打包，同时将ES6转为ES5，第一次尝试搞了一下午才弄好，所有的问题均来自ES6转es5上面，可能天分不够把，但愿各大浏览器快点支持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

npm install babel-loader --save-dev

npm install 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文件，即是最终打包出的文件。

以上就是webpack打包_同时将ES6转为ES5_入门教程,请大家多多支持自学php网。