Webpack 4

tests/.babelrc

@@ -0,0 +1,3 @@
+{
+ "presets": ["@babel/preset-react"]
+}

tests/package.json

@@ -6,17 +6,20 @@
  "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",
+ "@babel/cli": "^7.0.0",
+ "@babel/core": "^7.0.0",
+ "@babel/preset-react": "^7.0.0",
+ "babel-core": "^7.0.0-0",
+ "babel-loader": "^8.0.0-beta",
+ "css-loader": "^0.28.7",
+ "mini-css-extract-plugin": "^0.4.0",
+ "react": "^16.0.0",
+ "style-loader": "^0.21.0",
+ "webpack": "^4.11.1",
+ "webpack-bundle-tracker": "0.4.0-beta",
+ "webpack-cli": "^3.0.3",
+ "webpack-dev-server": "^3.1.4",
  "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"
  }
 }

tests/webpack.config.app2.js

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

tests/webpack.config.error.js

@@ -1,32 +1,33 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssPlugin = require("mini-css-extract-plugin");
 
 
 module.exports = {
  context: __dirname,
+ mode: 'production',
  entry: './assets/js/bad_index',
  output: {
  path: path.resolve('./assets/bundles/'),
  filename: "[name].js",
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
+ new MiniCssPlugin({ filename: '[name]-[chunkhash].css', chunkFilename: '[id]-[chunkhash].css' }),
  new BundleTracker({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: [ 'babel-loader'], },
+ { test: /\.css$/, use: [MiniCssPlugin.loader, "css-loader"] }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+
+ extensions: ['.css', '.js', '.jsx']
  },
 }

tests/webpack.config.gzipTest.js

@@ -1,32 +1,33 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssPlugin = require("mini-css-extract-plugin");
 
 
 module.exports = {
  context: __dirname,
+ mode: 'production',
  entry: './assets/js/index',
  output: {
  path: path.resolve('./assets/bundles/'),
  filename: "[name].js.gz"
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
+ new MiniCssPlugin({ filename: '[name]-[chunkhash].css', chunkFilename: '[id]-[chunkhash].css' }),
  new BundleTracker({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: [ 'babel-loader'], },
+ { test: /\.css$/, use: [MiniCssPlugin.loader, "css-loader"] }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+
+ extensions: ['.css', '.js', '.jsx']
  },
 }

tests/webpack.config.simple.js

@@ -1,10 +1,11 @@
 var path = require("path");
 var webpack = require('webpack');
 var BundleTracker = require('webpack-bundle-tracker');
-var ExtractTextPlugin = require("extract-text-webpack-plugin");
+var MiniCssPlugin = require("mini-css-extract-plugin");
 
 
 module.exports = {
+ mode: 'production',
  context: __dirname,
  entry: './assets/js/index',
  output: {
@@ -13,20 +14,20 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
+ new MiniCssPlugin({ filename: '[name]-[chunkhash].css', chunkFilename: '[id]-[chunkhash].css' }),
  new BundleTracker({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: [ 'babel-loader'], },
+ { test: /\.css$/, use: [MiniCssPlugin.loader, "css-loader"] }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+
+ extensions: ['.css', '.js', '.jsx']
  },
 }

tests/webpack.config.split.js

@@ -2,11 +2,12 @@ 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 MiniCssPlugin = require("mini-css-extract-plugin");
 
 
 module.exports = {
  context: __dirname,
+ mode: 'production',
  entry: './assets/js/index',
  output: {
  path: path.resolve('./assets/bundles/'),
@@ -15,7 +16,7 @@ module.exports = {
  },
 
  plugins: [
- new ExtractTextPlugin("styles.css"),
+ new MiniCssPlugin({ filename: '[name]-[chunkhash].css', chunkFilename: '[id]-[chunkhash].css' }),
  new BundleTracker({filename: './webpack-stats.json'}),
  new SplitByPathPlugin([
  {
@@ -26,15 +27,15 @@ module.exports = {
  ],
 
  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: [ 'babel-loader'], },
+ { test: /\.css$/, use: [MiniCssPlugin.loader, "css-loader"] }
  ],
  },
 
  resolve: {
- modulesDirectories: ['node_modules', 'bower_components'],
- extensions: ['', '.js', '.jsx']
+
+ extensions: ['.css', '.js', '.jsx']
  },
 }

tests/webpack.config.v4.js

@@ -0,0 +1,39 @@
+var path = require("path");
+var BundleTracker = require('webpack-bundle-tracker');
+var MiniCssPlugin = require("mini-css-extract-plugin");
+
+
+module.exports = {
+ context: __dirname,
+ mode: 'production',
+ entry: './assets/js/index',
+ output: {
+ path: path.resolve('./assets/bundles/'),
+ filename: "[name].js",
+ chunkFilename: "[name].js"
+ },
+
+ optimization: {
+ splitChunks: {
+ chunks: 'all'
+ }
+ },
+
+ plugins: [
+ new MiniCssPlugin({filename: '[name]-[chunkhash].css', chunkFilename: '[id]-[chunkhash].css' }),
+ new BundleTracker({filename: './webpack-stats.json'}),
+ ],
+
+ module: {
+ rules: [
+ // we pass the output from babel loader to react-hot loader
+ { test: /\.jsx?$/, exclude: /node_modules/, use: [ 'babel-loader'], },
+ { test: /\.css$/, use: [MiniCssPlugin.loader, "css-loader"] }
+ ],
+ },
+
+ resolve: {
+
+ extensions: ['.css', '.js', '.jsx']
+ },
+}