Skip to content

Commit 181d39b

Browse files
nfodorpubnubnfodorpubnub
committed
Split webpack into multiple files for dev and prod
1 parent 9054452 commit 181d39b

5 files changed

+327
-5
lines changed

‎package.json

+6-5
Original file line numberDiff line numberDiff line change
@@ -69,16 +69,16 @@
6969
"scripts": {
7070
"bundle": "webpack",
7171
"test": "echo \"Error: no test specified\" && exit 1",
72-
"start": "webpack-dev-server --mode development --open --hot",
73-
"dev": "webpack-dev-server --mode development --open --hot",
72+
"start": "webpack-dev-server --mode development --open --hot --config webpack.config.js",
73+
"dev": "webpack-dev-server --mode development --open --hot --config webpack.config.js",
7474
"expose": "tunnel 8000 server",
75-
"build": "webpack --mode production",
75+
"build": "webpack --mode production --config webpack.prod.js",
7676
"firehose": "node src/tools/firehose.js start liveeventdemo.row1",
7777
"storybook": "start-storybook -p 9001 -c .storybook",
7878
"build-storybook": "build-storybook -c .storybook -o .out",
7979
"deploy-storybook": "storybook-to-ghpages",
8080
"predeploy": "yarn run build",
81-
"deploy": "gh-pages -d build"
81+
"deploy": "gh-pages -d dist"
8282
},
8383
"jshintConfig": {
8484
"esversion": 9
@@ -118,7 +118,8 @@
118118
"source-map-loader": "^0.2.4",
119119
"ts-jest": "^26.1.3",
120120
"ts-loader": "^8.0.1",
121-
"typescript": "^3.9.7"
121+
"typescript": "^3.9.7",
122+
"webpack-merge": "^5.1.3"
122123
},
123124
"babel": {
124125
"presets": [

‎webpack.common.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
var path = require('path');
2+
const {
3+
merge
4+
} = require('webpack-merge');
5+
var HtmlWebpackPlugin = require('html-webpack-plugin');
6+
var CopyWebpackPlugin = require('copy-webpack-plugin');
7+
var WriteFilePlugin = require('write-file-webpack-plugin');
8+
var WebpackShellPlugin = require('webpack-shell-plugin');
9+
10+
const productionConfig = merge([{
11+
12+
output: {
13+
publicPath: "/chat-component-app-live-event/",
14+
15+
},
16+
}]);
17+
module.exports = {
18+
// webpack will take the files from ./src/index
19+
entry: './src/index',
20+
// and output it into /dist as bundle.js
21+
output: {
22+
path: path.join(__dirname, '/dist'),
23+
filename: 'bundle.js',
24+
publicPath: '/'
25+
},
26+
devServer: {
27+
inline: true,
28+
host: '0.0.0.0', //Listen on all interfaces so local lan browser can access.
29+
port: 8080, //port number where to run run the web app i.e.: http://localhost:8080
30+
historyApiFallback: true,
31+
bonjour: true,
32+
},
33+
// adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
34+
resolve: {
35+
extensions: ['.ts', '.tsx', '.js', '.jsx']
36+
},
37+
module: {
38+
rules: [
39+
// we use babel-loader to load our jsx and tsx files
40+
{
41+
test: /\.(ts|js)x?$/,
42+
//exclude: /node_modules/,
43+
use: {
44+
loader: 'babel-loader',
45+
},
46+
47+
},
48+
49+
// css-loader to bundle all the css files into one file and style-loader to add all the styles inside the style tag of the document
50+
{
51+
test: /\.css$/,
52+
use: ['style-loader', 'css-loader']
53+
},
54+
{
55+
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
56+
exclude: /node_modules/,
57+
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
58+
},
59+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
60+
{
61+
enforce: "pre",
62+
test: /\.js$/,
63+
loader: "source-map-loader"
64+
},
65+
{
66+
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
67+
use: [
68+
'file-loader',
69+
],
70+
},
71+
{
72+
test: /\.(jpg|png)$/,
73+
use: {
74+
loader: 'url-loader',
75+
},
76+
},
77+
]
78+
},
79+
node: {
80+
fs: 'empty'
81+
},
82+
plugins: [
83+
new HtmlWebpackPlugin({
84+
template: './public/index.html',
85+
favicon: './public/favicon.ico'
86+
}),
87+
88+
new CopyWebpackPlugin({
89+
patterns: [{
90+
from: 'src/img',
91+
to: 'images'
92+
}],
93+
}),
94+
new WriteFilePlugin({
95+
patterns: [{
96+
from: 'src/img',
97+
to: 'images'
98+
}],
99+
}),
100+
new WebpackShellPlugin({
101+
onBuildStart: ['echo "Starting Live Event Demo Server..."'],
102+
//onBuildEnd: [`node src/tools/ngrok.js 8080`]
103+
})
104+
]
105+
};

‎webpack.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
11
var path = require('path');
2+
const {
3+
merge
4+
} = require('webpack-merge');
25
var HtmlWebpackPlugin = require('html-webpack-plugin');
36
var CopyWebpackPlugin = require('copy-webpack-plugin');
47
var WriteFilePlugin = require('write-file-webpack-plugin');
58
var WebpackShellPlugin = require('webpack-shell-plugin');
9+
10+
const productionConfig = merge([{
11+
12+
output: {
13+
publicPath: "/chat-component-app-live-event/",
14+
15+
},
16+
}]);
617
module.exports = {
718
// webpack will take the files from ./src/index
819
entry: './src/index',

‎webpack.dev.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
var path = require('path');
2+
const {
3+
merge
4+
} = require('webpack-merge');
5+
var HtmlWebpackPlugin = require('html-webpack-plugin');
6+
var CopyWebpackPlugin = require('copy-webpack-plugin');
7+
var WriteFilePlugin = require('write-file-webpack-plugin');
8+
var WebpackShellPlugin = require('webpack-shell-plugin');
9+
10+
const productionConfig = merge([{
11+
12+
output: {
13+
publicPath: "/chat-component-app-live-event/",
14+
15+
},
16+
}]);
17+
module.exports = {
18+
// webpack will take the files from ./src/index
19+
entry: './src/index',
20+
// and output it into /dist as bundle.js
21+
output: {
22+
path: path.join(__dirname, '/dist'),
23+
filename: 'bundle.js',
24+
publicPath: '/'
25+
},
26+
devServer: {
27+
inline: true,
28+
host: '0.0.0.0', //Listen on all interfaces so local lan browser can access.
29+
port: 8080, //port number where to run run the web app i.e.: http://localhost:8080
30+
historyApiFallback: true,
31+
bonjour: true,
32+
},
33+
// adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
34+
resolve: {
35+
extensions: ['.ts', '.tsx', '.js', '.jsx']
36+
},
37+
module: {
38+
rules: [
39+
// we use babel-loader to load our jsx and tsx files
40+
{
41+
test: /\.(ts|js)x?$/,
42+
//exclude: /node_modules/,
43+
use: {
44+
loader: 'babel-loader',
45+
},
46+
47+
},
48+
49+
// css-loader to bundle all the css files into one file and style-loader to add all the styles inside the style tag of the document
50+
{
51+
test: /\.css$/,
52+
use: ['style-loader', 'css-loader']
53+
},
54+
{
55+
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
56+
exclude: /node_modules/,
57+
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
58+
},
59+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
60+
{
61+
enforce: "pre",
62+
test: /\.js$/,
63+
loader: "source-map-loader"
64+
},
65+
{
66+
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
67+
use: [
68+
'file-loader',
69+
],
70+
},
71+
{
72+
test: /\.(jpg|png)$/,
73+
use: {
74+
loader: 'url-loader',
75+
},
76+
},
77+
]
78+
},
79+
node: {
80+
fs: 'empty'
81+
},
82+
plugins: [
83+
new HtmlWebpackPlugin({
84+
template: './public/index.html',
85+
favicon: './public/favicon.ico'
86+
}),
87+
88+
new CopyWebpackPlugin({
89+
patterns: [{
90+
from: 'src/img',
91+
to: 'images'
92+
}],
93+
}),
94+
new WriteFilePlugin({
95+
patterns: [{
96+
from: 'src/img',
97+
to: 'images'
98+
}],
99+
}),
100+
new WebpackShellPlugin({
101+
onBuildStart: ['echo "Starting Live Event Demo Server..."'],
102+
//onBuildEnd: [`node src/tools/ngrok.js 8080`]
103+
})
104+
]
105+
};

‎webpack.prod.js

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
var path = require('path');
2+
const {
3+
merge
4+
} = require('webpack-merge');
5+
var HtmlWebpackPlugin = require('html-webpack-plugin');
6+
var CopyWebpackPlugin = require('copy-webpack-plugin');
7+
var WriteFilePlugin = require('write-file-webpack-plugin');
8+
var WebpackShellPlugin = require('webpack-shell-plugin');
9+
10+
11+
module.exports = {
12+
// webpack will take the files from ./src/index
13+
entry: './src/index',
14+
// and output it into /dist as bundle.js
15+
16+
output: {
17+
path: path.join(__dirname, '/dist'),
18+
filename: 'bundle.js',
19+
publicPath: "https://pubnubdevelopers.github.io/chat-component-app-live-event/",
20+
},
21+
devServer: {
22+
inline: true,
23+
host: '0.0.0.0', //Listen on all interfaces so local lan browser can access.
24+
port: 8080, //port number where to run run the web app i.e.: http://localhost:8080
25+
historyApiFallback: true,
26+
bonjour: true,
27+
},
28+
// adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
29+
resolve: {
30+
extensions: ['.ts', '.tsx', '.js', '.jsx']
31+
},
32+
module: {
33+
rules: [
34+
// we use babel-loader to load our jsx and tsx files
35+
{
36+
test: /\.(ts|js)x?$/,
37+
//exclude: /node_modules/,
38+
use: {
39+
loader: 'babel-loader',
40+
},
41+
42+
},
43+
44+
// css-loader to bundle all the css files into one file and style-loader to add all the styles inside the style tag of the document
45+
{
46+
test: /\.css$/,
47+
use: ['style-loader', 'css-loader']
48+
},
49+
{
50+
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
51+
exclude: /node_modules/,
52+
use: ['file-loader?name=[name].[ext]'] // ?name=[name].[ext] is only necessary to preserve the original file name
53+
},
54+
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
55+
{
56+
enforce: "pre",
57+
test: /\.js$/,
58+
loader: "source-map-loader"
59+
},
60+
{
61+
test: /\.(png|svg|jpg|gif|woff|woff2|eot|ttf|otf)$/,
62+
use: [
63+
'file-loader',
64+
],
65+
},
66+
{
67+
test: /\.(jpg|png)$/,
68+
use: {
69+
loader: 'url-loader',
70+
},
71+
},
72+
]
73+
},
74+
node: {
75+
fs: 'empty'
76+
},
77+
plugins: [
78+
new HtmlWebpackPlugin({
79+
template: './public/index.html',
80+
favicon: './public/favicon.ico'
81+
}),
82+
83+
new CopyWebpackPlugin({
84+
patterns: [{
85+
from: 'src/img',
86+
to: 'images'
87+
}],
88+
}),
89+
new WriteFilePlugin({
90+
patterns: [{
91+
from: 'src/img',
92+
to: 'images'
93+
}],
94+
}),
95+
new WebpackShellPlugin({
96+
onBuildStart: ['echo "Starting Live Event Demo Server..."'],
97+
//onBuildEnd: [`node src/tools/ngrok.js 8080`]
98+
})
99+
]
100+
};

0 commit comments

Comments
 (0)