Repository: vikingmute/webpack-basic-starter
Branch: master
Commit: e95b7eca43a2
Files: 18
Total size: 10.0 KB

Directory structure:
gitextract_jb1c523l/

├── .gitignore
├── README.md
├── app/
│   ├── index.js
│   ├── main.css
│   ├── main.scss
│   ├── mobile.js
│   ├── plugin.js
│   ├── sub.js
│   └── variables.scss
├── bower.json
├── package.json
├── templates/
│   ├── index.html
│   ├── mobile.html
│   └── test.html
├── tests/
│   └── test.js
├── webpack.config.js
├── webpack.production.config.js
└── webpack.test.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
# Logs
logs
*.log

# Runtime data
pids
*.pid
*.seed

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
bower_components
#build result
build


================================================
FILE: README.md
================================================
# webpack-basic-starter

A basic webpack starter kit.

this demo shows how webpack works with sass, es6, third-party library(jQuery, moment .etc), legacy javascript code(like jQuery plugin).

How is it work?
**install the deps**
we are testing library using npm(jquery, moment) and bower (lodash).
```bash
npm install && bower install
```

**run the dev server**
```bash
npm run start
```

then open your http://localhost:8080 see how the magic happens.

**deployment**

```bash
npm run build
```
then you'll find a new build folder generated.

**TODO: testing**

```bash
npm run test
```


================================================
FILE: app/index.js
================================================
import './main.scss';
import generateText from './sub';
import moment from 'moment';
import _ from 'lodash';
/*
 * 引入jquery plugin 有两种方法
 * 第一种把jQuery直接作成一个全局变量 这样在每个脚本中都可以直接使用
 * $,jQuery,window.jQuery这几个变量 配置在webpack.config.js中可以看到
 * 使用了 webpack.ProvidePlugin
 * 第二种方法使用imports-loader,这个插件会给引入的文件前面自动插入一个require,
 * 这里我就把jQuery这个变量插到了plugin.js的最前面
 * 也可以在config.js中module.loaders里面配置
*/

//第一种方法 请看webpack.config.js 使用第一种时候可以完全注释掉第二种

//2nd way start
import $ from 'jquery';
import 'imports?jQuery=jquery!./plugin.js';
//2nd way end



const div  = document.createElement('div');
div.innerHTML = '<h1>Hello World</h1>';
document.body.appendChild(div);
div.appendChild(generateText());

const myPromise = Promise.resolve(42);
myPromise.then((number) => {
  const testArrStr = _.map([1, 2, 3], function(n) { return n * 3; }).toString();
  const currentTime = moment().format();
  //testing template strings
  $('body').append(`<p> promise result is ${number}, now is ${currentTime}, lodash result is ${testArrStr}`);
  //call our jquery plugin!
  $('p').greenify();
});


================================================
FILE: app/main.css
================================================
h1 {
  color: red;
}


================================================
FILE: app/main.scss
================================================
@import "./variables.scss";

h1 {
  color: $red;
  height: 220px;
  background: url('./imgs/avatar.jpg') no-repeat;
}


================================================
FILE: app/mobile.js
================================================
import './main.scss';
import $ from 'jquery';
import 'imports?jQuery=jquery!./plugin.js';

$(document).ready(function() {
  let app  = document.createElement('div');
  app.innerHTML = '<h1>Hello World</h1>';
  document.body.appendChild(app);
  $('h1').greenify();
});


================================================
FILE: app/plugin.js
================================================
//some shitty jquery plugin...
(function ( $ ) {
    const shade = "#556b2f";
    $.fn.greenify = function() {
        this.css( "color", shade );
        return this;
    };
}( jQuery ));


================================================
FILE: app/sub.js
================================================
export default function() {
  var element = document.createElement('h2');
  element.innerHTML = "Hello h2 world hahaha";
  return element;
}


================================================
FILE: app/variables.scss
================================================
$red: red;


================================================
FILE: bower.json
================================================
{
  "name": "webpack",
  "description": "",
  "main": "index.js",
  "authors": [
    "vikingmute@gmail.com"
  ],
  "license": "ISC",
  "homepage": "https://github.com/vikingmute/webpack-basic-starter",
  "moduleType": [],
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "lodash": "~3.10.1"
  }
}


