不过使用 ES6 Module 时，ES6 的解构赋值语法这里有一个坑，例如 index.js 中有一行 import {fn, name} from './a.js' ，此时 a.js 中有以下几种写法，大家要注意！
// 正确写法一 export function fn() { console.log('fn') }
export const name = 'b' // 正确写法二 function fn() { console.log('fn') } const name = 'b' export { fn, name }
// 错误写法 function fn() { console.log('fn') } export default { fn, name: 'b' }
该现象的具体原因可参考https://www.jb51.net/article/162079.htm 。下文马上要讲解启动本地服务，读者可以马上写一个 demo 自己验证一下这个现象。
启动本地服务
上文创建的 webpack.dev.js 一直没使用，下面就要用起来。
使用 html
启动本地服务，肯定需要一个 html 页面作为载体，新建一个 src/index.html 并初始化内容
<!DOCTYPE html> <html> <head><title>Document</title></head> <body> <p>this is index html</p> </body> </html>
要使用这个 html 文件，还需要安装 npm i html-webpack-plugin -D ，然后配置 build/webpack.common.js ，因为无论 dev 还是 prod 都需要打包 html 文件。
plugins: [ new HtmlWebpackPlugin({ template: path.join(srcPath, 'index.html'), filename: 'index.html' }) ]
重新运行 npm run build 会发现打包出来了 dist/index.html ，且内部已经自动插入了打包的 js 文件。
webpack-dev-server
有了 html 和 js 文件，就可以启动服务了。首先安装 npm i webpack-dev-server -D ，然后打开 build/webpack.dev.js配置。只有运行代码才需要本地 server ，打包代码时不需要。
devServer: { port: 3000, progress: true, // 显示打包的进度条 contentBase: distPath, // 根目录 open: true, // 自动打开浏览器 compress: true // 启动 gzip 压缩 }
打开 package.json 修改 scripts ，增加 "dev": "webpack-dev-server --config build/webpack.dev.js", 。然后运行 npm run dev ，打开浏览器访问 localhost:3000 即可看到效果。
解决跨域
实际开发中，server 端提供的端口地址和前端可能不同，导致 ajax 收到跨域限制。使用 webpack-dev-server 可配置代理，解决跨域问题。如有需要，在 build/webpack.dev.js 中增加如下配置。
devServer: { // 设置代理 proxy: { // 将本地 /api/xxx 代理到 localhost:3000/api/xxx '/api': 'http://localhost:3000', // 将本地 /api2/xxx 代理到 localhost:3000/xxx '/api2': { target: 'http://localhost:3000', pathRewrite: { '/api2': '' } } }
处理 ES6
使用 babel
由于现在浏览器还不能保证完全支持 ES6 ，将 ES6 编译为 ES5 ，需要借助 babel 这个神器。安装 babel npm i babel-loader @babel/core @babel/preset-env -D ，然后修改 build/webpack.common.js 配置
module: { rules: [ { test: /\.js$/, loader: ['babel-loader'], include: srcPath, exclude: /node_modules/ }, ] },
还要根目录下新建一个 .babelrc json 文件，内容下
{ "presets": ["@babel/preset-env"], "plugins": [] }
在 src/index.js 中加入一行 ES6 代码，如箭头函数 const fn = () => { console.log('this is fn') } 。然后重新运行 npm run dev，可以看到浏览器中加载的 js 中，这个函数已经被编译为 function 形式。
使用高级特性
babel 可以解析 ES6 大部分语法特性，但是无法解析 class 、静态属性、块级作用域，还有很多大于 ES6 版本的语法特性，如装饰器。因此，想要把日常开发中的 ES6 代码全部转换为 ES5 ，还需要借助很多 babel 插件。
安装 npm i @babel/plugin-proposal-class-properties @babel/plugin-transform-block-scoping @babel/plugin-transform-classes -D ，然后配置 .babelrc
{ "presets": ["@babel/preset-env"], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-transform-block-scoping", "@babel/plugin-transform-classes" ] }
在 src/index.js 中新增一段 class 代码，然后重新运行 npm run build ，打包出来的代码会将 class 转换为 function 形式。
source map
source map 用于反解析压缩代码中错误的行列信息，dev 时代码没有压缩，用不到 source map ，因此要配置 build/webpack.prod.js