-
Notifications
You must be signed in to change notification settings - Fork 3
/
webpack.config.js
85 lines (71 loc) · 2.66 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
var path = require('path');
var webpack = require('webpack');
var argv = require('yargs').argv;
function babelLoaders() {
if (argv.dist) {
return ['babel?optional[]=es7.functionBind'];
}
return ['react-hot', 'babel?optional[]=es7.functionBind'];
}
function entries() {
if (argv.dist) {
// path to our 'root' module
return path.resolve(__dirname, 'src/main.js');
}
return [
// webpack dev server with hot reloading
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
// path to our 'root' module
path.resolve(__dirname, 'src/main.js')
];
}
module.exports = {
resolve: {
// Make sure, Webpack finds import'ed and require'd files specified without extension
// so 'import Bla from './Bla' makes webpack to look for files 'Bla', 'Bla.js' and 'Bla.jsx'
extensions: ['', '.js', '.jsx']
},
entry: entries(),
output: {
// output path
path: path.resolve(__dirname, 'public/dist'),
publicPath: 'dist/',
// Name of the resulting bundle file that
filename: 'main.js'
},
module: {
loaders: [
// JSX/ES6 handling with babel
// * babel-loader: uses Babel to transform your JSX/ES6 JavaScript to ECMAScript 5
// * react-hot: Reloads your React Component on code changes without loosing the application state
{test: /\.js$/, exclude: /node_modules/, loaders: babelLoaders()},
{test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader"},
// CSS handling
// * style-loader: Embeds referenced CSS code using a <style>-element in your index.html file
// * css-loader: Parses the actual CSS files referenced from your code. Modifies url()-statements in your
// CSS files to match images handled by url loader (see below)
{test: /\.css$/, loader: 'style!css'},
// Image Handling
// * url-loader: Returns all referenced png/jpg files up to the specified limit as inline Data Url
// or - if above that limit - copies the file to your output directory and returns the url to that copied file
// Both values can be used for example for the 'src' attribute on an <img> element
{test: /\.(png|jpg)$/, loader: 'url?limit=25000'},
// JSon file handling
// * Enables you to 'require'/'import' json files from your JS files
{test: /\.json$/, loader: 'json-loader'}
]
},
plugins: [
// Enable Hot Module Replacement
new webpack.HotModuleReplacementPlugin(),
// Avoid publishing files when compilation failed
new webpack.NoErrorsPlugin()
],
stats: {
// Nice colored output
colors: true
},
// Create Sourcemaps for the bundle
devtool: 'source-map'
};