注意：
本文假設(shè)你有webpack 的基礎(chǔ)認識结窘。
本文的目的是將es6代碼轉(zhuǎn)成es5，和使用jslint檢查
項目目錄
1.jpg
開始實戰(zhàn)
創(chuàng)建一個目錄<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 實戰(zhàn)</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的構(gòu)造函數(shù)寫法。然后使用babel轉(zhuǎn)成es5語法。
新建<code>.jshintrc</code>文件
{
// 例如
"camelcase": true,
//jslint的錯誤信息在默認情況下會顯示為warning（警告）類信息
//將emitErrors參數(shù)設(shè)置為true可使錯誤顯示為error（錯誤）類信息
"emitErrors": false,
//jshint默認情況下不會打斷webpack編譯
//如果你想在jshint出現(xiàn)錯誤時露乏，立刻停止編譯
//請設(shè)置failOnHint參數(shù)為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
結(jié)果顯示：
1.jpg
jshint告訴我們 index.js文件第7行末尾少了個分號研铆。
于是，我們將分號加上州叠，重新打包棵红。結(jié)果顯示：
1.jpg
現(xiàn)在結(jié)果正常了。
然后咧栗，我們打開bundle.js文件逆甜，我們可以看到，es6語法被轉(zhuǎn)成了es5語法了致板。
