注意：

本文假设你有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/
        }
    ]
}
}

进行打包