导读:
[导读] 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网。