Skip to content

Commit d8a7258

Browse files
committed
Support Webpack 4
1 parent 82271d6 commit d8a7258

File tree

15 files changed

+3448
-674
lines changed

15 files changed

+3448
-674
lines changed

.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,6 @@ coverage/
33
test/fixtures/**/dir
44
.nyc_output/
55
.coveralls.yml
6-
*.log
6+
*.log
7+
/dist
8+
.vscode

README.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ In both examples Webpack would output:
4141

4242
## Installation
4343
```bash
44-
// For Webpack v3.x
44+
// For Webpack v4.x
4545
npm install --save-dev webpack-omit-js-for-css-plugin
4646

47-
// For Webpack v2.x
48-
npm install --save-dev webpack-omit-js-for-css-plugin@1.0.2
47+
// For Webpack v3.x
48+
npm install --save-dev webpack-omit-js-for-css-plugin@2.0.0
4949
```
5050
## Usage
5151

@@ -58,7 +58,7 @@ module.exports = {
5858
]
5959
}
6060
```
61-
> Note: [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin "ExtractTextPlugin") is a Peer Dependency. You will need to configure that as you normally would in your webpack.config.js
61+
> Note: [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin "MiniCssExtractPlugin") is a Peer Dependency. You will need to configure that as you normally would in your webpack.config.js
6262
6363
## Options
6464
```js
@@ -67,8 +67,7 @@ new OmitJSforCSSPlugin(options: object)
6767
|Name|Type|Default|Description|
6868
|:--:|:--:|:-----:|:----------|
6969
|**`preview`**|`{Boolean}`|false|Will display a preview of the files that are to be omitted in the console (Will not actually omit)|
70-
|**`cacheOnWatch`**|`{Boolean}`|false|Whether it should cache the JS filenames that should be omitted, on watch|
7170
|**`verbose`**|`{Boolean}`|false|Whether it should display which files will be omitted to the console|
7271

7372
## :fire: Additional Notes :fire:
74-
While this plugin supports caching the omissible files on watch, it's not ideal to use this plugin during Development. It's highly recommended you only include this plugin when you're building for production.
73+
It is highly recommended you only include this plugin when you're building for production.

package.json

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"webpack",
2424
"plugin",
2525
"extract-text-plugin",
26+
"mini-css-extract-plugin",
2627
"omit-js-for-css-plugin",
2728
"omit js",
2829
"webpack omit",
@@ -31,21 +32,22 @@
3132
"author": "Jessica Silva",
3233
"license": "MIT",
3334
"peerDependencies": {
34-
"extract-text-webpack-plugin": "^3.0.0",
35-
"webpack": "^3.5.5"
35+
"webpack": "^4.0.0",
36+
"mini-css-extract-plugin" : "^0.4.0"
3637
},
3738
"devDependencies": {
3839
"chai": "^4.1.1",
3940
"coveralls": "^2.13.1",
4041
"css-loader": "^0.28.4",
41-
"extract-text-webpack-plugin": "^3.0.0",
4242
"husky": "^0.14.3",
43+
"mini-css-extract-plugin": "^0.4.0",
4344
"mocha": "^3.5.0",
4445
"nyc": "^11.1.0",
4546
"rimraf": "^2.6.1",
4647
"style-loader": "^0.18.2",
4748
"test-console": "^1.0.0",
48-
"webpack": "^3.5.5"
49+
"webpack": "^4.10.1",
50+
"webpack-cli": "^2.1.4"
4951
},
5052
"dependencies": {},
5153
"nyc": {
@@ -56,10 +58,6 @@
5658
"text",
5759
"lcov"
5860
],
59-
"check-coverage": true,
60-
"branches": 100,
61-
"functions": 100,
62-
"lines": 100,
63-
"statements": 100
61+
"check-coverage": true
6462
}
6563
}

src/index.js

Lines changed: 45 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -8,95 +8,76 @@
88
* @constructor
99
*/
1010
function OmitJSforCSSPlugin(options) {
11-
const defaults = {
12-
preview: false, // OPTIONAL - {Boolean} - A preview of the files that are to be omitted (Will not actually omit)
13-
cacheOnWatch: false, // OPTIONAL - {Boolean} - Whether it should cache the JS filenames that should be omitted on watch
14-
verbose: false // OPTIONAL - {Boolean} - Whether it should display which files will be omitted
15-
};
11+
const defaults = {
12+
preview: false, // OPTIONAL - {Boolean} - A preview of the files that are to be omitted (Will not actually omit)
13+
verbose: false // OPTIONAL - {Boolean} - Whether it should display which files will be omitted
14+
};
1615

17-
if ((typeof options !== 'undefined' && (options === null || typeof options !== 'object')) || Array.isArray(options)) {
18-
throw new Error('OmitJSforCSSPlugin only takes an options "object" as an argument');
19-
}
16+
if ((typeof options !== 'undefined' && (options === null || typeof options !== 'object')) || Array.isArray(options)) {
17+
throw new Error('OmitJSforCSSPlugin only takes an options "object" as an argument');
18+
}
2019

21-
this.options = Object.assign({}, defaults, options || {});
22-
this.cacheOmittedFilename = [];
20+
this.options = Object.assign({}, defaults, options || {});
2321
}
2422

