[
  {
    "path": ".gitignore",
    "content": "# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\n# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git\nnode_modules\nbower_components\n#build result\nbuild\n"
  },
  {
    "path": "README.md",
    "content": "# webpack-basic-starter\n\nA basic webpack starter kit.\n\nthis demo shows how webpack works with sass, es6, third-party library(jQuery, moment .etc), legacy javascript code(like jQuery plugin).\n\nHow is it work?\n**install the deps**\nwe are testing library using npm(jquery, moment) and bower (lodash).\n```bash\nnpm install && bower install\n```\n\n**run the dev server**\n```bash\nnpm run start\n```\n\nthen open your http://localhost:8080 see how the magic happens.\n\n**deployment**\n\n```bash\nnpm run build\n```\nthen you'll find a new build folder generated.\n\n**TODO: testing**\n\n```bash\nnpm run test\n```\n"
  },
  {
    "path": "app/index.js",
    "content": "import './main.scss';\nimport generateText from './sub';\nimport moment from 'moment';\nimport _ from 'lodash';\n/*\n * 引入jquery plugin 有两种方法\n * 第一种把jQuery直接作成一个全局变量 这样在每个脚本中都可以直接使用\n * $,jQuery,window.jQuery这几个变量 配置在webpack.config.js中可以看到\n * 使用了 webpack.ProvidePlugin\n * 第二种方法使用imports-loader,这个插件会给引入的文件前面自动插入一个require,\n * 这里我就把jQuery这个变量插到了plugin.js的最前面\n * 也可以在config.js中module.loaders里面配置\n*/\n\n//第一种方法 请看webpack.config.js 使用第一种时候可以完全注释掉第二种\n\n//2nd way start\nimport $ from 'jquery';\nimport 'imports?jQuery=jquery!./plugin.js';\n//2nd way end\n\n\n\nconst div  = document.createElement('div');\ndiv.innerHTML = '<h1>Hello World</h1>';\ndocument.body.appendChild(div);\ndiv.appendChild(generateText());\n\nconst myPromise = Promise.resolve(42);\nmyPromise.then((number) => {\n  const testArrStr = _.map([1, 2, 3], function(n) { return n * 3; }).toString();\n  const currentTime = moment().format();\n  //testing template strings\n  $('body').append(`<p> promise result is ${number}, now is ${currentTime}, lodash result is ${testArrStr}`);\n  //call our jquery plugin!\n  $('p').greenify();\n});\n"
  },
  {
    "path": "app/main.css",
    "content": "h1 {\n  color: red;\n}\n"
  },
  {
    "path": "app/main.scss",
    "content": "@import \"./variables.scss\";\n\nh1 {\n  color: $red;\n  height: 220px;\n  background: url('./imgs/avatar.jpg') no-repeat;\n}\n"
  },
  {
    "path": "app/mobile.js",
    "content": "import './main.scss';\nimport $ from 'jquery';\nimport 'imports?jQuery=jquery!./plugin.js';\n\n$(document).ready(function() {\n  let app  = document.createElement('div');\n  app.innerHTML = '<h1>Hello World</h1>';\n  document.body.appendChild(app);\n  $('h1').greenify();\n});\n"
  },
  {
    "path": "app/plugin.js",
    "content": "//some shitty jquery plugin...\n(function ( $ ) {\n    const shade = \"#556b2f\";\n    $.fn.greenify = function() {\n        this.css( \"color\", shade );\n        return this;\n    };\n}( jQuery ));\n"
  },
  {
    "path": "app/sub.js",
    "content": "export default function() {\n  var element = document.createElement('h2');\n  element.innerHTML = \"Hello h2 world hahaha\";\n  return element;\n}\n"
  },
  {
    "path": "app/variables.scss",
    "content": "$red: red;\n"
  },
  {
    "path": "bower.json",
    "content": "{\n  \"name\": \"webpack\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"authors\": [\n    \"vikingmute@gmail.com\"\n  ],\n  \"license\": \"ISC\",\n  \"homepage\": \"https://github.com/vikingmute/webpack-basic-starter\",\n  \"moduleType\": [],\n  \"ignore\": [\n    \"**/.*\",\n    \"node_modules\",\n    \"bower_components\",\n    \"test\",\n    \"tests\"\n  ],\n  \"dependencies\": {\n    \"lodash\": \"~3.10.1\"\n  }\n}\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"webpack\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"repository\": {\n    \"private\": true\n  },\n  \"scripts\": {\n    \"start\": \"webpack-dev-server --hot --inline\",\n    \"test\": \"webpack-dev-server --config webpack.test.config.js\",\n    \"build\": \"webpack --progress --profile --colors --config webpack.production.config.js\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"devDependencies\": {\n    \"babel-core\": \"^6.1.21\",\n    \"babel-loader\": \"^6.1.0\",\n    \"babel-preset-es2015\": \"^6.1.18\",\n    \"css-loader\": \"^0.22.0\",\n    \"file-loader\": \"^0.8.4\",\n    \"html-webpack-plugin\": \"^2.22.0\",\n    \"imports-loader\": \"^0.6.5\",\n    \"jquery\": \"^2.1.4\",\n    \"jshint\": \"^2.8.0\",\n    \"jshint-loader\": \"^0.8.3\",\n    \"mocha\": \"^2.3.4\",\n    \"mocha-loader\": \"^0.7.1\",\n    \"moment\": \"^2.10.6\",\n    \"node-sass\": \"^3.4.2\",\n    \"sass-loader\": \"^3.1.1\",\n    \"style-loader\": \"^0.13.0\",\n    \"url-loader\": \"^0.5.6\",\n    \"webpack\": \"^1.12.4\",\n    \"webpack-dev-server\": \"^1.12.1\"\n  }\n}\n"
  },
  {
    "path": "templates/index.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <h3>Welcome to webpack</h3>\n  </body>\n\n</html>\n"
  },
  {
    "path": "templates/mobile.html",
    "content": "<!DOCTYPE html>\n<html>\n  <head>\n    <title><%= htmlWebpackPlugin.options.title %></title>\n  </head>\n  <body>\n    <h3>Welcome to mobile page</h3>\n  </body>\n</html>\n"
  },
  {
    "path": "templates/test.html",
    "content": "<!DOCTYPE html>\n<html>\n    <head>\n        <title><%= htmlWebpackPlugin.options.title %></title>\n        <link rel=\"stylesheet\" href=\"./node_modules/mocha/mocha.css\" />\n        <script src=\"test.build.js\"></script>\n    </head>\n    <body>\n    </body>\n</html>\n"
  },
  {
    "path": "tests/test.js",
    "content": "describe(\"test-case\", function() {\n\tit(\"should run\", function(done) {\n\t\tsetTimeout(done, 1000);\n\t});\n\tit(\"should fail\", function(done) {\n\t\tsetTimeout(function() {\n\t\t\tthrow new Error(\"Fail\");\n\t\t}, 1000);\n\t});\n});\n"
  },
  {
    "path": "webpack.config.js",
    "content": "\nvar path = require('path');\nvar webpack = require('webpack');\nvar HtmlwebpackPlugin = require('html-webpack-plugin');\n\nvar ROOT_PATH = path.resolve(__dirname);\nvar APP_PATH = path.resolve(ROOT_PATH, 'app');\nvar BUILD_PATH = path.resolve(ROOT_PATH, 'build');\nvar TEM_PATH = path.resolve(ROOT_PATH, 'templates');\nvar BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');\n\nmodule.exports = {\n  entry: {\n    app: path.resolve(APP_PATH, 'index.js'),\n    mobile: path.resolve(APP_PATH, 'mobile.js'),\n    vendors: ['jquery', 'moment', 'lodash']\n  },\n  output: {\n    path: BUILD_PATH,\n    filename: '[name].js'\n  },\n  resolve: {\n    alias: {\n      lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')\n    }\n  },\n  //enable dev source map\n  devtool: 'eval-source-map',\n  //enable dev server\n  devServer: {\n    historyApiFallback: true,\n    hot: true,\n    inline: true,\n    progress: true,\n  },\n  module: {\n    preLoaders: [\n      {\n        test: /\\.jsx?$/,\n        include: APP_PATH,\n        loader: \"jshint-loader\"\n      }\n    ],\n    loaders: [\n      {\n        test: /\\.jsx?$/,\n        loader: 'babel',\n        include: APP_PATH,\n        query: {\n          presets: ['es2015']\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],\n        include: APP_PATH\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: 'url?limit=40000'\n      }\n    ]\n  },\n\n  //custom jshint options\n  // any jshint option http://www.jshint.com/docs/options/\n  jshint: {\n    \"esnext\": true\n  },\n\n  plugins: [\n    new HtmlwebpackPlugin({\n      title: 'Hello World app',\n      template: path.resolve(TEM_PATH, 'index.html'),\n      filename: 'index.html',\n      chunks: ['app', 'vendors'],\n      inject: 'body'\n    }),\n    /*new HtmlwebpackPlugin({\n      title: 'Hello Mobile app',\n      template: path.resolve(TEM_PATH, 'mobile.html'),\n      filename: 'mobile.html'\n    }),*/\n    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')\n    //provide $, jQuery and window.jQuery to every script\n    /*new webpack.ProvidePlugin({\n      $: \"jquery\",\n      jQuery: \"jquery\",\n      \"window.jQuery\": \"jquery\"\n    })*/\n  ]\n};\n"
  },
  {
    "path": "webpack.production.config.js",
    "content": "\nvar path = require('path');\nvar HtmlwebpackPlugin = require('html-webpack-plugin');\nvar webpack = require('webpack');\n\nvar ROOT_PATH = path.resolve(__dirname);\nvar APP_PATH = path.resolve(ROOT_PATH, 'app');\nvar TEM_PATH = path.resolve(ROOT_PATH, 'templates');\nvar BUILD_PATH = path.resolve(ROOT_PATH, 'build');\nvar BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');\n\nmodule.exports = {\n  entry: {\n    app: path.resolve(APP_PATH, 'index.js'),\n    mobile: path.resolve(APP_PATH, 'mobile.js'),\n    vendors: ['jquery', 'moment', 'lodash']\n  },\n  output: {\n    path: BUILD_PATH,\n    filename: '[name].[hash].js'\n  },\n  resolve: {\n    alias: {\n      lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')\n    }\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.jsx?$/,\n        loader: 'babel',\n        include: APP_PATH,\n        query: {\n          presets: ['es2015']\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loaders: ['style', 'css', 'sass'],\n        include: APP_PATH\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: 'url?limit=40000'\n      }\n    ]\n  },\n  plugins: [\n    //enable uglify\n    new webpack.optimize.UglifyJsPlugin({minimize: true}),\n    //split vendors script\n    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),\n    //generate two pages\n    new HtmlwebpackPlugin({\n      title: 'Hello World app',\n      template: path.resolve(TEM_PATH, 'index.html'),\n      filename: 'index.html',\n      chunks: ['app', 'vendors'],\n      inject: 'body'\n    }),\n    new HtmlwebpackPlugin({\n      title: 'Hello Mobile app',\n      template: path.resolve(TEM_PATH, 'mobile.html'),\n      filename: 'mobile.html',\n      chunks: ['mobile', 'vendors'],\n      inject: 'body'\n    })\n    //provide $, jQuery and window.jQuery to every script\n    /*new webpack.ProvidePlugin({\n      $: \"jquery\",\n      jQuery: \"jquery\",\n      \"window.jQuery\": \"jquery\"\n    })*/\n  ]\n};\n"
  },
  {
    "path": "webpack.test.config.js",
    "content": "var path = require('path');\nvar webpack = require('webpack');\nvar HtmlwebpackPlugin = require('html-webpack-plugin');\n\nvar ROOT_PATH = path.resolve(__dirname);\nvar APP_PATH = path.resolve(ROOT_PATH, 'app');\nvar TEST_PATH = path.resolve(ROOT_PATH, 'tests');\nvar TEM_PATH = path.resolve(ROOT_PATH, 'templates');\n\nmodule.exports = {\n  entry: 'mocha!./tests/test.js',\n  output: {\n    filename: 'test.build.js',\n    path: TEST_PATH\n  },\n  module: {\n    loaders: [\n      {\n        test: /\\.jsx?$/,\n        loader: 'babel',\n        include: APP_PATH,\n        query: {\n          presets: ['es2015']\n        }\n      },\n      {\n        test: /\\.scss$/,\n        loaders: ['style', 'css', 'sass'],\n        include: APP_PATH\n      },\n      {\n        test: /\\.(png|jpg)$/,\n        loader: 'url?limit=40000'\n      }\n    ]\n  },\n  devServer: {\n    historyApiFallback: true,\n    hot: true,\n    inline: true,\n    progress: true,\n  },\n  plugins: [\n    new HtmlwebpackPlugin({\n      title: 'Test case',\n      template: path.resolve(TEM_PATH, 'test.html')\n    }),\n  ]\n}\n"
  }
]