================================================
FILE: package.json
================================================
{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "repository": {
    "private": true
  },
  "scripts": {
    "start": "webpack-dev-server --hot --inline",
    "test": "webpack-dev-server --config webpack.test.config.js",
    "build": "webpack --progress --profile --colors --config webpack.production.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^6.1.0",
    "babel-preset-es2015": "^6.1.18",
    "css-loader": "^0.22.0",
    "file-loader": "^0.8.4",
    "html-webpack-plugin": "^2.22.0",
    "imports-loader": "^0.6.5",
    "jquery": "^2.1.4",
    "jshint": "^2.8.0",
    "jshint-loader": "^0.8.3",
    "mocha": "^2.3.4",
    "mocha-loader": "^0.7.1",
    "moment": "^2.10.6",
    "node-sass": "^3.4.2",
    "sass-loader": "^3.1.1",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.4",
    "webpack-dev-server": "^1.12.1"
  }
}


================================================
FILE: templates/index.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h3>Welcome to webpack</h3>
  </body>

</html>


================================================
FILE: templates/mobile.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <h3>Welcome to mobile page</h3>
  </body>
</html>


================================================
FILE: templates/test.html
================================================
<!DOCTYPE html>
<html>
    <head>
        <title><%= htmlWebpackPlugin.options.title %></title>
        <link rel="stylesheet" href="./node_modules/mocha/mocha.css" />
        <script src="test.build.js"></script>
    </head>
    <body>
    </body>
</html>


================================================
FILE: tests/test.js
================================================
describe("test-case", function() {
	it("should run", function(done) {
		setTimeout(done, 1000);
	});
	it("should fail", function(done) {
		setTimeout(function() {
			throw new Error("Fail");
		}, 1000);
	});
});


================================================
FILE: webpack.config.js
================================================

var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
var BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, 'index.js'),
    mobile: path.resolve(APP_PATH, 'mobile.js'),
    vendors: ['jquery', 'moment', 'lodash']
  },
  output: {
    path: BUILD_PATH,
    filename: '[name].js'
  },
  resolve: {
    alias: {
      lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')
    }
  },
  //enable dev source map
  devtool: 'eval-source-map',
  //enable dev server
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  module: {
    preLoaders: [
      {
        test: /\.jsx?$/,
        include: APP_PATH,
        loader: "jshint-loader"
      }
    ],
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
        include: APP_PATH
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }
    ]
  },

  //custom jshint options
  // any jshint option http://www.jshint.com/docs/options/
  jshint: {
    "esnext": true
  },

  plugins: [
    new HtmlwebpackPlugin({
      title: 'Hello World app',
      template: path.resolve(TEM_PATH, 'index.html'),
      filename: 'index.html',
      chunks: ['app', 'vendors'],
      inject: 'body'
    }),
    /*new HtmlwebpackPlugin({
      title: 'Hello Mobile app',
      template: path.resolve(TEM_PATH, 'mobile.html'),
      filename: 'mobile.html'
    }),*/
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
    //provide $, jQuery and window.jQuery to every script
    /*new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })*/
  ]
};


================================================
FILE: webpack.production.config.js
================================================

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
var BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');

module.exports = {
  entry: {
    app: path.resolve(APP_PATH, 'index.js'),
    mobile: path.resolve(APP_PATH, 'mobile.js'),
    vendors: ['jquery', 'moment', 'lodash']
  },
  output: {
    path: BUILD_PATH,
    filename: '[name].[hash].js'
  },
  resolve: {
    alias: {
      lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: APP_PATH
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }
    ]
  },
  plugins: [
    //enable uglify
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    //split vendors script
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    //generate two pages
    new HtmlwebpackPlugin({
      title: 'Hello World app',
      template: path.resolve(TEM_PATH, 'index.html'),
      filename: 'index.html',
      chunks: ['app', 'vendors'],
      inject: 'body'
    }),
    new HtmlwebpackPlugin({
      title: 'Hello Mobile app',
      template: path.resolve(TEM_PATH, 'mobile.html'),
      filename: 'mobile.html',
      chunks: ['mobile', 'vendors'],
      inject: 'body'
    })
    //provide $, jQuery and window.jQuery to every script
    /*new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })*/
  ]
};


================================================
FILE: webpack.test.config.js
================================================
var path = require('path');
var webpack = require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'app');
var TEST_PATH = path.resolve(ROOT_PATH, 'tests');
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');

module.exports = {
  entry: 'mocha!./tests/test.js',
  output: {
    filename: 'test.build.js',
    path: TEST_PATH
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        include: APP_PATH,
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.scss$/,
        loaders: ['style', 'css', 'sass'],
        include: APP_PATH
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=40000'
      }
    ]
  },
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
  },
  plugins: [
    new HtmlwebpackPlugin({
      title: 'Test case',
      template: path.resolve(TEM_PATH, 'test.html')
    }),
  ]
}