// src/app.js

const root = document.querySelector('#root')

root.innerHTML = `

Hello webpack.

// webpack.config.js

const webpack = require('webpack')

const path = require('path')

const config = {

context: path.resolve(__dirname, 'src'),

entry: './app.js',

output: {

path: path.resolve(__dirname, 'dist'),

filename: 'bundle.js'

},

module: {

rules: [{

test: /\.js$/,

include: path.resolve(__dirname, 'src'),

use: [{

loader: 'babel-loader',

options: {

presets: [

['es2015', { modules: false }]

]

}

}]

}]

}

}

module.exports = config

上面的配置是一个普通的出发点，它通知webpack将入口文件src/app.js编译输出到文件/dist/bundle.js中、使用babel将所有的.js文件从ES2015转换成ES5。

为了让它可以转换到ES5格式的JS文件，我们需要安装三个包：babel-core、webpack加载器babel-loader和预置babel-preset-es2015。使用{ modules: false }让Tree Shaking 从打包文件中删除未使用的导出项（exports）以减少文件大小。

npm install babel-core babel-loader babel-preset-es2015 --save-dev

最后，用以下内容替换package.json的scripts部分：

"scripts": {

"start": "webpack --watch",