-
Notifications
You must be signed in to change notification settings - Fork 1
/
Webpack.js
96 lines (65 loc) · 2 KB
/
Webpack.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
86
87
88
89
90
91
92
93
94
95
96
/*******************************************************
* Webpack Configuration
*******************************************************/
entry
the starting point of your application
loaders
the transformations you want to make on your code
output
where you want your compiled code to go
/*******************************************************
* Start
*******************************************************/
npm init
generate package.json
npm install webpack --save-dev
dev dependency
webpack.config.js
create @ project root
module.exports = {
entry: [
'./app/index.js' // where to start (entry)
],
module: { // what transformations to make on the code
loaders: []
}
}
e.g.
module: babel-loader
browser to understand latest JS
npm install babel-loader babel-core babel-preset-es2015 --save-dev
module.exports = {
entry: [
'./app/index.js'
],
module: {
loaders: [
{
test: /\.js$/, // regex, webpack to only run this loader with .js
include: __dirname + '/app', // Webpack to only run the loader on files in the myapp/app directory
loader: 'babel?presets[]=es2015' // Webpack transformation to run on all paths that match test and are in the include
}
]
},
output: {
filename: 'index_bundle.js', // Webpack generated code
path: __dirname + '/dist' // dest of bundle
}
}
Note!
HTML needs to reference the bundle
/*******************************************************
*
*******************************************************/
/*******************************************************
*
*******************************************************/
/*******************************************************
*
*******************************************************/
/*******************************************************
*
*******************************************************/
/*******************************************************
*
*******************************************************/