2523
/**
2624
* @function omitFiles
2725
* @param {Object} omitted - The omitted file's details
2826
* @param {Object} compilation
2927
*/
30-
OmitJSforCSSPlugin.prototype.omitFiles = function(omitted, compilation) {
31-
if (this.options.preview) {
32-
console.log(`PREVIEW File to be omitted for ${omitted.chunkName} : ${omitted.filename}`);
33-
} else {
34-
this.options.verbose && console.log(`File omitted for ${omitted.chunkName} : ${omitted.filename}`);
35-
delete compilation.assets[omitted.filename];
36-
}
28+
OmitJSforCSSPlugin.prototype.omitFiles = function (omitted, compilation) {
29+
if (this.options.preview) {
30+
console.log(`PREVIEW File to be omitted for ${omitted.chunkName} : ${omitted.filename}`);
31+
} else {
32+
this.options.verbose && console.log(`File omitted for ${omitted.chunkName} : ${omitted.filename}`);
33+
delete compilation.assets[omitted.filename];
34+
}
3735
};
3836

3937
/**
4038
* @function findOmissibleFiles
4139
* @param {Object} compilation
4240
*/
43-
OmitJSforCSSPlugin.prototype.findOmissibleFiles = function(compilation) {
44-
// Every chunk / entry point
45-
compilation.chunks.forEach(chunk => {
46-
// Chunks origin files. ex. origin entry point, ![] entry
47-
let resourceOrigin = {};
48-
let assetTypeCount = { internal: 0, css: 0 };
41+
OmitJSforCSSPlugin.prototype.findOmissibleFiles = function (compilation) {
42+
// Every chunk / entry point
43+
compilation.chunks.forEach(chunk => {
44+
let assetTypeCount = { internal: 0, css: 0 };
4945

50-
chunk.origins.forEach(origin => {
51-
if (typeof origin.module.resource === 'string') {
52-
resourceOrigin[origin.module.resource] = true;
53-
}
54-
});
46+
// Each entry point will have its own dependencies, based on the files inner deps or the array deps in entry
47+
Array.from(chunk.modulesIterable, module => {
48+
if (!Array.isArray(module.dependencies)) return;
5549

56-
// Each entry point will have its own dependencies, based on the files inner deps or the array deps in entry
57-
chunk.forEachModule(module => {
58-
if (!Array.isArray(module.fileDependencies)) {
59-
return;
60-
}
61-
module.fileDependencies.forEach(filepath => {
62-
if (!resourceOrigin[filepath] && !/(\bnode_modules\b)/.test(filepath) && /\.(css|js)$/g.test(filepath)) {
63-
/\.(css)$/i.test(filepath) ? assetTypeCount.css++ : assetTypeCount.internal++;
64-
}
65-
});
66-
});
50+
module.dependencies.forEach(({ request }) => {
51+
if (!/ (\bnode_modules\b) /.test(request) && /\.(css|js)$/g.test(request)) {
52+
/\.(css)$/i.test(request) ? assetTypeCount.css++ : assetTypeCount.internal++;
53+
}
54+
});
55+
});
6756

68-
// Get the filenames that will be emitted, generated by the chunk, and omit JS if applicable
69-
chunk.files.forEach(filename => {
70-
// If all dependencies of this entry were CSS, then a JS version of this file will be created
71-
// This js file will be empty due to extract-text-webpack-plugin
72-
if (assetTypeCount.css > 0 && assetTypeCount.internal === 0 && (/\.(js)$/i.test(filename) || /\.(js).map$/i.test(filename))) {
73-
let omitted = {
74-
filename: filename,
75-
chunkName: chunk.name
76-
};
57+
// Get the filenames that will be emitted, generated by the chunk, and omit JS if applicable
58+
chunk.files.forEach(filename => {
59+
// If all dependencies of this entry were CSS, then a JS version of this file will be created
60+
// This js file will be empty due to extract-text-webpack-plugin
61+
if (assetTypeCount.css > 0 && assetTypeCount.internal === 0 && (/\.(js)$/i.test(filename) || /\.(js).map$/i.test(filename))) {
62+
let omitted = {
63+
filename: filename,
64+
chunkName: chunk.name
65+
};
7766

78-
this.cacheOmittedFilename.push(omitted);
79-
this.omitFiles(omitted, compilation);
80-
}
81-
});
82-
});
67+
this.omitFiles(omitted, compilation);
68+
}
69+
});
70+
});
8371
};
8472

8573
/**
8674
* Hook into the webpack compiler
8775
* @param {Object} compiler - The webpack compiler object
8876
*/
89-
OmitJSforCSSPlugin.prototype.apply = function(compiler) {
90-
compiler.plugin('emit', (compilation, callback) => {
91-
if (this.options.cacheOnWatch && this.cacheOmittedFilename.length) {
92-
this.cacheOmittedFilename.forEach(omitted => {
93-
this.omitFiles(omitted, compilation);
94-
});
95-
} else {
96-
this.findOmissibleFiles(compilation);
97-
}
98-
callback();
99-
});
77+
OmitJSforCSSPlugin.prototype.apply = function (compiler) {
78+
compiler.hooks.emit.tap('OmitJSforCSSPlugin', (compilation) => {
79+
this.findOmissibleFiles(compilation);
80+
});
10081
};
10182

10283
module.exports = OmitJSforCSSPlugin;

test/fixtures/css-array-entry/webpack.config.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
22
const OmitJSforCSSPlugin = require('../../../src/index.js');
33
const path = require('path');
44

@@ -14,14 +14,15 @@ module.exports = {
1414
rules: [
1515
{
1616
test: /\.css$/,
17-
use: ExtractTextPlugin.extract({
18-
fallback: 'style-loader',
19-
use: 'css-loader'
20-
})
17+
use: [
18+
MiniCssExtractPlugin.loader,
19+
'css-loader'
20+
]
2121
}
2222
]
2323
},
24-
plugins: [new ExtractTextPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
24+
plugins: [new MiniCssExtractPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
25+
mode : 'development',
2526
devtool: 'source-map',
2627
stats: 'none'
2728
};

test/fixtures/js-file-entry/webpack.config.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
22
const OmitJSforCSSPlugin = require('../../../src/index.js');
33
const path = require('path');
44

@@ -14,13 +14,14 @@ module.exports = {
1414
rules: [
1515
{
1616
test: /\.css$/,
17-
use: ExtractTextPlugin.extract({
18-
fallback: 'style-loader',
19-
use: 'css-loader'
20-
})
17+
use: [
18+
MiniCssExtractPlugin.loader,
19+
'css-loader'
20+
]
2121
}
2222
]
2323
},
24-
plugins: [new ExtractTextPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
24+
mode : 'development',
25+
plugins: [new MiniCssExtractPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
2526
stats: 'none'
2627
};

test/fixtures/options/cache-on-watch/webpack.config.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

test/fixtures/options/preview/webpack.config.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
22
const OmitJSforCSSPlugin = require('../../../../src/index.js');
33
const path = require('path');
44

@@ -14,14 +14,15 @@ module.exports = {
1414
rules: [
1515
{
1616
test: /\.css$/,
17-
use: ExtractTextPlugin.extract({
18-
fallback: 'style-loader',
19-
use: 'css-loader'
20-
})
17+
use: [
18+
MiniCssExtractPlugin.loader,
19+
'css-loader'
20+
]
2121
}
2222
]
2323
},
24-
plugins: [new ExtractTextPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin({ preview: true })],
24+
mode: 'development',
25+
plugins: [new MiniCssExtractPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin({ preview: true })],
2526
devtool: 'source-map',
2627
stats: 'none'
2728
};

test/fixtures/options/verbose/webpack.config.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
22
const OmitJSforCSSPlugin = require('../../../../src/index.js');
33
const path = require('path');
44

@@ -14,14 +14,15 @@ module.exports = {
1414
rules: [
1515
{
1616
test: /\.css$/,
17-
use: ExtractTextPlugin.extract({
18-
fallback: 'style-loader',
19-
use: 'css-loader'
20-
})
17+
use: [
18+
MiniCssExtractPlugin.loader,
19+
'css-loader'
20+
]
2121
}
2222
]
2323
},
24-
plugins: [new ExtractTextPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin({ verbose: true })],
24+
mode : 'development',
25+
plugins: [new MiniCssExtractPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin({ verbose: true })],
2526
devtool: 'source-map',
2627
stats: 'none'
2728
};

test/fixtures/should-not-omit/external-dep/webpack.config.arr.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const ExtractTextPlugin = require('extract-text-webpack-plugin');
1+
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
22
const OmitJSforCSSPlugin = require('../../../../src/index.js');
33
const path = require('path');
44

@@ -14,14 +14,15 @@ module.exports = {
1414
rules: [
1515
{
1616
test: /\.css$/,
17-
use: ExtractTextPlugin.extract({
18-
fallback: 'style-loader',
19-
use: 'css-loader'
20-
})
17+
use: [
18+
MiniCssExtractPlugin.loader,
19+
'css-loader'
20+
]
2121
}
2222
]
2323
},
24-
plugins: [new ExtractTextPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
24+
mode : 'development',
25+
plugins: [new MiniCssExtractPlugin({ filename: '[name].css' }), new OmitJSforCSSPlugin()],
2526
stats: 'none',
2627
devtool: 'source-map'
2728
};

0 commit comments

Comments
 (0)