test: Update webpack configurations used on tests

Author: gilmrjc

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
+ }
+ }
+ }
+ }
 }