-
Notifications
You must be signed in to change notification settings - Fork 10
/
webpack.config.js
103 lines (96 loc) · 3.43 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
'use strict';
const webpack = require('webpack');
// Webpack is a module bundler for your JavaScript.
// Takes modules with dependencies and generates static assets representing those modules.
// In this file is where we declare our Webpack configuration
module.exports = {
// Declare the project source folder
// __dirname refers to the root of your project
context: __dirname + '/src',
// Entries are the starting points where Webpack starts to bundle.
// Starting from the context folder, Webpack looks for entry filenames and reads the content.
// Every import or require() dependency it finds as it parses the code,
// it bundles for the final build (with their dependencies too).
// Webpack will give each module a unique id and save all modules accessible by id in the bundle.js file.
entry: {
app: './app.js',
},
// Webpack bundles everything to the output.path folder,
// naming it using the output.filename naming template
output: {
path: __dirname + '/dist/assets',
filename: '[name].bundle.js',
publicPath: '/assets',
},
// Webpack actually has its own development server, so whether you’re developing
// a static site or are just prototyping your front-end, it’s perfect for either.
// From your terminal, just run webpack-dev-server
devServer: {
contentBase: __dirname + '/src',
},
devtool: 'source-map',
// Webpack can work with virtually any file type, as long as we pass it
// into JavaScript. We do that with Loaders.
// A loader can refer to a preprocessor such as Sass, or a transpiler such as Babel.
// On NPM, they’re usually named *-loader such as sass-loader or babel-loader.
module: {
rules: [
// This looks for any file that ends in .js to be loaded via Babel.
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
// The following two statements set loaders for stylesheets bundling (CSS & SCSS).
// CSS being bundled in with your JavaScript, and style-loader manually writes
// your styles inside the <head> tag.
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(sass|scss)$/,
use: [
"style-loader",
"css-loader",
"sass-loader",
]
},
// Images, fonts and SVG support
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.woff(\?.*)?$/,
loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff'
},
{
test: /\.woff2(\?.*)?$/,
loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/font-woff2'
},
{
test: /\.otf(\?.*)?$/,
loader: 'file?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=font/opentype'
},
{
test: /\.ttf(\?.*)?$/,
loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?.*)?$/,
loader: 'file?prefix=fonts/&name=[path][name].[ext]'
},
{
test: /\.svg(\?.*)?$/,
loader: 'url?prefix=fonts/&name=[path][name].[ext]&limit=10000&mimetype=image/svg+xml'
},
],
},
// Define API_URL as a global constant on the project
plugins: [
new webpack.DefinePlugin({
'API_URL': JSON.stringify('https://foogl-api.herokuapp.com')
})
]
};