使用webpack编译es6代码的方法步骤
前言
团队使用的webpack功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于webpack的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置webpack，认真体验一下配置过程。文章内容过于简单，如果有webpack使用经验的人，就不用往下看啦。
版本说明
本文使用的webpack的版本为：4.30.0
开始搭建
本文的目的是使用webpack完成es6的编译，没想到过程过于简单。
安装node与npm镜像
安装node
安装npm淘宝镜像
安装webpack与webpack-cli
打开或者新建一个项目，使用命令行安装webpack与webpack-cli：
$cnpminstall--save-devwebpack-cli
安装es6的编译组件
使用命令行安装babel-loader：
$cnpminstall--save-devbabel-loader@babel/core@babel/preset-envwebpack
创建文件目录
我创建的文件目录如下：
webpack-es6 |-/dist |-index.html |-/src |-index.js
定义打包的入口与出口
项目目录下新建webpack.config.js文件，并按照文件目录配置打包的入口和出口：
constpath=require('path');
module.exports={
entry:'./src/index.js',//定义入口js，也就是编译前的js
output:{
filename:'index.js',//定义打包输出的js的文件名
path:path.resolve(__dirname,'dist')//输出js的目录
}
};
添加js文件的处理规则
在webpack.config.js文件中添加js文件的处理规则：
constpath=require('path');
module.exports={
entry:'./src/index.js',
output:{
filename:'index.js',
path:path.resolve(__dirname,'dist')
}，
//以下代码为新添加代码
module:{
rules:[
{
test:/\.js$/,//匹配所有js文件
loader:'babel-loader'//使用babel-loader处理js文件
},
]
},
};
添加npm脚本
在package.json文件中添加npm脚本：
{
//...省略代码
"scripts":{
"test":"echo\"Error:notestspecified\"&&exit1",
"build":"webpack"//添加此行，使用build命令代替npx命令
},
//...省略代码
}
配置完成
以上就完成了webpack打包es6的配置，此时的文件目录如下：
webpack-es6 |-node_modules |-/dist |-index.html |-/src |-index.js |-package.json |-package-lock.json |-webpack.config.js
添加代码
接下来我们添加代码测试配置是否成功。
文件./src/index.js添加代码：
classClass{
constructor(){
this.str='success';
}
appendToBody(){
constp=document.createElement('p');
p.innerHTML=this.str;
document.body.appendChild(p);
}
}
constobj=newClass();
obj.appendToBody();
文件./dist/index.html添加代码：