├── app
├── variables.scss
├── main.css
├── imgs
│ └── avatar.jpg
├── main.scss
├── sub.js
├── plugin.js
├── mobile.js
└── index.js
├── templates
├── index.html
├── mobile.html
└── test.html
├── tests
└── test.js
├── bower.json
├── .gitignore
├── README.md
├── package.json
├── webpack.test.config.js
├── webpack.production.config.js
└── webpack.config.js
/app/variables.scss:
--------------------------------------------------------------------------------
1 | $red: red;
2 |
--------------------------------------------------------------------------------
/app/main.css:
--------------------------------------------------------------------------------
1 | h1 {
2 | color: red;
3 | }
4 |
--------------------------------------------------------------------------------
/app/imgs/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vikingmute/webpack-basic-starter/HEAD/app/imgs/avatar.jpg
--------------------------------------------------------------------------------
/app/main.scss:
--------------------------------------------------------------------------------
1 | @import "./variables.scss";
2 |
3 | h1 {
4 | color: $red;
5 | height: 220px;
6 | background: url('./imgs/avatar.jpg') no-repeat;
7 | }
8 |
--------------------------------------------------------------------------------
/app/sub.js:
--------------------------------------------------------------------------------
1 | export default function() {
2 | var element = document.createElement('h2');
3 | element.innerHTML = "Hello h2 world hahaha";
4 | return element;
5 | }
6 |
--------------------------------------------------------------------------------
/templates/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
5 |
6 |
7 | Welcome to webpack
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/templates/mobile.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
5 |
6 |
7 | Welcome to mobile page
8 |
9 |
10 |
--------------------------------------------------------------------------------
/app/plugin.js:
--------------------------------------------------------------------------------
1 | //some shitty jquery plugin...
2 | (function ( $ ) {
3 | const shade = "#556b2f";
4 | $.fn.greenify = function() {
5 | this.css( "color", shade );
6 | return this;
7 | };
8 | }( jQuery ));
9 |
--------------------------------------------------------------------------------
/tests/test.js:
--------------------------------------------------------------------------------
1 | describe("test-case", function() {
2 | it("should run", function(done) {
3 | setTimeout(done, 1000);
4 | });
5 | it("should fail", function(done) {
6 | setTimeout(function() {
7 | throw new Error("Fail");
8 | }, 1000);
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/templates/test.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | <%= htmlWebpackPlugin.options.title %>
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/app/mobile.js:
--------------------------------------------------------------------------------
1 | import './main.scss';
2 | import $ from 'jquery';
3 | import 'imports?jQuery=jquery!./plugin.js';
4 |
5 | $(document).ready(function() {
6 | let app = document.createElement('div');
7 | app.innerHTML = 'Hello World
';
8 | document.body.appendChild(app);
9 | $('h1').greenify();
10 | });
11 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack",
3 | "description": "",
4 | "main": "index.js",
5 | "authors": [
6 | "vikingmute@gmail.com"
7 | ],
8 | "license": "ISC",
9 | "homepage": "https://github.com/vikingmute/webpack-basic-starter",
10 | "moduleType": [],
11 | "ignore": [
12 | "**/.*",
13 | "node_modules",
14 | "bower_components",
15 | "test",
16 | "tests"
17 | ],
18 | "dependencies": {
19 | "lodash": "~3.10.1"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 |
5 | # Runtime data
6 | pids
7 | *.pid
8 | *.seed
9 |
10 | # Directory for instrumented libs generated by jscoverage/JSCover
11 | lib-cov
12 |
13 | # Coverage directory used by tools like istanbul
14 | coverage
15 |
16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
17 | .grunt
18 |
19 | # node-waf configuration
20 | .lock-wscript
21 |
22 | # Compiled binary addons (http://nodejs.org/api/addons.html)
23 | build/Release
24 |
25 | # Dependency directory
26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
27 | node_modules
28 | bower_components
29 | #build result
30 | build
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webpack-basic-starter
2 |
3 | A basic webpack starter kit.
4 |
5 | this demo shows how webpack works with sass, es6, third-party library(jQuery, moment .etc), legacy javascript code(like jQuery plugin).
6 |
7 | How is it work?
8 | **install the deps**
9 | we are testing library using npm(jquery, moment) and bower (lodash).
10 | ```bash
11 | npm install && bower install
12 | ```
13 |
14 | **run the dev server**
15 | ```bash
16 | npm run start
17 | ```
18 |
19 | then open your http://localhost:8080 see how the magic happens.
20 |
21 | **deployment**
22 |
23 | ```bash
24 | npm run build
25 | ```
26 | then you'll find a new build folder generated.
27 |
28 | **TODO: testing**
29 |
30 | ```bash
31 | npm run test
32 | ```
33 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "repository": {
7 | "private": true
8 | },
9 | "scripts": {
10 | "start": "webpack-dev-server --hot --inline",
11 | "test": "webpack-dev-server --config webpack.test.config.js",
12 | "build": "webpack --progress --profile --colors --config webpack.production.config.js"
13 | },
14 | "author": "",
15 | "license": "ISC",
16 | "devDependencies": {
17 | "babel-core": "^6.1.21",
18 | "babel-loader": "^6.1.0",
19 | "babel-preset-es2015": "^6.1.18",
20 | "css-loader": "^0.22.0",
21 | "file-loader": "^0.8.4",
22 | "html-webpack-plugin": "^2.22.0",
23 | "imports-loader": "^0.6.5",
24 | "jquery": "^2.1.4",
25 | "jshint": "^2.8.0",
26 | "jshint-loader": "^0.8.3",
27 | "mocha": "^2.3.4",
28 | "mocha-loader": "^0.7.1",
29 | "moment": "^2.10.6",
30 | "node-sass": "^3.4.2",
31 | "sass-loader": "^3.1.1",
32 | "style-loader": "^0.13.0",
33 | "url-loader": "^0.5.6",
34 | "webpack": "^1.12.4",
35 | "webpack-dev-server": "^1.12.1"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/app/index.js:
--------------------------------------------------------------------------------
1 | import './main.scss';
2 | import generateText from './sub';
3 | import moment from 'moment';
4 | import _ from 'lodash';
5 | /*
6 | * 引入jquery plugin 有两种方法
7 | * 第一种把jQuery直接作成一个全局变量 这样在每个脚本中都可以直接使用
8 | * $,jQuery,window.jQuery这几个变量 配置在webpack.config.js中可以看到
9 | * 使用了 webpack.ProvidePlugin
10 | * 第二种方法使用imports-loader,这个插件会给引入的文件前面自动插入一个require,
11 | * 这里我就把jQuery这个变量插到了plugin.js的最前面
12 | * 也可以在config.js中module.loaders里面配置
13 | */
14 |
15 | //第一种方法 请看webpack.config.js 使用第一种时候可以完全注释掉第二种
16 |
17 | //2nd way start
18 | import $ from 'jquery';
19 | import 'imports?jQuery=jquery!./plugin.js';
20 | //2nd way end
21 |
22 |
23 |
24 | const div = document.createElement('div');
25 | div.innerHTML = 'Hello World
';
26 | document.body.appendChild(div);
27 | div.appendChild(generateText());
28 |
29 | const myPromise = Promise.resolve(42);
30 | myPromise.then((number) => {
31 | const testArrStr = _.map([1, 2, 3], function(n) { return n * 3; }).toString();
32 | const currentTime = moment().format();
33 | //testing template strings
34 | $('body').append(` promise result is ${number}, now is ${currentTime}, lodash result is ${testArrStr}`);
35 | //call our jquery plugin!
36 | $('p').greenify();
37 | });
38 |
--------------------------------------------------------------------------------
/webpack.test.config.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var webpack = require('webpack');
3 | var HtmlwebpackPlugin = require('html-webpack-plugin');
4 |
5 | var ROOT_PATH = path.resolve(__dirname);
6 | var APP_PATH = path.resolve(ROOT_PATH, 'app');
7 | var TEST_PATH = path.resolve(ROOT_PATH, 'tests');
8 | var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
9 |
10 | module.exports = {
11 | entry: 'mocha!./tests/test.js',
12 | output: {
13 | filename: 'test.build.js',
14 | path: TEST_PATH
15 | },
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.jsx?$/,
20 | loader: 'babel',
21 | include: APP_PATH,
22 | query: {
23 | presets: ['es2015']
24 | }
25 | },
26 | {
27 | test: /\.scss$/,
28 | loaders: ['style', 'css', 'sass'],
29 | include: APP_PATH
30 | },
31 | {
32 | test: /\.(png|jpg)$/,
33 | loader: 'url?limit=40000'
34 | }
35 | ]
36 | },
37 | devServer: {
38 | historyApiFallback: true,
39 | hot: true,
40 | inline: true,
41 | progress: true,
42 | },
43 | plugins: [
44 | new HtmlwebpackPlugin({
45 | title: 'Test case',
46 | template: path.resolve(TEM_PATH, 'test.html')
47 | }),
48 | ]
49 | }
50 |
--------------------------------------------------------------------------------
/webpack.production.config.js:
--------------------------------------------------------------------------------
1 |
2 | var path = require('path');
3 | var HtmlwebpackPlugin = require('html-webpack-plugin');
4 | var webpack = require('webpack');
5 |
6 | var ROOT_PATH = path.resolve(__dirname);
7 | var APP_PATH = path.resolve(ROOT_PATH, 'app');
8 | var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
9 | var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
10 | var BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');
11 |
12 | module.exports = {
13 | entry: {
14 | app: path.resolve(APP_PATH, 'index.js'),
15 | mobile: path.resolve(APP_PATH, 'mobile.js'),
16 | vendors: ['jquery', 'moment', 'lodash']
17 | },
18 | output: {
19 | path: BUILD_PATH,
20 | filename: '[name].[hash].js'
21 | },
22 | resolve: {
23 | alias: {
24 | lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')
25 | }
26 | },
27 | module: {
28 | loaders: [
29 | {
30 | test: /\.jsx?$/,
31 | loader: 'babel',
32 | include: APP_PATH,
33 | query: {
34 | presets: ['es2015']
35 | }
36 | },
37 | {
38 | test: /\.scss$/,
39 | loaders: ['style', 'css', 'sass'],
40 | include: APP_PATH
41 | },
42 | {
43 | test: /\.(png|jpg)$/,
44 | loader: 'url?limit=40000'
45 | }
46 | ]
47 | },
48 | plugins: [
49 | //enable uglify
50 | new webpack.optimize.UglifyJsPlugin({minimize: true}),
51 | //split vendors script
52 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
53 | //generate two pages
54 | new HtmlwebpackPlugin({
55 | title: 'Hello World app',
56 | template: path.resolve(TEM_PATH, 'index.html'),
57 | filename: 'index.html',
58 | chunks: ['app', 'vendors'],
59 | inject: 'body'
60 | }),
61 | new HtmlwebpackPlugin({
62 | title: 'Hello Mobile app',
63 | template: path.resolve(TEM_PATH, 'mobile.html'),
64 | filename: 'mobile.html',
65 | chunks: ['mobile', 'vendors'],
66 | inject: 'body'
67 | })
68 | //provide $, jQuery and window.jQuery to every script
69 | /*new webpack.ProvidePlugin({
70 | $: "jquery",
71 | jQuery: "jquery",
72 | "window.jQuery": "jquery"
73 | })*/
74 | ]
75 | };
76 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 |
2 | var path = require('path');
3 | var webpack = require('webpack');
4 | var HtmlwebpackPlugin = require('html-webpack-plugin');
5 |
6 | var ROOT_PATH = path.resolve(__dirname);
7 | var APP_PATH = path.resolve(ROOT_PATH, 'app');
8 | var BUILD_PATH = path.resolve(ROOT_PATH, 'build');
9 | var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
10 | var BOWER_PATH = path.resolve(ROOT_PATH, 'bower_components');
11 |
12 | module.exports = {
13 | entry: {
14 | app: path.resolve(APP_PATH, 'index.js'),
15 | mobile: path.resolve(APP_PATH, 'mobile.js'),
16 | vendors: ['jquery', 'moment', 'lodash']
17 | },
18 | output: {
19 | path: BUILD_PATH,
20 | filename: '[name].js'
21 | },
22 | resolve: {
23 | alias: {
24 | lodash: path.resolve(BOWER_PATH, 'lodash/lodash.js')
25 | }
26 | },
27 | //enable dev source map
28 | devtool: 'eval-source-map',
29 | //enable dev server
30 | devServer: {
31 | historyApiFallback: true,
32 | hot: true,
33 | inline: true,
34 | progress: true,
35 | },
36 | module: {
37 | preLoaders: [
38 | {
39 | test: /\.jsx?$/,
40 | include: APP_PATH,
41 | loader: "jshint-loader"
42 | }
43 | ],
44 | loaders: [
45 | {
46 | test: /\.jsx?$/,
47 | loader: 'babel',
48 | include: APP_PATH,
49 | query: {
50 | presets: ['es2015']
51 | }
52 | },
53 | {
54 | test: /\.scss$/,
55 | loaders: ['style', 'css?sourceMap', 'sass?sourceMap'],
56 | include: APP_PATH
57 | },
58 | {
59 | test: /\.(png|jpg)$/,
60 | loader: 'url?limit=40000'
61 | }
62 | ]
63 | },
64 |
65 | //custom jshint options
66 | // any jshint option http://www.jshint.com/docs/options/
67 | jshint: {
68 | "esnext": true
69 | },
70 |
71 | plugins: [
72 | new HtmlwebpackPlugin({
73 | title: 'Hello World app',
74 | template: path.resolve(TEM_PATH, 'index.html'),
75 | filename: 'index.html',
76 | chunks: ['app', 'vendors'],
77 | inject: 'body'
78 | }),
79 | /*new HtmlwebpackPlugin({
80 | title: 'Hello Mobile app',
81 | template: path.resolve(TEM_PATH, 'mobile.html'),
82 | filename: 'mobile.html'
83 | }),*/
84 | new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
85 | //provide $, jQuery and window.jQuery to every script
86 | /*new webpack.ProvidePlugin({
87 | $: "jquery",
88 | jQuery: "jquery",
89 | "window.jQuery": "jquery"
90 | })*/
91 | ]
92 | };
93 |
--------------------------------------------------------------------------------