feature(package) webpack v5

.webpack/css.js

@@ -10,11 +10,12 @@ const {
 const {env} = process;
 const isDev = env.NODE_ENV === 'development';
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
-const extractCSS = (a) => new ExtractTextPlugin(`${a}.css`);
-const extractMain = extractCSS('[name]');
+const extractCSS = (a) => new MiniCssExtractPlugin({
+    filename: `${a}.css`,
+});
 
 const cssNames = [
     'nojs',
@@ -30,18 +31,16 @@ const clean = (a) => a.filter(Boolean);
 
 const plugins = clean([
     ...cssPlugins,
-    extractMain,
+    new MiniCssExtractPlugin(),
     !isDev && new OptimizeCssAssetsPlugin(),
 ]);
 
 const rules = [{
     test: /\.css$/,
     exclude: /css\/(nojs|view|config|terminal|user-menu|columns.*)\.css/,
-    use: extractMain.extract([
-        'css-loader',
-    ]),
+    use: [MiniCssExtractPlugin.loader, 'css-loader'],
 },
-...cssPlugins.map(extract), {
+    ...cssNames.map(extract), {
     test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
     use: {
         loader: 'url-loader',
@@ -68,14 +67,11 @@ function getCSSList(dir) {
         .map(addDir);
 }
 
-function extract(extractPlugin) {
-    const {filename} = extractPlugin;
-    
+function extract(filename) {
+    console.log(':->', filename);
     return {
         test: RegExp(`css/${filename}`),
-        use: extractPlugin.extract([
-            'css-loader',
-        ]),
+        use: [MiniCssExtractPlugin.loader, 'css-loader'],
     };
 }
 

.webpack/js.js

@@ -8,8 +8,6 @@ const {
 
 const {EnvironmentPlugin} = require('webpack');
 
-const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
-
 const dir = './client';
 const dirModules = './client/modules';
 const modules = './modules';
@@ -52,11 +50,6 @@ const plugins = [
     new EnvironmentPlugin({
         NODE_ENV,
     }),
-    
-    new ServiceWorkerWebpackPlugin({
-        entry: join(__dirname, '..', 'client', 'sw', 'sw.js'),
-        excludes: ['*'],
-    }),
 ];
 
 const splitChunks = {

package.json

@@ -182,7 +182,6 @@
     "eslint": "^6.0.0-alpha",
     "eslint-plugin-node": "^11.0.0",
     "eslint-plugin-putout": "^3.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-alpha.0",
     "gritty": "^4.7.0",
     "gunzip-maybe": "^1.3.1",
     "html-looks-like": "^1.0.2",
@@ -193,6 +192,7 @@
     "load.js": "^3.0.0",
     "madrun": "^5.0.0",
     "memfs": "^3.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
     "minor": "^1.2.2",
     "mkdirp": "^0.5.1",
     "mock-require": "^3.0.1",