Skip to content

Commit 7802555

Browse files
gilmrjcgilmrjc
authored
Use Webpack bundle tracker v1 (#232)
* chore: Update js dependencies for tests * test: Update webpack configurations used on tests * test: Update tests to new stats format * feat: Use new stats format on loader
1 parent b792c60 commit 7802555

File tree

9 files changed

+5334
-82
lines changed

9 files changed

+5334
-82
lines changed

‎tests/app/tests/test_webpack.py

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@ def test_simple_and_css_extract(self):
6363
self.assertIn('main', chunks)
6464
self.assertEqual(len(chunks), 1)
6565

66-
main = chunks['main']
67-
self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
68-
self.assertEqual(main[1]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/styles.css'))
66+
files = assets['assets']
67+
self.assertEqual(files['main.css']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.css'))
68+
self.assertEqual(files['main.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
6969

7070
def test_js_gzip_extract(self):
7171
self.compile_bundles('webpack.config.gzipTest.js')
@@ -77,9 +77,9 @@ def test_js_gzip_extract(self):
7777
self.assertIn('main', chunks)
7878
self.assertEqual(len(chunks), 1)
7979

80-
main = chunks['main']
81-
self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js.gz'))
82-
self.assertEqual(main[1]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/styles.css'))
80+
files = assets['assets']
81+
self.assertEqual(files['main.css']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.css'))
82+
self.assertEqual(files['main.js.gz']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js.gz'))
8383

8484
def test_static_url(self):
8585
self.compile_bundles('webpack.config.publicPath.js')
@@ -95,30 +95,28 @@ def test_code_spliting(self):
9595

9696
chunks = assets['chunks']
9797
self.assertIn('main', chunks)
98-
self.assertEquals(len(chunks), 2)
98+
self.assertEquals(len(chunks), 1)
9999

100-
main = chunks['main']
101-
self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
102-
103-
vendor = chunks['vendor']
104-
self.assertEqual(vendor[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/vendor.js'))
100+
files = assets['assets']
101+
self.assertEqual(files['main.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
102+
self.assertEqual(files['vendors.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/vendors.js'))
105103

106104
def test_templatetags(self):
107105
self.compile_bundles('webpack.config.simple.js')
108106
self.compile_bundles('webpack.config.app2.js')
109107
view = TemplateView.as_view(template_name='home.html')
110108
request = self.factory.get('/')
111109
result = view(request)
112-
self.assertIn('<link type="text/css" href="/static/bundles/styles.css" rel="stylesheet" />', result.rendered_content)
110+
self.assertIn('<link type="text/css" href="/static/bundles/main.css" rel="stylesheet" />', result.rendered_content)
113111
self.assertIn('<script type="text/javascript" src="/static/bundles/main.js" async charset="UTF-8"></script>', result.rendered_content)
114112

115-
self.assertIn('<link type="text/css" href="/static/bundles/styles-app2.css" rel="stylesheet" />', result.rendered_content)
113+
self.assertIn('<link type="text/css" href="/static/bundles/app2.css" rel="stylesheet" />', result.rendered_content)
116114
self.assertIn('<script type="text/javascript" src="/static/bundles/app2.js" ></script>', result.rendered_content)
117115
self.assertIn('<img src="/static/my-image.png"/>', result.rendered_content)
118116

119117
view = TemplateView.as_view(template_name='only_files.html')
120118
result = view(request)
121-
self.assertIn("var contentCss = '/static/bundles/styles.css'", result.rendered_content)
119+
self.assertIn("var contentCss = '/static/bundles/main.css'", result.rendered_content)
122120
self.assertIn("var contentJS = '/static/bundles/main.js'", result.rendered_content)
123121

124122
self.compile_bundles('webpack.config.publicPath.js')
@@ -158,15 +156,15 @@ def test_jinja2(self):
158156
with self.settings(**settings):
159157
request = self.factory.get('/')
160158
result = view(request)
161-
self.assertIn('<link type="text/css" href="/static/bundles/styles.css" rel="stylesheet" />', result.rendered_content)
159+
self.assertIn('<link type="text/css" href="/static/bundles/main.css" rel="stylesheet" />', result.rendered_content)
162160
self.assertIn('<script type="text/javascript" src="/static/bundles/main.js" async charset="UTF-8"></script>', result.rendered_content)
163161

164162
def test_reporting_errors(self):
165163
self.compile_bundles('webpack.config.error.js')
166164
try:
167165
get_loader(DEFAULT_CONFIG).get_bundle('main')
168166
except WebpackError as e:
169-
self.assertIn("Cannot resolve module 'the-library-that-did-not-exist'", str(e))
167+
self.assertIn("Can't resolve 'the-library-that-did-not-exist'", str(e))
170168

171169
def test_missing_bundle(self):
172170
missing_bundle_name = 'missing_bundle'
@@ -194,7 +192,7 @@ def test_timeouts(self):
194192
with open(
195193
settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w'
196194
) as stats_file:
197-
stats_file.write(json.dumps({'status': 'compiling'}))
195+
stats_file.write(json.dumps({'status': 'compile'}))
198196
loader = get_loader(DEFAULT_CONFIG)
199197
loader.config['TIMEOUT'] = 0.1
200198
with self.assertRaises(WebpackLoaderTimeoutError):
@@ -216,14 +214,14 @@ def test_bad_status_in_production(self):
216214
), str(e))
217215

218216
def test_request_blocking(self):
219-
# FIXME: This will work 99% time but there is no garauntee with the
217+
# FIXME: This will work 99% time but there is no guarantee with the
220218
# 4 second thing. Need a better way to detect if request was blocked on
221219
# not.
222-
wait_for = 3
220+
wait_for = 4
223221
view = TemplateView.as_view(template_name='home.html')
224222

225223
with self.settings(DEBUG=True):
226-
open(settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w').write(json.dumps({'status': 'compiling'}))
224+
open(settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w').write(json.dumps({'status': 'compile'}))
227225
then = time.time()
228226
request = self.factory.get('/')
229227
result = view(request)

‎tests/package.json

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,16 @@
66
"author": "Owais Lone",
77
"license": "MIT",
88
"devDependencies": {
9-
"babel": "^5.4.7",
10-
"babel-core": "^5.4.7",
11-
"babel-loader": "^5.1.3",
12-
"css-loader": "^0.14.1",
13-
"extract-text-webpack-plugin": "^0.8.0",
14-
"node-libs-browser": "^0.5.0",
15-
"react": "^0.13.3",
16-
"style-loader": "^0.12.3",
17-
"webpack": "^1.9.8",
18-
"webpack-bundle-tracker": "0.0.8",
19-
"webpack-dev-server": "^1.9.0",
20-
"webpack-split-by-path": "0.0.1"
9+
"@babel/core": "^7.9.6",
10+
"@babel/preset-env": "^7.9.6",
11+
"@babel/preset-react": "^7.9.4",
12+
"babel-loader": "^8.1.0",
13+
"css-loader": "^3.5.3",
14+
"mini-css-extract-plugin": "^0.9.0",
15+
"react": "^16.0.0",
16+
"webpack": "^4.0.0",
17+
"webpack-bundle-tracker": "1.0.0-alpha.1",
18+
"webpack-cli": "^3.3.10",
19+
"webpack-dev-server": "^3.0.0"
2120
}
2221
}

‎tests/webpack.config.app2.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
var config = require("./webpack.config.simple.js");
22
var BundleTracker = require('webpack-bundle-tracker');
3-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
3+
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
44

55
config.entry = {
66
app2: './assets/js/index'
77
};
88

99
config.plugins = [
10-
new ExtractTextPlugin("styles-app2.css"),
11-
new BundleTracker({filename: './webpack-stats-app2.json'})
10+
new MiniCssExtractPlugin(),
11+
new BundleTracker({path: __dirname, filename: './webpack-stats-app2.json'})
1212
];
1313

1414
module.exports = config;

‎tests/webpack.config.error.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var path = require("path");
22
var webpack = require('webpack');
33
var BundleTracker = require('webpack-bundle-tracker');
4-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
4+
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
55

66

77
module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
1313
},
1414

1515
plugins: [
16-
new ExtractTextPlugin("styles.css"),
17-
new BundleTracker({filename: './webpack-stats.json'}),
16+
new MiniCssExtractPlugin(),
17+
new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
1818
],
1919

2020
module: {
21-
loaders: [
21+
rules: [
2222
// we pass the output from babel loader to react-hot loader
23-
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
24-
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
23+
{
24+
test: /\.jsx?$/,
25+
exclude: /node_modules/,
26+
use: {
27+
loader: 'babel-loader',
28+
options: {
29+
presets: ['@babel/preset-react']
30+
}
31+
}
32+
},
33+
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
2534
],
2635
},
2736

2837
resolve: {
29-
modulesDirectories: ['node_modules', 'bower_components'],
30-
extensions: ['', '.js', '.jsx']
38+
modules: ['node_modules', 'bower_components'],
39+
extensions: ['.js', '.jsx']
3140
},
3241
}

‎tests/webpack.config.gzipTest.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var path = require("path");
22
var webpack = require('webpack');
33
var BundleTracker = require('webpack-bundle-tracker');
4-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
4+
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
55

66

77
module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
1313
},
1414

1515
plugins: [
16-
new ExtractTextPlugin("styles.css"),
17-
new BundleTracker({filename: './webpack-stats.json'}),
16+
new MiniCssExtractPlugin(),
17+
new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
1818
],
1919

2020
module: {
21-
loaders: [
21+
rules: [
2222
// we pass the output from babel loader to react-hot loader
23-
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
24-
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
23+
{
24+
test: /\.jsx?$/,
25+
exclude: /node_modules/,
26+
use: {
27+
loader: 'babel-loader',
28+
options: {
29+
presets: ['@babel/preset-react']
30+
}
31+
}
32+
},
33+
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
2534
],
2635
},
2736

2837
resolve: {
29-
modulesDirectories: ['node_modules', 'bower_components'],
30-
extensions: ['', '.js', '.jsx']
38+
modules: ['node_modules', 'bower_components'],
39+
extensions: ['.js', '.jsx']
3140
},
3241
}

‎tests/webpack.config.simple.js

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var path = require("path");
22
var webpack = require('webpack');
33
var BundleTracker = require('webpack-bundle-tracker');
4-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
4+
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
55

66

77
module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
1313
},
1414

1515
plugins: [
16-
new ExtractTextPlugin("styles.css"),
17-
new BundleTracker({filename: './webpack-stats.json'}),
16+
new MiniCssExtractPlugin(),
17+
new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
1818
],
1919

2020
module: {
21-
loaders: [
21+
rules: [
2222
// we pass the output from babel loader to react-hot loader
23-
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
24-
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
23+
{
24+
test: /\.jsx?$/,
25+
exclude: /node_modules/,
26+
use: {
27+
loader: 'babel-loader',
28+
options: {
29+
presets: ['@babel/preset-react']
30+
}
31+
}
32+
},
33+
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
2534
],
2635
},
2736

2837
resolve: {
29-
modulesDirectories: ['node_modules', 'bower_components'],
30-
extensions: ['', '.js', '.jsx']
38+
modules: ['node_modules', 'bower_components'],
39+
extensions: ['.js', '.jsx']
3140
},
3241
}

‎tests/webpack.config.split.js

Lines changed: 30 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
var path = require("path");
22
var webpack = require('webpack');
33
var BundleTracker = require('webpack-bundle-tracker');
4-
var SplitByPathPlugin = require('webpack-split-by-path');
5-
var ExtractTextPlugin = require("extract-text-webpack-plugin");
4+
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
65

76

87
module.exports = {
@@ -15,26 +14,42 @@ module.exports = {
1514
},
1615

1716
plugins: [
18-
new ExtractTextPlugin("styles.css"),
19-
new BundleTracker({filename: './webpack-stats.json'}),
20-
new SplitByPathPlugin([
21-
{
22-
name: 'vendor',
23-
path: path.join(__dirname, '/node_modules/')
24-
}
25-
])
17+
new MiniCssExtractPlugin(),
18+
new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
2619
],
2720

2821
module: {
29-
loaders: [
22+
rules: [
3023
// we pass the output from babel loader to react-hot loader
31-
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
32-
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
24+
{
25+
test: /\.jsx?$/,
26+
exclude: /node_modules/,
27+
use: {
28+
loader: 'babel-loader',
29+
options: {
30+
presets: ['@babel/preset-react']
31+
}
32+
}
33+
},
34+
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
3335
],
3436
},
3537

3638
resolve: {
37-
modulesDirectories: ['node_modules', 'bower_components'],
38-
extensions: ['', '.js', '.jsx']
39+
modules: ['node_modules', 'bower_components'],
40+
extensions: ['.js', '.jsx']
3941
},
42+
43+
optimization: {
44+
splitChunks: {
45+
cacheGroups: {
46+
commons: {
47+
test: /[\\/]node_modules[\\/]/,
48+
name: 'vendors',
49+
chunks: 'all',
50+
enforce: true
51+
}
52+
}
53+
}
54+
}
4055
}

0 commit comments

Comments
 (0)