feat: support webpack4

Author: githoniel

.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Launch Program",
+      "program": "${workspaceFolder}\\test\\spec\\test.js",
+      "args": [
+        "--input-type=module"
+      ]
+    }
+  ]
+}

example/basic/webpack.config.js

@@ -1,5 +1,15 @@
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var CSSSplitWebpackPlugin = require('../../').default;
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CSSSplitWebpackPlugin = require('../../').default;
+
+const miniCssConfig = {
+  loader: MiniCssExtractPlugin.loader,
+  options: {
+    // you can specify a publicPath here
+    // by default it uses publicPath in webpackOptions.output
+    publicPath: '../',
+    hmr: process.env.NODE_ENV === 'development',
+  },
+};
 
 module.exports = {
   entry: './index.js',
@@ -10,19 +20,19 @@ module.exports = {
     filename: 'bundle.js',
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract.length !== 1 ?
-        ExtractTextPlugin.extract('style-loader', 'css-loader') :
-        ExtractTextPlugin.extract({
-          fallbackLoader: 'style-loader',
-          loader: 'css-loader',
-        }),
+      use: [
+        miniCssConfig,
+        'css-loader',
+      ],
     }],
   },
   devtool: 'source-map',
   plugins: [
-    new ExtractTextPlugin("styles.css"),
+    new MiniCssExtractPlugin({
+      filename: 'styles.css',
+    }),
     new CSSSplitWebpackPlugin({size: 3, imports: true}),
   ],
 };

example/less/webpack.config.js

@@ -1,5 +1,15 @@
-var ExtractTextPlugin = require('extract-text-webpack-plugin');
-var CSSSplitWebpackPlugin = require('../../').default;
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CSSSplitWebpackPlugin = require('../../').default;
+
+const miniCssConfig = {
+  loader: MiniCssExtractPlugin.loader,
+  options: {
+    // you can specify a publicPath here
+    // by default it uses publicPath in webpackOptions.output
+    publicPath: '../',
+    hmr: process.env.NODE_ENV === 'development',
+  },
+};
 
 module.exports = {
   entry: './index.js',
@@ -10,16 +20,20 @@ module.exports = {
     filename: 'bundle.js',
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.less$/,
-      loader: ExtractTextPlugin.extract(
-        'css?-url&-autoprefixer&sourceMap!less?sourceMap'
-      ),
+      use: [
+        miniCssConfig,
+        'css-loader',
+        'less-loader',
+      ],
     }],
   },
   devtool: 'source-map',
   plugins: [
-    new ExtractTextPlugin("styles.css"),
+    new MiniCssExtractPlugin({
+      filename: 'styles.css',
+    }),
     new CSSSplitWebpackPlugin({size: 3}),
   ],
 };