From 3eba62730f0b50c2276fb8d28feb5cc238ba7e45 Mon Sep 17 00:00:00 2001 From: David Heidrich Date: Sun, 18 Jun 2017 12:25:16 +0200 Subject: [PATCH] adjusted tests to use css-loader, added tests for allChunks, remove module from initial chunk --- index.js | 11 ++-- package.json | 1 + test/TestCases.test.js | 62 ++++++++++--------- .../default-styles.css | 3 + .../entries/contact.js | 2 + .../entries/homepage.js | 2 + .../multiple-entries-all-async/expected/0.js | 22 +++++++ .../multiple-entries-all-async/expected/1.js | 22 +++++++ .../expected/contact.css | 9 +++ .../expected/homepage.css | 9 +++ .../multiple-entries-all-async/router.js | 6 ++ .../routes/contact/index.js | 5 ++ .../routes/contact/styles.css | 3 + .../routes/homepage/index.js | 5 ++ .../routes/homepage/styles.css | 3 + .../webpack.config.js | 23 +++++++ .../multiple-entries-async/default-styles.css | 3 + .../multiple-entries-async/default-styles.txt | 1 - .../multiple-entries-async/expected/0.js | 24 ++++--- .../multiple-entries-async/expected/1.js | 16 +++-- .../expected/contact.css | 8 ++- .../expected/homepage.css | 8 ++- test/cases/multiple-entries-async/router.js | 2 +- .../routes/contact/index.js | 2 +- .../routes/contact/styles.css | 3 + .../routes/contact/styles.txt | 1 - .../routes/homepage/index.js | 2 +- .../routes/homepage/styles.css | 3 + .../routes/homepage/styles.txt | 1 - .../multiple-entries-async/webpack.config.js | 10 +++ 30 files changed, 216 insertions(+), 56 deletions(-) create mode 100644 test/cases/multiple-entries-all-async/default-styles.css create mode 100644 test/cases/multiple-entries-all-async/entries/contact.js create mode 100644 test/cases/multiple-entries-all-async/entries/homepage.js create mode 100644 test/cases/multiple-entries-all-async/expected/0.js create mode 100644 test/cases/multiple-entries-all-async/expected/1.js create mode 100644 test/cases/multiple-entries-all-async/expected/contact.css create mode 100644 test/cases/multiple-entries-all-async/expected/homepage.css create mode 100644 test/cases/multiple-entries-all-async/router.js create mode 100644 test/cases/multiple-entries-all-async/routes/contact/index.js create mode 100644 test/cases/multiple-entries-all-async/routes/contact/styles.css create mode 100644 test/cases/multiple-entries-all-async/routes/homepage/index.js create mode 100644 test/cases/multiple-entries-all-async/routes/homepage/styles.css create mode 100644 test/cases/multiple-entries-all-async/webpack.config.js create mode 100644 test/cases/multiple-entries-async/default-styles.css delete mode 100644 test/cases/multiple-entries-async/default-styles.txt create mode 100644 test/cases/multiple-entries-async/routes/contact/styles.css delete mode 100644 test/cases/multiple-entries-async/routes/contact/styles.txt create mode 100644 test/cases/multiple-entries-async/routes/homepage/styles.css delete mode 100644 test/cases/multiple-entries-async/routes/homepage/styles.txt diff --git a/index.js b/index.js index cf2221a6..877c7f3e 100644 --- a/index.js +++ b/index.js @@ -274,10 +274,8 @@ ExtractTextPlugin.prototype.apply = function(compiler) { if(meta && (!meta.options.id || meta.options.id === id)) { var wasExtracted = Array.isArray(meta.content); if(shouldExtract !== wasExtracted) { - if (shouldExtract) { - chunk.removeModule(module); - return callback(); - } + // don't remove + module.loaders[0].options.remove = !shouldExtract; module[NS + "/extract"] = shouldExtract; // eslint-disable-line no-path-concat compilation.rebuildModule(module, function(err) { if(err) { @@ -291,8 +289,11 @@ ExtractTextPlugin.prototype.apply = function(compiler) { compilation.errors.push(err); return callback(); } - if(meta.content) + if(meta.content) { extractCompilation.addResultToChunk(module.identifier(), meta.content, module, extractedChunk); + // remove generated result from chunk + chunk.removeModule(module); + } callback(); }); } else { diff --git a/package.json b/package.json index 6c0d831e..9e875449 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "mocha": "^3.2.0", "mocha-lcov-reporter": "1.3.0", "raw-loader": "^0.5.1", + "rimraf": "^2.6.1", "should": "^11.1.2", "standard-version": "^4.1.0", "style-loader": "^0.18.2", diff --git a/test/TestCases.test.js b/test/TestCases.test.js index bbcb3712..be1519d3 100644 --- a/test/TestCases.test.js +++ b/test/TestCases.test.js @@ -3,6 +3,7 @@ var vm = require("vm"); var path = require("path"); var webpack = require("webpack"); var should = require("should"); +var rimraf = require('rimraf'); var ExtractTextPlugin = require("../"); var cases = process.env.CASES ? process.env.CASES.split(",") : fs.readdirSync(path.join(__dirname, "cases")); @@ -12,36 +13,39 @@ describe("TestCases", function() { it(testCase, function(done) { var testDirectory = path.join(__dirname, "cases", testCase); var outputDirectory = path.join(__dirname, "js", testCase); - var options = { entry: { test: "./index.js" } }; - var configFile = path.join(testDirectory, "webpack.config.js"); - if(fs.existsSync(configFile)) - options = require(configFile); - options.context = testDirectory; - if(!options.module) options.module = {}; - if(!options.module.loaders) options.module.loaders = [ - { test: /\.txt$/, loader: ExtractTextPlugin.extract("raw-loader") } - ]; - if(!options.output) options.output = { filename: "[name].js" }; - if(!options.output.path) options.output.path = outputDirectory; - if(process.env.CASES) { - console.log("\nwebpack." + testCase + ".config.js " + JSON.stringify(options, null, 2)); - } - webpack(options, function(err, stats) { - if(err) return done(err); - if(stats.hasErrors()) return done(new Error(stats.toString())); - var testFile = path.join(outputDirectory, "test.js"); - if(fs.existsSync(testFile)) - require(testFile)(suite); - var expectedDirectory = path.join(testDirectory, "expected"); - fs.readdirSync(expectedDirectory).forEach(function(file) { - var filePath = path.join(expectedDirectory, file); - var actualPath = path.join(outputDirectory, file); - readFileOrEmpty(actualPath).should.be.eql( - readFileOrEmpty(filePath), - file + " should be correct"); + function test() { + var options = { entry: { test: "./index.js" } }; + var configFile = path.join(testDirectory, "webpack.config.js"); + if (fs.existsSync(configFile)) + options = require(configFile); + options.context = testDirectory; + if (!options.module) options.module = {}; + if (!options.module.loaders) options.module.loaders = [ + { test: /\.txt$/, loader: ExtractTextPlugin.extract("raw-loader") } + ]; + if (!options.output) options.output = { filename: "[name].js" }; + if (!options.output.path) options.output.path = outputDirectory; + if (process.env.CASES) { + //console.log("\nwebpack." + testCase + ".config.js " + JSON.stringify(options, null, 2)); + } + webpack(options, function (err, stats) { + if (err) return done(err); + if (stats.hasErrors()) return done(new Error(stats.toString())); + var testFile = path.join(outputDirectory, "test.js"); + if (fs.existsSync(testFile)) + require(testFile)(suite); + var expectedDirectory = path.join(testDirectory, "expected"); + fs.readdirSync(expectedDirectory).forEach(function (file) { + var filePath = path.join(expectedDirectory, file); + var actualPath = path.join(outputDirectory, file); + readFileOrEmpty(actualPath).should.be.eql( + readFileOrEmpty(filePath), + file + " should be correct"); + }); + done(); }); - done(); - }); + } + rimraf(outputDirectory, test); }); }); }); diff --git a/test/cases/multiple-entries-all-async/default-styles.css b/test/cases/multiple-entries-all-async/default-styles.css new file mode 100644 index 00000000..f0d5b13b --- /dev/null +++ b/test/cases/multiple-entries-all-async/default-styles.css @@ -0,0 +1,3 @@ +body { + background: red; +} diff --git a/test/cases/multiple-entries-all-async/entries/contact.js b/test/cases/multiple-entries-all-async/entries/contact.js new file mode 100644 index 00000000..66b458c2 --- /dev/null +++ b/test/cases/multiple-entries-all-async/entries/contact.js @@ -0,0 +1,2 @@ +require('../router'); +require('../routes/contact'); diff --git a/test/cases/multiple-entries-all-async/entries/homepage.js b/test/cases/multiple-entries-all-async/entries/homepage.js new file mode 100644 index 00000000..7a8e5aea --- /dev/null +++ b/test/cases/multiple-entries-all-async/entries/homepage.js @@ -0,0 +1,2 @@ +require('../router'); +require('../routes/homepage'); diff --git a/test/cases/multiple-entries-all-async/expected/0.js b/test/cases/multiple-entries-all-async/expected/0.js new file mode 100644 index 00000000..88d37a36 --- /dev/null +++ b/test/cases/multiple-entries-all-async/expected/0.js @@ -0,0 +1,22 @@ +webpackJsonp([0],{ + +/***/ 2: +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__(7); + +modules.export = function() { + return 'Route Homepage'; +}; + + +/***/ }), + +/***/ 7: +/***/ (function(module, exports) { + +// removed by extract-text-webpack-plugin + +/***/ }) + +}); \ No newline at end of file diff --git a/test/cases/multiple-entries-all-async/expected/1.js b/test/cases/multiple-entries-all-async/expected/1.js new file mode 100644 index 00000000..72666204 --- /dev/null +++ b/test/cases/multiple-entries-all-async/expected/1.js @@ -0,0 +1,22 @@ +webpackJsonp([1],{ + +/***/ 1: +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__(6); + +modules.export = function() { + return 'Route Contact'; +}; + + +/***/ }), + +/***/ 6: +/***/ (function(module, exports) { + +// removed by extract-text-webpack-plugin + +/***/ }) + +}); \ No newline at end of file diff --git a/test/cases/multiple-entries-all-async/expected/contact.css b/test/cases/multiple-entries-all-async/expected/contact.css new file mode 100644 index 00000000..c952ccfd --- /dev/null +++ b/test/cases/multiple-entries-all-async/expected/contact.css @@ -0,0 +1,9 @@ +body { + background: red; +} +.contact { + color: black; +} +.homepage { + color: black; +} diff --git a/test/cases/multiple-entries-all-async/expected/homepage.css b/test/cases/multiple-entries-all-async/expected/homepage.css new file mode 100644 index 00000000..c952ccfd --- /dev/null +++ b/test/cases/multiple-entries-all-async/expected/homepage.css @@ -0,0 +1,9 @@ +body { + background: red; +} +.contact { + color: black; +} +.homepage { + color: black; +} diff --git a/test/cases/multiple-entries-all-async/router.js b/test/cases/multiple-entries-all-async/router.js new file mode 100644 index 00000000..d9855317 --- /dev/null +++ b/test/cases/multiple-entries-all-async/router.js @@ -0,0 +1,6 @@ +require('./default-styles.css'); +module.export = function (route) { + return import(/* webpackChunkName: "route-[request]" */ './routes/' + route + 'index.js').then(function (route) { + return route; + }); +}; diff --git a/test/cases/multiple-entries-all-async/routes/contact/index.js b/test/cases/multiple-entries-all-async/routes/contact/index.js new file mode 100644 index 00000000..c16daacb --- /dev/null +++ b/test/cases/multiple-entries-all-async/routes/contact/index.js @@ -0,0 +1,5 @@ +require('./styles.css'); + +modules.export = function() { + return 'Route Contact'; +}; diff --git a/test/cases/multiple-entries-all-async/routes/contact/styles.css b/test/cases/multiple-entries-all-async/routes/contact/styles.css new file mode 100644 index 00000000..fd8a667d --- /dev/null +++ b/test/cases/multiple-entries-all-async/routes/contact/styles.css @@ -0,0 +1,3 @@ +.contact { + color: black; +} diff --git a/test/cases/multiple-entries-all-async/routes/homepage/index.js b/test/cases/multiple-entries-all-async/routes/homepage/index.js new file mode 100644 index 00000000..bb86d26e --- /dev/null +++ b/test/cases/multiple-entries-all-async/routes/homepage/index.js @@ -0,0 +1,5 @@ +require('./styles.css'); + +modules.export = function() { + return 'Route Homepage'; +}; diff --git a/test/cases/multiple-entries-all-async/routes/homepage/styles.css b/test/cases/multiple-entries-all-async/routes/homepage/styles.css new file mode 100644 index 00000000..1fc1fc5a --- /dev/null +++ b/test/cases/multiple-entries-all-async/routes/homepage/styles.css @@ -0,0 +1,3 @@ +.homepage { + color: black; +} diff --git a/test/cases/multiple-entries-all-async/webpack.config.js b/test/cases/multiple-entries-all-async/webpack.config.js new file mode 100644 index 00000000..695c55eb --- /dev/null +++ b/test/cases/multiple-entries-all-async/webpack.config.js @@ -0,0 +1,23 @@ +var ExtractTextPlugin = require("../../../"); +module.exports = { + entry: { + 'homepage': "./entries/homepage.js", + 'contact': "./entries/contact.js" + }, + module: { + loaders: [ + { test: /\.css$/, use: ExtractTextPlugin.extract({ + fallback: "style-loader", + use: { loader: "css-loader", options: { + sourceMap: true + } } + }) } + ] + }, + plugins: [ + new ExtractTextPlugin({ + filename: '[name].css', + allChunks: true + }) + ] +}; diff --git a/test/cases/multiple-entries-async/default-styles.css b/test/cases/multiple-entries-async/default-styles.css new file mode 100644 index 00000000..f0d5b13b --- /dev/null +++ b/test/cases/multiple-entries-async/default-styles.css @@ -0,0 +1,3 @@ +body { + background: red; +} diff --git a/test/cases/multiple-entries-async/default-styles.txt b/test/cases/multiple-entries-async/default-styles.txt deleted file mode 100644 index 65fab1e7..00000000 --- a/test/cases/multiple-entries-async/default-styles.txt +++ /dev/null @@ -1 +0,0 @@ -default-styles diff --git a/test/cases/multiple-entries-async/expected/0.js b/test/cases/multiple-entries-async/expected/0.js index f650a8f1..56931bf7 100644 --- a/test/cases/multiple-entries-async/expected/0.js +++ b/test/cases/multiple-entries-async/expected/0.js @@ -1,21 +1,29 @@ webpackJsonp([0],{ -/***/ 2: +/***/ 11: /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(9); +exports = module.exports = __webpack_require__(5)(true); +// imports -modules.export = function() { - return 'Route Homepage'; -}; + +// module +exports.push([module.i, ".homepage {\n\tcolor: black;\n}\n", "", {"version":3,"sources":["/Users/bowlingx/Projekte/extract-text-webpack-plugin/test/cases/multiple-entries-async/routes/homepage/styles.css"],"names":[],"mappings":"AAAA;CACC,aAAa;CACb","file":"styles.css","sourcesContent":[".homepage {\n\tcolor: black;\n}\n"],"sourceRoot":""}]); + +// exports /***/ }), -/***/ 9: -/***/ (function(module, exports) { +/***/ 2: +/***/ (function(module, exports, __webpack_require__) { + +__webpack_require__(11); + +modules.export = function() { + return 'Route Homepage'; +}; -module.exports = "styles-homepage\n" /***/ }) diff --git a/test/cases/multiple-entries-async/expected/1.js b/test/cases/multiple-entries-async/expected/1.js index d03f8290..e2f6fc10 100644 --- a/test/cases/multiple-entries-async/expected/1.js +++ b/test/cases/multiple-entries-async/expected/1.js @@ -3,7 +3,7 @@ webpackJsonp([1],{ /***/ 1: /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(8); +__webpack_require__(10); modules.export = function() { return 'Route Contact'; @@ -12,10 +12,18 @@ modules.export = function() { /***/ }), -/***/ 8: -/***/ (function(module, exports) { +/***/ 10: +/***/ (function(module, exports, __webpack_require__) { + +exports = module.exports = __webpack_require__(5)(true); +// imports + + +// module +exports.push([module.i, ".contact {\n\tcolor: black;\n}\n", "", {"version":3,"sources":["/Users/bowlingx/Projekte/extract-text-webpack-plugin/test/cases/multiple-entries-async/routes/contact/styles.css"],"names":[],"mappings":"AAAA;CACC,aAAa;CACb","file":"styles.css","sourcesContent":[".contact {\n\tcolor: black;\n}\n"],"sourceRoot":""}]); + +// exports -module.exports = "styles-contact\n" /***/ }) diff --git a/test/cases/multiple-entries-async/expected/contact.css b/test/cases/multiple-entries-async/expected/contact.css index c572f1f8..9b2cf499 100644 --- a/test/cases/multiple-entries-async/expected/contact.css +++ b/test/cases/multiple-entries-async/expected/contact.css @@ -1,2 +1,6 @@ -default-styles -styles-contact +body { + background: red; +} +.contact { + color: black; +} diff --git a/test/cases/multiple-entries-async/expected/homepage.css b/test/cases/multiple-entries-async/expected/homepage.css index a0e2e4df..3f2687f1 100644 --- a/test/cases/multiple-entries-async/expected/homepage.css +++ b/test/cases/multiple-entries-async/expected/homepage.css @@ -1,2 +1,6 @@ -default-styles -styles-homepage +body { + background: red; +} +.homepage { + color: black; +} diff --git a/test/cases/multiple-entries-async/router.js b/test/cases/multiple-entries-async/router.js index 34091cf9..d9855317 100644 --- a/test/cases/multiple-entries-async/router.js +++ b/test/cases/multiple-entries-async/router.js @@ -1,4 +1,4 @@ -require('./default-styles.txt'); +require('./default-styles.css'); module.export = function (route) { return import(/* webpackChunkName: "route-[request]" */ './routes/' + route + 'index.js').then(function (route) { return route; diff --git a/test/cases/multiple-entries-async/routes/contact/index.js b/test/cases/multiple-entries-async/routes/contact/index.js index 8b4df65c..c16daacb 100644 --- a/test/cases/multiple-entries-async/routes/contact/index.js +++ b/test/cases/multiple-entries-async/routes/contact/index.js @@ -1,4 +1,4 @@ -require('./styles.txt'); +require('./styles.css'); modules.export = function() { return 'Route Contact'; diff --git a/test/cases/multiple-entries-async/routes/contact/styles.css b/test/cases/multiple-entries-async/routes/contact/styles.css new file mode 100644 index 00000000..fd8a667d --- /dev/null +++ b/test/cases/multiple-entries-async/routes/contact/styles.css @@ -0,0 +1,3 @@ +.contact { + color: black; +} diff --git a/test/cases/multiple-entries-async/routes/contact/styles.txt b/test/cases/multiple-entries-async/routes/contact/styles.txt deleted file mode 100644 index fc54e762..00000000 --- a/test/cases/multiple-entries-async/routes/contact/styles.txt +++ /dev/null @@ -1 +0,0 @@ -styles-contact diff --git a/test/cases/multiple-entries-async/routes/homepage/index.js b/test/cases/multiple-entries-async/routes/homepage/index.js index 336a0244..bb86d26e 100644 --- a/test/cases/multiple-entries-async/routes/homepage/index.js +++ b/test/cases/multiple-entries-async/routes/homepage/index.js @@ -1,4 +1,4 @@ -require('./styles.txt'); +require('./styles.css'); modules.export = function() { return 'Route Homepage'; diff --git a/test/cases/multiple-entries-async/routes/homepage/styles.css b/test/cases/multiple-entries-async/routes/homepage/styles.css new file mode 100644 index 00000000..1fc1fc5a --- /dev/null +++ b/test/cases/multiple-entries-async/routes/homepage/styles.css @@ -0,0 +1,3 @@ +.homepage { + color: black; +} diff --git a/test/cases/multiple-entries-async/routes/homepage/styles.txt b/test/cases/multiple-entries-async/routes/homepage/styles.txt deleted file mode 100644 index 35d59310..00000000 --- a/test/cases/multiple-entries-async/routes/homepage/styles.txt +++ /dev/null @@ -1 +0,0 @@ -styles-homepage diff --git a/test/cases/multiple-entries-async/webpack.config.js b/test/cases/multiple-entries-async/webpack.config.js index 9f40b17f..5ccfae64 100644 --- a/test/cases/multiple-entries-async/webpack.config.js +++ b/test/cases/multiple-entries-async/webpack.config.js @@ -4,6 +4,16 @@ module.exports = { 'homepage': "./entries/homepage.js", 'contact': "./entries/contact.js" }, + module: { + loaders: [ + { test: /\.css$/, use: ExtractTextPlugin.extract({ + fallback: "style-loader", + use: { loader: "css-loader", options: { + sourceMap: true + } } + }) } + ] + }, plugins: [ new ExtractTextPlugin({ filename: '[name].css',