webpack

npx 已添加如下 module loaders

• eslint-loader 检查 js 格式合法性，保证项目代码风格统一

• babel-loader ECMAScript 6 语法支持，将代码转成 ES 5

• json-loader 支持 require json 文件

• handlebars-loader 支持 handlebars 模板

• url-loader

• css-loader

npx 以 .wp.js 后缀结尾的文件作为入口文件。

通过 webpack.DefinePlugin，js 中能直接引用环境下的自定义变量，以前文所述的 config.json 举例

client.publicPath
// development => http://127.0.0.1:9000
// experiment => http://exp.website.com
// production => http://prod.website.com

npx 也能处理 html 目录内的 .html、.hbs 文件（排除 partial 目录），这里用到 html-webpack-plugin 插件。我在这里加了自动注入的特性，模板文件如果有对应的 js 入口文件相对应，编译后的模板文件将通过 script 标签引入该 js 文件。支持 handlebars helper，有提供一个叫 config 的 helper，用于将 config.json 的环境自定义变量输出到 html 中，使用方法如 {{config 'client.publicPath'}}。如果还不能满足你的需求，可以在 client/js/hbs-helper 目录下添加自己的 helper。