Support extract-text-webpack-plugin

.gitignore

@@ -4,3 +4,6 @@ node_modules/
 
 #test
 test/build
+
+#example
+example/css-pack/dist

README.md

@@ -94,6 +94,7 @@ module.exports = {
 
 >`include`, `exclude` just work the same way as `UglifyJsPlugin`
 
+>Check [working-example](https://github.com/leftstick/unminified-webpack-plugin/blob/master/example/css-pack/README.md) for css assets support
 
 ## LICENSE ##
 

example/css-pack/README.md

@@ -0,0 +1,68 @@
+css-pack
+=======================
+
+
+Working example for extracting non-minified css asset
+
+## Installation ##
+
+```bash
+npm install
+```
+
+## Usage ##
+
+```bash
+npm run build
+```
+
+>You would see, `app.js`, `app.min.js`, `app.css`, `app.min.css` are generated at `dist` folder
+
+## Configuration ##
+
+**You should not minify css via `css-loader`, but leave it to [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)**
+
+```javascript
+const path = require('path');
+const webpack = require('webpack');
+const UnminifiedWebpackPlugin = require('../../');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const cssnano = require('cssnano');
+
+module.exports = {
+    entry: {
+        app: './src/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].min.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader'
+                })
+            }
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new UnminifiedWebpackPlugin(),
+        new ExtractTextPlugin('[name].min.css'),
+        //use optimize-css-assets-webpack-plugin to minify css assets
+        new OptimizeCssAssetsPlugin({
+            //IMPORTANT: only minify asset ends with .min.css
+            assetNameRegExp: /\.min\.css$/g,
+            cssProcessor: cssnano
+        })
+    ]
+};
+```

example/css-pack/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "css-pack",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "build": "rm -rf dist && webpack"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "css-loader": "^0.28.7",
+    "cssnano": "^3.10.0",
+    "extract-text-webpack-plugin": "^3.0.1",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "style-loader": "^0.19.0",
+    "webpack": "^3.6.0"
+  }
+}

example/css-pack/src/index.css

@@ -0,0 +1,6 @@
+
+body {
+    color: #fff;
+    font-size: 16px;
+    opacity: 0.9;
+}

example/css-pack/src/index.js

@@ -0,0 +1,8 @@
+
+import './index.css';
+
+function test() {
+    console.log('fuck you');
+}
+
+test();

example/css-pack/webpack.config.js

@@ -0,0 +1,41 @@
+const path = require('path');
+const webpack = require('webpack');
+const UnminifiedWebpackPlugin = require('../../');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const cssnano = require('cssnano');
+
+module.exports = {
+    entry: {
+        app: './src/index.js'
+    },
+    output: {
+        path: path.resolve(__dirname, 'dist'),
+        filename: '[name].min.js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: 'style-loader',
+                    use: 'css-loader'
+                })
+            }
+        ]
+    },
+    plugins: [
+        new webpack.optimize.UglifyJsPlugin({
+            compress: {
+                warnings: false
+            }
+        }),
+        new UnminifiedWebpackPlugin(),
+        new ExtractTextPlugin('[name].min.css'),
+        new OptimizeCssAssetsPlugin({
+            //IMPORTANT: only minify asset ends with .min.css
+            assetNameRegExp: /\.min\.css$/g,
+            cssProcessor: cssnano
+        })
+    ]
+};

index.js

@@ -1,62 +1,58 @@
-'use strict';
+const webpack = require('webpack');
+const path = require('path');
+const ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers');
 
-var webpack = require('webpack');
-var ModuleFilenameHelpers = require('webpack/lib/ModuleFilenameHelpers');
-
-
-var getFileName = function(name, opts) {
+const getFileName = (name, ext, opts) => {
     if (name.match(/([-_.]min)[-_.]/)) {
         return name.replace(/[-_.]min/, '');
     }
 
-    var suffix = (opts.postfix || 'nomin') + '.js';
-    if (name.match(/\.js$/)) {
-        return name.replace(/js$/, suffix)
+    const suffix = (opts.postfix || 'nomin') + '.' + ext;
+    if (name.match(new RegExp('\.' + ext + '$'))) {
+        return name.replace(new RegExp(ext), suffix)
     }
 
     return name + suffix;
 };
 
-var UnminifiedWebpackPlugin = function(opts) {
+const UnminifiedWebpackPlugin = function(opts) {
     this.options = opts || {};
 };
 
 UnminifiedWebpackPlugin.prototype.apply = function(compiler) {
-    var options = this.options;
-    options.test = options.test || /\.js($|\?)/i;
+    const options = this.options;
+    options.test = options.test || /\.(js|css)($|\?)/i;
 
-    var containUgly = compiler.options.plugins.filter(function(plugin) {
-        return plugin instanceof webpack.optimize.UglifyJsPlugin;
-    });
+    const containUgly = compiler.options.plugins.filter(plugin => plugin.constructor.name === 'UglifyJsPlugin');
 
     if (!containUgly.length) {
         return console.log('Ignore generating unminified version, since no UglifyJsPlugin provided');
     }
 
-    compiler.plugin('compilation', function(compilation) {
-        compilation.plugin('additional-chunk-assets', function(chunks, cb) {
-            var files = [];
-            chunks.forEach(function(chunk) {
-                chunk.files.forEach(function(file) {
+    compiler.plugin('compilation', (compilation) => {
+        compilation.plugin('additional-assets', (cb) => {
+            const files = [];
+            compilation.chunks.forEach(chunk => {
+                chunk.files.forEach(file => {
                     files.push(file);
                 });
             });
-            compilation.additionalChunkAssets.forEach(function(file) {
+            compilation.additionalChunkAssets.forEach(file => {
                 files.push(file);
             });
-            files = files.filter(ModuleFilenameHelpers.matchObject.bind(null, options));
-            files.forEach(function(file) {
-                var asset = compilation.assets[file];
-                compilation.assets[getFileName(file, options)] = {
-                    source: function() {
-                        return asset.source();
-                    },
-                    size: function() {
-                        return asset.source().length;
-                    }
+
+            const finalFiles = files.filter(ModuleFilenameHelpers.matchObject.bind(null, options));
+            finalFiles.forEach(file => {
+                const asset = compilation.assets[file];
+                const source = asset.source();
+                compilation.assets[getFileName(file, path.extname(file).substr(1), options)] = {
+                    source: () => source,
+                    size: () => source.length
                 };
             });
+            cb();
         });
+
     });
 };
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "unminified-webpack-plugin",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "A `webpack` plugin for generating un-minified JavaScript files along with UglifyJsPlugin.",
   "main": "index.js",
   "scripts": {
@@ -9,6 +9,9 @@
   "files": [
     "index.js"
   ],
+  "engines" : {
+    "node" : ">=8.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/leftstick/NoMinifiedEmiterPlugin.git"
@@ -25,7 +28,7 @@
   "homepage": "https://github.com/leftstick/NoMinifiedEmiterPlugin#readme",
   "devDependencies": {
     "del": "^3.0.0",
-    "mocha": "^3.4.2",
-    "webpack": "^3.1.0"
+    "mocha": "^4.0.1",
+    "webpack": "^3.6.0"
   }
 }