├── samples
├── simple
│ ├── index.js
│ ├── libs
│ │ └── hello.js
│ └── webpack.config.js
├── loaders
│ ├── styles
│ │ ├── main.sass
│ │ └── module.sass
│ ├── libs
│ │ └── constants.js
│ ├── index.js
│ └── webpack.config.js
├── plugins
│ ├── styles
│ │ ├── main.sass
│ │ └── module.sass
│ ├── libs
│ │ └── constants.js
│ ├── index.js
│ └── webpack.config.js
├── basicloaders
│ ├── src
│ │ ├── sass
│ │ │ └── main.sass
│ │ ├── css
│ │ │ ├── main.css
│ │ │ └── cssResolvedByFileloader.css
│ │ ├── coffee
│ │ │ └── main.coffee
│ │ ├── images
│ │ │ └── ackee.png
│ │ ├── libs
│ │ │ ├── lib3.js
│ │ │ ├── lib2.js
│ │ │ └── lib.js
│ │ ├── fonts
│ │ │ └── OpenSans-Regular.ttf
│ │ ├── index.html
│ │ └── index.js
│ └── webpack.config.js
├── vendors
│ ├── src
│ │ ├── index.js
│ │ └── login.js
│ ├── libs
│ │ └── lib.js
│ └── webpack.config.js
├── deployment
│ ├── src
│ │ ├── index.js
│ │ └── login.js
│ ├── libs
│ │ └── lib.js
│ └── webpack.config.js
├── devserver
│ ├── src
│ │ ├── index.js
│ │ ├── login.js
│ │ └── index.html
│ ├── libs
│ │ └── lib.js
│ └── webpack.config.js
└── multipoint
│ ├── index.js
│ ├── login.js
│ ├── libs
│ └── hello.js
│ └── webpack.config.js
├── .gitignore
├── .editorconfig
├── LICENSE
├── package.json
├── README.md
└── yarn.lock
/samples/simple/index.js:
--------------------------------------------------------------------------------
1 | import './libs/hello';
2 |
--------------------------------------------------------------------------------
/samples/loaders/styles/main.sass:
--------------------------------------------------------------------------------
1 | @import './module.sass'
2 |
--------------------------------------------------------------------------------
/samples/plugins/styles/main.sass:
--------------------------------------------------------------------------------
1 | @import './module.sass'
2 |
--------------------------------------------------------------------------------
/samples/simple/libs/hello.js:
--------------------------------------------------------------------------------
1 | console.log('Hello world');
2 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/sass/main.sass:
--------------------------------------------------------------------------------
1 | body
2 | background: blue
3 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | color: white;
3 | }
4 |
--------------------------------------------------------------------------------
/samples/loaders/styles/module.sass:
--------------------------------------------------------------------------------
1 | $color: black
2 |
3 | .module
4 | color: $color
5 |
--------------------------------------------------------------------------------
/samples/plugins/styles/module.sass:
--------------------------------------------------------------------------------
1 | $color: black
2 |
3 | .module
4 | color: $color
5 |
--------------------------------------------------------------------------------
/samples/vendors/src/index.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('index');
4 |
--------------------------------------------------------------------------------
/samples/vendors/src/login.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('login');
4 |
--------------------------------------------------------------------------------
/samples/deployment/src/index.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('index');
4 |
--------------------------------------------------------------------------------
/samples/deployment/src/login.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('login');
4 |
--------------------------------------------------------------------------------
/samples/devserver/src/index.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('index');
4 |
--------------------------------------------------------------------------------
/samples/devserver/src/login.js:
--------------------------------------------------------------------------------
1 | import {hello} from '../libs/lib';
2 |
3 | hello('login');
4 |
--------------------------------------------------------------------------------
/samples/loaders/libs/constants.js:
--------------------------------------------------------------------------------
1 | const type = 'ES6';
2 | export const test = `Ahoj ${type}`;
3 |
--------------------------------------------------------------------------------
/samples/multipoint/index.js:
--------------------------------------------------------------------------------
1 | import {helloIndex} from './libs/hello';
2 |
3 | helloIndex();
4 |
--------------------------------------------------------------------------------
/samples/multipoint/login.js:
--------------------------------------------------------------------------------
1 | import {helloLogin} from './libs/hello';
2 |
3 | helloLogin();
4 |
--------------------------------------------------------------------------------
/samples/plugins/libs/constants.js:
--------------------------------------------------------------------------------
1 | const type = 'ES6';
2 | export const test = `Ahoj ${type}`;
3 |
--------------------------------------------------------------------------------
/samples/vendors/libs/lib.js:
--------------------------------------------------------------------------------
1 | export const hello = (who) => {
2 | console.log(`Hello ${who}`);
3 | };
4 |
--------------------------------------------------------------------------------
/samples/deployment/libs/lib.js:
--------------------------------------------------------------------------------
1 | export const hello = (who) => {
2 | console.log(`Hello ${who}`);
3 | };
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by .ignore support plugin (hsz.mobi)
2 | .idea/
3 | node_modules/
4 | npm-debug.log
5 | **/build
6 | **/.DS_Store
7 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/coffee/main.coffee:
--------------------------------------------------------------------------------
1 | test = () -> console.log "Coffee working"
2 |
3 | module.exports = {
4 | coffee: test,
5 | }
6 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/images/ackee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jancama2/webpack-sample-configs/HEAD/samples/basicloaders/src/images/ackee.png
--------------------------------------------------------------------------------
/samples/basicloaders/src/libs/lib3.js:
--------------------------------------------------------------------------------
1 | export const addText = () => {
2 | window.$('body').append('Added by exposed jquery
');
3 | };
4 |
--------------------------------------------------------------------------------
/samples/loaders/index.js:
--------------------------------------------------------------------------------
1 | import './styles/main.sass';
2 | import {test} from './libs/constants';
3 |
4 | (() => {
5 | console.log(test);
6 | })();
7 |
8 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/fonts/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jancama2/webpack-sample-configs/HEAD/samples/basicloaders/src/fonts/OpenSans-Regular.ttf
--------------------------------------------------------------------------------
/samples/basicloaders/src/libs/lib2.js:
--------------------------------------------------------------------------------
1 | export const changeLogoSize = () => {
2 | $('body div').css({
3 | 'width': '300px',
4 | 'height': '300px'
5 | })
6 | };
7 |
--------------------------------------------------------------------------------
/samples/multipoint/libs/hello.js:
--------------------------------------------------------------------------------
1 | export function helloIndex () {
2 | console.log('hello index');
3 | }
4 |
5 | export function helloLogin () {
6 | console.log('hello login');
7 | }
8 |
--------------------------------------------------------------------------------
/samples/devserver/libs/lib.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 |
3 | export const hello = (who) => {
4 | console.log(`Hello ${who}`);
5 | $('body').prepend($(`Hello from ${who}
`))
6 | };
7 |
--------------------------------------------------------------------------------
/samples/plugins/index.js:
--------------------------------------------------------------------------------
1 | import './styles/main.sass';
2 | import {test} from './libs/constants';
3 |
4 | (() => {
5 | console.log(test);
6 | console.log(process.env.NODE_ENV);
7 | })();
8 |
9 |
--------------------------------------------------------------------------------
/samples/simple/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | context: path.resolve(__dirname),
5 | entry: './index.js',
6 | output: {
7 | path: path.join(__dirname, 'build'),
8 | filename: 'index.js',
9 | }
10 | };
11 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/libs/lib.js:
--------------------------------------------------------------------------------
1 | import $ from 'jquery';
2 |
3 | export const hello = (who) => {
4 | console.log(`Hello ${who}`);
5 | $('body').prepend($(`Hello from ${who}
`))
6 | };
7 |
8 | export const addLogo = () => {
9 | $('body').append($(``))
10 | };
11 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Index
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/samples/devserver/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Index
6 |
7 |
8 |
9 |
10 | Login
11 |
12 |
13 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/css/cssResolvedByFileloader.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'OpenSans';
3 | src: url('../fonts/OpenSans-Regular.ttf') format('truetype')
4 | }
5 |
6 | body {
7 | font-family: "OpenSans", serif;
8 | }
9 |
10 | body div:first-of-type {
11 | width: 138px;
12 | height: 138px;
13 | background: url('../images/ackee.png');
14 | }
15 |
--------------------------------------------------------------------------------
/samples/multipoint/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | context: path.resolve(__dirname),
5 | entry: {
6 | 'index': './index.js',
7 | 'login': './login.js'
8 | },
9 | output: {
10 | path: path.join(__dirname, 'build'),
11 | filename: '[name].js',
12 | // filename: '[hash].js',
13 | // filename: '[chunkhash].js',
14 | }
15 | };
16 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | # EditorConfig is awesome: http://EditorConfig.org
2 |
3 | # top-most EditorConfig file
4 | root = true
5 |
6 | # Unix-style newlines with a newline ending every file
7 | [*]
8 | end_of_line = lf
9 | insert_final_newline = true
10 |
11 | # Matches multiple files with brace expansion notation
12 | # Set default charset
13 | [*.{js,py}]
14 | charset = utf-8
15 |
16 | # Indentation override for all JS under lib directory
17 | [*.js]
18 | indent_style = space
19 | indent_size = 4
20 |
21 | # Matches the exact files either package.json or .travis.yml
22 | [{package.json,.travis.yml}]
23 | indent_style = space
24 | indent_size = 4
25 |
--------------------------------------------------------------------------------
/samples/basicloaders/src/index.js:
--------------------------------------------------------------------------------
1 | import {hello, addLogo} from './libs/lib';
2 |
3 | // Using imports loader to set lib2 module dependency
4 | import {changeLogoSize} from 'imports-loader?$=jquery!./libs/lib2';
5 |
6 | // Exposing jQuery into window.$ for lib3 module
7 | import 'expose-loader?$!jquery';
8 | import {addText} from './libs/lib3';
9 |
10 | // Classic Sass compiling
11 | import './sass/main.sass';
12 |
13 | // Not loaded by css loader, but only style loader and file loader thus it is handled as file
14 | import "style-loader/url!file-loader?name=css/[name].[ext]!./css/main.css";
15 |
16 | // Loaded via css loader which allows file-loader to resolve @import and url()
17 | import './css/cssResolvedByFileloader.css';
18 |
19 | // Trying to use coffee script
20 | import {coffee} from './coffee/main.coffee';
21 |
22 | hello('index');
23 | addLogo();
24 | changeLogoSize();
25 | addText();
26 |
27 | coffee();
28 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/samples/loaders/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 |
3 | module.exports = {
4 | context: path.resolve(__dirname),
5 | entry: './index.js',
6 | output: {
7 | path: path.join(__dirname, 'build'),
8 | filename: 'index.js',
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.js$/,
14 | use: [
15 | {
16 | loader: 'babel-loader',
17 | options: {
18 | presets: ['latest', 'react']
19 | }
20 | }
21 | ]
22 | },
23 | {
24 | test: /\.sass$/,
25 | use: [
26 | {
27 | loader: 'style-loader'
28 | },
29 | {
30 | loader: 'css-loader'
31 | },
32 | {
33 | loader: 'sass-loader'
34 | }
35 | ]
36 | }
37 | ]
38 | }
39 | };
40 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 jancama2
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/samples/plugins/webpack.config.js:
--------------------------------------------------------------------------------
1 | const webpack = require('webpack');
2 | const path = require('path');
3 | const Extract = require('extract-text-webpack-plugin');
4 |
5 | module.exports = {
6 | context: path.resolve(__dirname),
7 | entry: './index.js',
8 | output: {
9 | path: path.join(__dirname, 'build'),
10 | filename: 'index.js',
11 | },
12 | module: {
13 | rules: [
14 | {
15 | test: /\.js$/,
16 | use: [
17 | {
18 | loader: 'babel-loader',
19 | options: {
20 | presets: ['latest', 'react']
21 | }
22 | }
23 | ]
24 | },
25 | {
26 | test: /\.sass$/,
27 | loader: Extract.extract({
28 | fallback: 'style-loader',
29 | use: 'css-loader!sass-loader'
30 | })
31 | },
32 | ]
33 | },
34 | plugins: [
35 | new Extract({
36 | filename: 'bundled-sass.css',
37 | }),
38 | new webpack.optimize.UglifyJsPlugin({
39 | minimize: true,
40 | }),
41 | new webpack.EnvironmentPlugin([
42 | 'NODE_ENV',
43 | ]),
44 | ]
45 | }
46 | ;
47 |
--------------------------------------------------------------------------------
/samples/deployment/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const webpack = require('webpack');
4 | const merge = require('webpack-merge');
5 | const Extract = require('extract-text-webpack-plugin');
6 |
7 | const enviroment = process.env.NODE_ENV;
8 |
9 | const PATHS = {
10 | app: path.join(__dirname, 'src'),
11 | build: path.join(__dirname, 'build')
12 | };
13 |
14 | const FILENAMES = {
15 | build: '[name].js',
16 | sass: 'sass.build.css'
17 | };
18 |
19 | const FILES = {};
20 | fs.readdirSync(PATHS.app).forEach((file) => {
21 | const match = file.match(/(.*)\.(js|jsx)$/);
22 | if (match) {
23 | FILES[match[1]] = `./${file}`;
24 | }
25 | });
26 |
27 | console.log(`Building Webpack project with enviroment "${enviroment}"`);
28 |
29 | let config = {
30 | context: PATHS.app,
31 | entry: FILES,
32 | output: {
33 | path: PATHS.build,
34 | filename: FILENAMES.build,
35 | },
36 | module: {
37 | rules: [
38 | {
39 | test: /\.js$/,
40 | use: [
41 | {
42 | loader: 'babel-loader',
43 | options: {
44 | presets: ['latest', 'react']
45 | }
46 | }
47 | ]
48 | },
49 | {
50 | test: /\.sass$/,
51 | loader: Extract.extract({
52 | fallback: 'style-loader',
53 | use: 'css-loader!sass-loader'
54 | })
55 | },
56 | ]
57 | },
58 | plugins: [
59 | new Extract({
60 | filename: FILENAMES.sass,
61 | }),
62 | new webpack.EnvironmentPlugin([
63 | 'NODE_ENV',
64 | ]),
65 | ]
66 | };
67 |
68 | let envConfig = {};
69 |
70 | if (enviroment === 'production') {
71 | envConfig.plugins = [
72 | new webpack.optimize.UglifyJsPlugin({
73 | minimize: true,
74 | })
75 | ];
76 | envConfig.devtool = 'source-map';
77 | } else {
78 | envConfig.devtool = 'eval';
79 | }
80 |
81 | module.exports = merge(config, envConfig);
82 |
--------------------------------------------------------------------------------
/samples/vendors/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const webpack = require('webpack');
5 | const merge = require('webpack-merge');
6 | const Extract = require('extract-text-webpack-plugin');
7 |
8 | const packages = require('../../package.json');
9 |
10 | const enviroment = process.env.NODE_ENV;
11 |
12 | const PATHS = {
13 | app: path.join(__dirname, 'src'),
14 | build: path.join(__dirname, 'build')
15 | };
16 |
17 | const FILENAMES = {
18 | build: '[name].js',
19 | vendor: 'vendors.js',
20 | sass: 'sass.build.css'
21 | };
22 |
23 | const FILES = {};
24 | fs.readdirSync(PATHS.app).forEach((file) => {
25 | const match = file.match(/(.*)\.(js|jsx)$/);
26 | if (match) {
27 | FILES[match[1]] = `./${file}`;
28 | }
29 | });
30 |
31 | console.log(`Building Webpack project with enviroment "${enviroment}"`);
32 |
33 | let config = {
34 | context: PATHS.app,
35 | entry: FILES,
36 | output: {
37 | path: PATHS.build,
38 | filename: FILENAMES.build,
39 | },
40 | module: {
41 | rules: [
42 | {
43 | test: /\.js$/,
44 | use: [
45 | {
46 | loader: 'babel-loader',
47 | options: {
48 | presets: ['latest', 'react']
49 | }
50 | }
51 | ]
52 | },
53 | {
54 | test: /\.sass$/,
55 | loader: Extract.extract({
56 | fallback: 'style-loader',
57 | use: 'css-loader!sass-loader'
58 | })
59 | },
60 | ]
61 | },
62 | plugins: [
63 | new Extract({
64 | filename: FILENAMES.sass,
65 | }),
66 | new webpack.EnvironmentPlugin([
67 | 'NODE_ENV',
68 | ]),
69 | ]
70 | };
71 |
72 | let envConfig = {};
73 |
74 | const commonConfig = {
75 | entry: {
76 | vendor: Object.keys(packages.dependencies),
77 | },
78 | plugins: [
79 | new webpack.optimize.CommonsChunkPlugin({
80 | name: 'vendor',
81 | filename: FILENAMES.vendor
82 | }),
83 | ]
84 | };
85 |
86 | if (enviroment === 'production') {
87 | envConfig.plugins = [
88 | new webpack.optimize.OccurrenceOrderPlugin(),
89 | new webpack.optimize.UglifyJsPlugin({
90 | minimize: true,
91 | })
92 | ];
93 | envConfig.devtool = 'source-map';
94 | } else {
95 | envConfig.devtool = 'eval';
96 | }
97 |
98 | module.exports = merge(config, commonConfig, envConfig);
99 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "webpack-sample-configs",
3 | "version": "0.0.2",
4 | "description": "Webpack 2.0 sample configurations",
5 | "repository": {
6 | "type": "git",
7 | "url": "git+https://github.com/jancama2/webpack-sample-configs.git"
8 | },
9 | "keywords": [
10 | "webpack",
11 | "configuration",
12 | "webpack 2.0"
13 | ],
14 | "author": "Marek Janča",
15 | "license": "MIT",
16 | "bugs": {
17 | "url": "https://github.com/jancama2/webpack-sample-configs/issues"
18 | },
19 | "homepage": "https://github.com/jancama2/webpack-sample-configs#readme",
20 | "scripts": {
21 | "simple": "webpack --progress --config samples/simple/webpack.config.js;",
22 | "multipoint": "webpack --progress --config samples/multipoint/webpack.config.js;",
23 | "loaders": "webpack --progress --config samples/loaders/webpack.config.js",
24 | "plugins": "webpack --progress --config samples/plugins/webpack.config.js",
25 | "deploy": "webpack --progress --config samples/deployment/webpack.config.js",
26 | "vendors": "webpack --progress --config samples/vendors/webpack.config.js",
27 | "devserver": "webpack-dev-server --open --config samples/devserver/webpack.config.js",
28 | "livereload": "webpack --watch --config samples/devserver/webpack.config.js",
29 | "basicloadersdev": "export NODE_ENV=development; webpack-dev-server --open --config samples/basicloaders/webpack.config.js",
30 | "basicloadersprod": "export NODE_ENV=production; webpack --progress --config samples/basicloaders/webpack.config.js"
31 | },
32 | "devDependencies": {
33 | "babel-core": "^6.22.1",
34 | "babel-loader": "^6.2.10",
35 | "babel-preset-latest": "^6.22.0",
36 | "babel-preset-react": "^6.22.0",
37 | "coffee-loader": "^0.7.2",
38 | "coffee-script": "^1.12.3",
39 | "css-loader": "^0.26.1",
40 | "expose-loader": "^0.7.3",
41 | "extract-text-webpack-plugin": "^2.0.0-beta",
42 | "file-loader": "^0.10.0",
43 | "font-loader": "^0.1.2",
44 | "html-webpack-plugin": "^2.28.0",
45 | "imports-loader": "^0.7.0",
46 | "node-sass": "^4.5.0",
47 | "sass-loader": "^5.0.0",
48 | "style-loader": "^0.13.1",
49 | "url-loader": "^0.5.7",
50 | "webpack": "^2.2.1",
51 | "webpack-dev-server": "^2.3.0",
52 | "webpack-livereload-plugin": "^0.10.0",
53 | "webpack-merge": "^2.6.1",
54 | "webpack-validator": "^2.3.0"
55 | },
56 | "dependencies": {
57 | "jquery": "^3.1.1",
58 | "lodash": "^4.17.4"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/samples/devserver/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const webpack = require('webpack');
5 | const merge = require('webpack-merge');
6 | const Extract = require('extract-text-webpack-plugin');
7 | const HtmlPlugin = require('html-webpack-plugin');
8 | const Liverload = require('webpack-livereload-plugin');
9 |
10 | const packages = require('../../package.json');
11 |
12 | const enviroment = process.env.NODE_ENV;
13 |
14 | const PATHS = {
15 | app: path.join(__dirname, 'src'),
16 | build: path.join(__dirname, 'build')
17 | };
18 |
19 | const FILENAMES = {
20 | build: '[name].js',
21 | vendor: 'vendors.js',
22 | sass: 'sass.build.css',
23 | html: 'index.html',
24 | };
25 |
26 | const FILES = {};
27 | fs.readdirSync(PATHS.app).forEach((file) => {
28 | const match = file.match(/(.*)\.(js|jsx)$/);
29 | if (match) {
30 | FILES[match[1]] = `./${file}`;
31 | }
32 | });
33 |
34 | console.log(`Building Webpack project with enviroment "${enviroment}"`);
35 |
36 | let config = {
37 | context: PATHS.app,
38 | entry: FILES,
39 | output: {
40 | path: PATHS.build,
41 | filename: FILENAMES.build,
42 | publicPath: '/' // toto nastavení počítá s tím, že root webserveru bude ve složce ./build/
43 | },
44 | module: {
45 | rules: [
46 | {
47 | test: /\.js$/,
48 | exclude: /node_modules/,
49 | use: [
50 | {
51 | loader: 'babel-loader',
52 | options: {
53 | presets: ['latest', 'react']
54 | }
55 | }
56 | ]
57 | },
58 | {
59 | test: /\.sass$/,
60 | loader: Extract.extract({
61 | fallback: 'style-loader',
62 | use: 'css-loader!sass-loader'
63 | })
64 | },
65 | ]
66 | },
67 | plugins: [
68 | new Extract({
69 | filename: FILENAMES.sass,
70 | }),
71 | new webpack.EnvironmentPlugin([
72 | 'NODE_ENV',
73 | ]),
74 | ]
75 | };
76 |
77 | let envConfig = {};
78 |
79 | const commonConfig = {
80 | entry: {
81 | vendor: Object.keys(packages.dependencies),
82 | },
83 | plugins: [
84 | new webpack.optimize.CommonsChunkPlugin({
85 | name: 'vendor',
86 | filename: FILENAMES.vendor
87 | }),
88 | ]
89 | };
90 |
91 | if (enviroment === 'production') {
92 | envConfig.plugins = [
93 | new webpack.optimize.OccurrenceOrderPlugin(),
94 | new webpack.optimize.UglifyJsPlugin({
95 | minimize: true,
96 | })
97 | ];
98 | envConfig.devtool = 'source-map';
99 | } else {
100 | envConfig.plugins = [
101 | new HtmlPlugin({
102 | filename: FILENAMES.html
103 | }),
104 | new Liverload()
105 | ];
106 | envConfig.devServer = {
107 | contentBase: path.join(__dirname),
108 | port: 8080
109 | };
110 | envConfig.devtool = 'eval';
111 | }
112 |
113 | module.exports = merge(config, commonConfig, envConfig);
114 |
--------------------------------------------------------------------------------
/samples/basicloaders/webpack.config.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 |
4 | const webpack = require('webpack');
5 | const merge = require('webpack-merge');
6 | const Extract = require('extract-text-webpack-plugin');
7 | const HtmlPlugin = require('html-webpack-plugin');
8 | const Liverload = require('webpack-livereload-plugin');
9 |
10 | const packages = require('../../package.json');
11 |
12 | const enviroment = process.env.NODE_ENV;
13 |
14 | const PATHS = {
15 | app: path.join(__dirname, 'src'),
16 | build: path.join(__dirname, 'build')
17 | };
18 |
19 | const FILENAMES = {
20 | build: '[name].js',
21 | vendor: 'vendors.js',
22 | sass: 'sass.build.css',
23 | html: 'index.html',
24 | images: 'images/[hash].[ext]',
25 | fonts: 'fonts/[hash].[ext]'
26 | };
27 |
28 | const FILES = {};
29 | fs.readdirSync(PATHS.app).forEach((file) => {
30 | const match = file.match(/(.*)\.(js|jsx)$/);
31 | if (match) {
32 | FILES[match[1]] = `./${file}`;
33 | }
34 | });
35 |
36 | console.log(`Building Webpack project with enviroment "${enviroment}"`);
37 |
38 | let config = {
39 | context: PATHS.app,
40 | entry: FILES,
41 | output: {
42 | path: PATHS.build,
43 | filename: FILENAMES.build,
44 | publicPath: '/'
45 | },
46 | module: {
47 | rules: [
48 | {
49 | test: /\.js$/,
50 | exclude: /node_modules/,
51 | use: [
52 | {
53 | loader: 'babel-loader',
54 | options: {
55 | presets: ['latest', 'react']
56 | }
57 | }
58 | ]
59 | },
60 | {
61 | test: /\.coffee$/,
62 | use: [
63 | {
64 | loader: 'coffee-loader'
65 | }
66 | ]
67 | },
68 | {
69 | test: /\.css$/,
70 | exclude: /main.css/,
71 | use: [
72 | {
73 | loader: 'style-loader',
74 | },{
75 | loader: 'css-loader',
76 | }
77 | ]
78 | },
79 | {
80 | test: /\.sass$/,
81 | loader: Extract.extract({
82 | fallback: 'style-loader',
83 | use: 'css-loader!sass-loader'
84 | })
85 | },
86 | {
87 | test: /\.png$/,
88 | use: [
89 | {
90 | loader: 'url-loader',
91 | options: {
92 | name: FILENAMES.images,
93 | options: {
94 | mimetype: 'image/png',
95 | limit: 25000
96 | }
97 | }
98 | }
99 | ]
100 | },
101 | {
102 | test: /\.ttf$/,
103 | use: [
104 | {
105 | loader: 'file-loader',
106 | options: {
107 | name: FILENAMES.fonts
108 | }
109 | }
110 | ]
111 | }
112 | ]
113 | },
114 | plugins: [
115 | new Extract({
116 | filename: FILENAMES.sass,
117 | }),
118 | new webpack.EnvironmentPlugin([
119 | 'NODE_ENV',
120 | ]),
121 | ]
122 | };
123 |
124 | let envConfig = {};
125 |
126 | const commonConfig = {
127 | entry: {
128 | vendor: Object.keys(packages.dependencies),
129 | },
130 | plugins: [
131 | new webpack.optimize.CommonsChunkPlugin({
132 | name: 'vendor',
133 | filename: FILENAMES.vendor
134 | }),
135 | ]
136 | };
137 |
138 | if (enviroment === 'production') {
139 | envConfig.plugins = [
140 | new webpack.optimize.OccurrenceOrderPlugin(),
141 | new webpack.optimize.UglifyJsPlugin({
142 | minimize: true,
143 | })
144 | ];
145 | envConfig.devtool = 'source-map';
146 | } else {
147 | envConfig.plugins = [
148 | new HtmlPlugin({
149 | filename: FILENAMES.html
150 | }),
151 | new Liverload()
152 | ];
153 | envConfig.devServer = {
154 | contentBase: path.join(__dirname),
155 | port: 8080
156 | };
157 | envConfig.devtool = 'eval';
158 | }
159 |
160 | module.exports = merge(config, commonConfig, envConfig);
161 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # webpack-sample-configs
2 | Sample configurations for Webpack 2.0
3 |
4 | ## Základní principy Webpacku 2.0
5 | ### Specifikace
6 | * **module bundler** = z mnoha modulů vytváří několik balíčků
7 | * **práce s JavaScriptem** = hlavní účel
8 | * pro code splitting do modulů, protože browsery neumí moduly jako třeba Node.js
9 | * vytváření balíčků pro browser
10 | * je však schopný transformovat, modifikovat, balíčkovat různé druhy assetů
11 | * pro práci s moduly různých typů používá **loadery**
12 |
13 | ### Moduly
14 | * Webpack moduly jsou ES modules, CommonJS a AMD, ale také @import z SASS
15 | * moduly jsou kusy kódu (nejen), které jsou mezi sebou prolinkovány a tvoří komplexní program
16 | * modul je cokoliv, co lze ‘importovat’ a zabalit pomocí Webpacku
17 | * příklady:
18 | * css, sass, less
19 | * js, jsx, ts, coffee
20 | * png, jpg, svg
21 | * json, yaml, xm
22 |
23 | ### Konfigurace
24 | * konfigurační soubor Webpacku je JS module, který exportuje konfiguraci
25 | * je zpracováván Node.js, tudíž v něm lze dělat cokoli, co dokáže Node interpretovat
26 | * Základní položky konfigurace:
27 | * **Entry** - popisuje vstup Webpacku (vstupní modul/y)
28 | * **Output** - jak má vypadat výstup z Webpacku (výstupní balíček/balíčky)
29 | * **Loaders** - jakým způsobem má Webpack zpracovávat moduly různých typů
30 | * **Pluginy** - jakým způsobem má Webpak zpracovávat balíčky
31 |
32 | ### Entry
33 | * Říká, odkud má Webpack začít vytvářet balíček/ky (vytvářet graf závislostí)
34 | * Druhy:
35 | * **String** = cesta k souboru, jeden entry point, jeden balíček
36 | * **Pole** = pole cest k souborům, více entry pointů, jeden balíček
37 | * **Objekt** = objekt pojmenovaných cest k souborům, více entry pointů, více balíčků
38 | * V rámci konfigurace může být uveden context, cesty k souborů v entry se pak vztahují relativně k němu
39 | * **Pravidlo:** jeden entry point na HTML stránku, SPA = jeden globální entry point, MPA = více entrypointů
40 |
41 | ### Output
42 | * Nastavení ovlivňuje výstup z Webpacku
43 | * Položky:
44 | * **path** = cesta do složky, kam má Webpack uložit balíček/ky
45 | * **filename** = název výstupního souboru
46 | * pokud je vstup string nebo pole, pak je můžeme použít nějaký název (např. bundle.js)
47 | * pokud je vstup objekt pak pro vystup použijeme template:
48 | * **name** = klíč ze vstupního objektu ([name].js)
49 | * **hash** = hash, který buildu vypočítal Webpack ([hash].js)
50 | * **publicPath** = používaná loadery (např url-loader) a pluginy, jedná se o cestu pod kterou bude balíček vystaven na serveru
51 |
52 | ### Loadery
53 | * Jsou to transformace, které jsou aplikovány na moduly (soubory), než jsou přidány do balíčku
54 | * Pomocí loaderu lze např načítat CSS, transformovat JSX do JS, převádět obrázky do base64 stringů
55 | * Loadery lze za sebe řadit do pipeliny:
56 | * **sass-loader** zpracovává css a vrací css => **css-loader** vezme css a provede další úpravy => **style-loader** vytvoří JS kód, který toto css vloží do `