-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack-dev-server.config.js
88 lines (75 loc) · 2.25 KB
/
webpack-dev-server.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
const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const bowerComponentsPath = path.resolve(__dirname, 'bower_components');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PORT = process.env.PORT || 3000;
const config = {
// Entry points to the project
entry: [
'webpack/hot/dev-server',
'webpack/hot/only-dev-server',
'script!jquery/dist/jquery.min.js',
'script!foundation-sites/dist/js/foundation.min.js',
path.join(__dirname, '/src/app/app.js'),
],
// Server Configuration options
devServer: {
contentBase: 'src/www', // Relative directory for base of server
devtool: 'eval',
hot: true, // Live-reload
inline: true,
port: PORT, // Port Number
host: 'localhost', // Change to '0.0.0.0' for external facing server
},
devtool: 'source-map',
output: {
path: buildPath, // Path of output file
filename: 'app.js',
},
resolve: {
root: __dirname,
extensions: ['', '.js', '.jsx', 'css', 'scss'],
alias: {
}
},
externals:{
jquery: 'jQuery'
},
plugins: [
new webpack.ProvidePlugin({
'$': 'jquery',
'jQuery': 'jquery'
}),
new ExtractTextPlugin("style.css"),
// Enables Hot Modules Replacement
new webpack.HotModuleReplacementPlugin(),
// Allows error warnings but does not stop compiling.
new webpack.NoErrorsPlugin(),
// Moves files
new TransferWebpackPlugin([
{ from: 'www' },
], path.resolve(__dirname, 'src')),
],
module: {
loaders: [
{
// React-hot loader and
test: /\.js$/, // All .js files
loaders: ['react-hot-loader', 'babel-loader'], // react-hot is like browser sync and babel loads jsx and es6-7
exclude: [nodeModulesPath, bowerComponentsPath],
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap')
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader?sourceMap!sass-loader?sourceMap')
},
]
},
};
module.exports = config;