注意：
本文假设你有webpack 的基础认识。
本文的目的是将es6代码转成es5，和使用jslint检查
项目目录
1.jpg
开始实战
创建一个目录<code>webpack-demo6</code>,并安装<code>wbepack</code>。
mkdir webpack-demo6 && cd webpack-demo6
npm init -y
npm install --save-dev webpack
安装 <code>jshint</code>,<code>jshint-loader</code>,<code>babel-core</code>,<code>babel-loader</code>,<code>babel-preset-env</code>
npm install --save-dev jshint jshint-loader babel-core babel-loader babel-preset-env
新建<code>index.html</code>文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack 实战</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
</body>
</html>
新建<code>index.js</code>文件
class Person {
constructor(age, name) {
this.age = age;
this.name = name;
}
dance() {
document.body.innerHTML = 'I Can Dance!'
}
}
let p = new Person(25, 'noshower');
p.dance();
这里我们使用es6的构造函数写法。然后使用babel转成es5语法。
新建<code>.jshintrc</code>文件
{
// 例如
"camelcase": true,
//jslint的错误信息在默认情况下会显示为warning（警告）类信息
//将emitErrors参数设置为true可使错误显示为error（错误）类信息
"emitErrors": false,
//jshint默认情况下不会打断webpack编译
//如果你想在jshint出现错误时，立刻停止编译
//请设置failOnHint参数为true
"failOnHint": false,
// 告诉jshint，我在使用es6语法
"esversion": 6
}
.jshintrc 是jshint的配置文件，不需要指定，jshint会自动引用它。
新建<code>webpack.config.js</code>文件
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
enforce: 'pre',
exclude: /node_modules/,
use: [
{
loader: 'jshint-loader'
}
]
}, {
test: /\.js$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env']
}
}
],
exclude: /node_modules/
}
]
}
}
进行打包
webpack --config webpack.config.js
结果显示：
1.jpg
jshint告诉我们 index.js文件第7行末尾少了个分号。
于是，我们将分号加上，重新打包。结果显示：
1.jpg
现在结果正常了。
然后，我们打开bundle.js文件，我们可以看到，es6语法被转成了es5语法了。
