Use Webpack bundle tracker v1

tests/app/tests/test_webpack.py

@@ -63,9 +63,9 @@ def test_simple_and_css_extract(self):
  self.assertIn('main', chunks)
  self.assertEqual(len(chunks), 1)
 
- main = chunks['main']
- self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
- self.assertEqual(main[1]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/styles.css'))
+ files = assets['assets']
+ self.assertEqual(files['main.css']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.css'))
+ self.assertEqual(files['main.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
 
  def test_js_gzip_extract(self):
  self.compile_bundles('webpack.config.gzipTest.js')
@@ -77,9 +77,9 @@ def test_js_gzip_extract(self):
  self.assertIn('main', chunks)
  self.assertEqual(len(chunks), 1)
 
- main = chunks['main']
- self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js.gz'))
- self.assertEqual(main[1]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/styles.css'))
+ files = assets['assets']
+ self.assertEqual(files['main.css']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.css'))
+ self.assertEqual(files['main.js.gz']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js.gz'))
 
  def test_static_url(self):
  self.compile_bundles('webpack.config.publicPath.js')
@@ -95,30 +95,28 @@ def test_code_spliting(self):
 
  chunks = assets['chunks']
  self.assertIn('main', chunks)
- self.assertEquals(len(chunks), 2)
+ self.assertEquals(len(chunks), 1)
 
- main = chunks['main']
- self.assertEqual(main[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
-
- vendor = chunks['vendor']
- self.assertEqual(vendor[0]['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/vendor.js'))
+ files = assets['assets']
+ self.assertEqual(files['main.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/main.js'))
+ self.assertEqual(files['vendors.js']['path'], os.path.join(settings.BASE_DIR, 'assets/bundles/vendors.js'))
 
  def test_templatetags(self):
  self.compile_bundles('webpack.config.simple.js')
  self.compile_bundles('webpack.config.app2.js')
  view = TemplateView.as_view(template_name='home.html')
  request = self.factory.get('/')
  result = view(request)
- self.assertIn('<link type="text/css" href="/static/bundles/styles.css" rel="stylesheet" />', result.rendered_content)
+ self.assertIn('<link type="text/css" href="/static/bundles/main.css" rel="stylesheet" />', result.rendered_content)
  self.assertIn('<script type="text/javascript" src="/static/bundles/main.js" async charset="UTF-8"></script>', result.rendered_content)
 
- self.assertIn('<link type="text/css" href="/static/bundles/styles-app2.css" rel="stylesheet" />', result.rendered_content)
+ self.assertIn('<link type="text/css" href="/static/bundles/app2.css" rel="stylesheet" />', result.rendered_content)
  self.assertIn('<script type="text/javascript" src="/static/bundles/app2.js" ></script>', result.rendered_content)
  self.assertIn('<img src="/static/my-image.png"/>', result.rendered_content)
 
  view = TemplateView.as_view(template_name='only_files.html')
  result = view(request)
- self.assertIn("var contentCss = '/static/bundles/styles.css'", result.rendered_content)
+ self.assertIn("var contentCss = '/static/bundles/main.css'", result.rendered_content)
  self.assertIn("var contentJS = '/static/bundles/main.js'", result.rendered_content)
 
  self.compile_bundles('webpack.config.publicPath.js')
@@ -158,15 +156,15 @@ def test_jinja2(self):
  with self.settings(**settings):
  request = self.factory.get('/')
  result = view(request)
- self.assertIn('<link type="text/css" href="/static/bundles/styles.css" rel="stylesheet" />', result.rendered_content)
+ self.assertIn('<link type="text/css" href="/static/bundles/main.css" rel="stylesheet" />', result.rendered_content)
  self.assertIn('<script type="text/javascript" src="/static/bundles/main.js" async charset="UTF-8"></script>', result.rendered_content)
 
  def test_reporting_errors(self):
  self.compile_bundles('webpack.config.error.js')
  try:
  get_loader(DEFAULT_CONFIG).get_bundle('main')
  except WebpackError as e:
- self.assertIn("Cannot resolve module 'the-library-that-did-not-exist'", str(e))
+ self.assertIn("Can't resolve 'the-library-that-did-not-exist'", str(e))
 
  def test_missing_bundle(self):
  missing_bundle_name = 'missing_bundle'
@@ -194,7 +192,7 @@ def test_timeouts(self):
  with open(
  settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w'
  ) as stats_file:
- stats_file.write(json.dumps({'status': 'compiling'}))
+ stats_file.write(json.dumps({'status': 'compile'}))
  loader = get_loader(DEFAULT_CONFIG)
  loader.config['TIMEOUT'] = 0.1
  with self.assertRaises(WebpackLoaderTimeoutError):
@@ -216,14 +214,14 @@ def test_bad_status_in_production(self):
  ), str(e))
 
  def test_request_blocking(self):
- # FIXME: This will work 99% time but there is no garauntee with the
+ # FIXME: This will work 99% time but there is no guarantee with the
  # 4 second thing. Need a better way to detect if request was blocked on
  # not.
- wait_for = 3
+ wait_for = 4
  view = TemplateView.as_view(template_name='home.html')
 
  with self.settings(DEBUG=True):
- open(settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w').write(json.dumps({'status': 'compiling'}))
+ open(settings.WEBPACK_LOADER[DEFAULT_CONFIG]['STATS_FILE'], 'w').write(json.dumps({'status': 'compile'}))
  then = time.time()
  request = self.factory.get('/')
  result = view(request)

tests/package.json

@@ -6,17 +6,16 @@
  "author": "Owais Lone",
  "license": "MIT",
  "devDependencies": {
- "babel": "^5.4.7",
- "babel-core": "^5.4.7",
- "babel-loader": "^5.1.3",
- "css-loader": "^0.14.1",
- "extract-text-webpack-plugin": "^0.8.0",
- "node-libs-browser": "^0.5.0",
- "react": "^0.13.3",
- "style-loader": "^0.12.3",
- "webpack": "^1.9.8",
- "webpack-bundle-tracker": "0.0.8",
- "webpack-dev-server": "^1.9.0",
- "webpack-split-by-path": "0.0.1"
+ "@babel/core": "^7.9.6",
+ "@babel/preset-env": "^7.9.6",
+ "@babel/preset-react": "^7.9.4",
+ "babel-loader": "^8.1.0",
+ "css-loader": "^3.5.3",
+ "mini-css-extract-plugin": "^0.9.0",
+ "react": "^16.0.0",
+ "webpack": "^4.0.0",
+ "webpack-bundle-tracker": "1.0.0-alpha.1",
+ "webpack-cli": "^3.3.10",
+ "webpack-dev-server": "^3.0.0"
  }
 }

tests/webpack.config.app2.js

@@ -1,14 +1,14 @@
 var config = require("./webpack.config.simple.js");
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 config.entry = {
  app2: './assets/js/index'
 };
 
 config.plugins = [
-  new ExtractTextPlugin("styles-app2.css"),
-  new BundleTracker({filename: './webpack-stats-app2.json'})
+ new MiniCssExtractPlugin(),
+ new BundleTracker({path: __dirname, filename: './webpack-stats-app2.json'})
 ];
 
 module.exports = config;

tests/webpack.config.error.js

@@ -1,7 +1,7 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
 module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
- new BundleTracker({filename: './webpack-stats.json'}),
+ new MiniCssExtractPlugin(),
+ new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
  ],
 
  module: {
- loaders: [
+ rules: [
  // we pass the output from babel loader to react-hot loader
- { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
- { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-react']
+ }
+ }
+ },
+ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+ modules: ['node_modules', 'bower_components'],
+ extensions: ['.js', '.jsx']
  },
 }

tests/webpack.config.gzipTest.js

@@ -1,7 +1,7 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
 module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
- new BundleTracker({filename: './webpack-stats.json'}),
+ new MiniCssExtractPlugin(),
+ new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
  ],
 
  module: {
- loaders: [
+ rules: [
  // we pass the output from babel loader to react-hot loader
- { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
- { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-react']
+ }
+ }
+ },
+ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+ modules: ['node_modules', 'bower_components'],
+ extensions: ['.js', '.jsx']
  },
 }

tests/webpack.config.simple.js

@@ -1,7 +1,7 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
 module.exports = {
@@ -13,20 +13,29 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
- new BundleTracker({filename: './webpack-stats.json'}),
+ new MiniCssExtractPlugin(),
+ new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
  ],
 
  module: {
- loaders: [
+ rules: [
  // we pass the output from babel loader to react-hot loader
- { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
- { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-react']
+ }
+ }
+ },
+ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+ modules: ['node_modules', 'bower_components'],
+ extensions: ['.js', '.jsx']
  },
 }

tests/webpack.config.split.js

@@ -1,8 +1,7 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var SplitByPathPlugin = require('webpack-split-by-path');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
 module.exports = {
@@ -15,26 +14,42 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
- new BundleTracker({filename: './webpack-stats.json'}),
- new SplitByPathPlugin([
- {
- name: 'vendor',
- path: path.join(__dirname, '/node_modules/')
- }
- ])
+ new MiniCssExtractPlugin(),
+ new BundleTracker({path: __dirname, filename: './webpack-stats.json'}),
  ],
 
  module: {
- loaders: [
+ rules: [
  // we pass the output from babel loader to react-hot loader
- { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel'], },
- { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
+ {
+ test: /\.jsx?$/,
+ exclude: /node_modules/,
+ use: {
+ loader: 'babel-loader',
+ options: {
+ presets: ['@babel/preset-react']
+ }
+ }
+ },
+ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+ modules: ['node_modules', 'bower_components'],
+ extensions: ['.js', '.jsx']
  },
+
+ optimization: {
+ splitChunks: {
+ cacheGroups: {
+ commons: {
+ test: /[\\/]node_modules[\\/]/,
+ name: 'vendors',
+ chunks: 'all',
+ enforce: true
+ }
+ }
+ }
+ }
 }