webpack 搭建es6开发环境
众所周知虽然es6写起来比较简洁（最主要是酷），但由于兼容性导致我们随意使用，所幸babel能帮我们把es6转换为es5，让我们不必再为兼容性而苦恼，下面我就简单讲解下怎么用webpack搭建es6开发环境。
第一步：
创建文件夹，如下：
第二步
打开cmd 切换到目录下
cd/es6webpackpro
然后运行下方命令初始化项目,成功运行之后会发现项目目录下增加了package.json
npm init
第三步：
新建文件夹src，并在src文件夹下新建index.js,并写入内容
[1,2,3].map((item)=>console.log(item))
第四步新建
index.html 在es6webpackpro目录下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>es6webpack</title>
</head>
<body>
<div id="content">test</div>
<script src="./build/bundle.js"></script>
</body>
</html>
第五步：
新建webpack.config.js,写入一下内容
let path = require('path');
let webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode:"development",
output: {
path: __dirname,
filename: './build/bundle.js'
},
module: {
rules: [{
test: /\.js?$/,
exclude: /(node_modules)/,
use:{
loader:"babel-loader",
options:{
presets:[
"env"
]
}
},
}]
},
devServer: {
disableHostCheck: true,
inline: true,
port: 8181
},
}
第六步：
打开package.json修改
"scripts": {
"start": "webpack-dev-server --hot --inline",
"test": "echo \"Error: no test specified\" && exit 1"
},
第七步：
安装相应依赖
npm i webpack -s -d
npm i webpack-cli -s -d
npm i babel-loader -s -d
npm i @babel/core -s -d
npm i babel-preset-env -s -d
npm i webpack-dev-server -s -d
第八步：
运行命令
npm start
项目最终目录
运行结果：