├── .gitignore ├── .npmignore ├── .vscode └── launch.json ├── Readme.md ├── index.js ├── package.json ├── tests └── test1 │ ├── expected │ ├── entry1.js │ ├── entry1.style.css │ ├── entry2.js │ ├── entry2.style.css │ └── style.css │ ├── public │ ├── css │ │ └── style.css │ ├── entry1.js │ └── entry2.js │ └── src │ ├── entry1 │ ├── index.js │ └── style.css │ ├── entry1sub │ ├── index.js │ └── style.css │ └── entry2 │ ├── index.js │ └── style.css └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *.log -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | *debug.log -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible Node.js debug attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "attach", 10 | "name": "Attach to Port", 11 | "port": 9229 12 | }, 13 | { 14 | "type": "node", 15 | "request": "launch", 16 | "name": "Launch Program", 17 | "program": "${workspaceRoot}\\webpack.config.js", 18 | "cwd": "${workspaceRoot}" 19 | }, 20 | { 21 | "type": "node", 22 | "request": "attach", 23 | "name": "Attach to Process", 24 | "port": 5858 25 | }, 26 | { 27 | "name": "Launch via NPM", 28 | "type": "node", 29 | "request": "launch", 30 | "cwd": "${workspaceRoot}", 31 | "runtimeExecutable": "npm", 32 | "windows": { 33 | "runtimeExecutable": "npm.cmd" 34 | }, 35 | "runtimeArgs": [ 36 | "run-script", 37 | "testWP" 38 | ], 39 | "port": 5858 40 | } 41 | ] 42 | } -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | Merge Files Webpack Plugin 2 | ========================== 3 | 4 | This is a small plugin created to merge files extracted by 5 | the **extract-text-webpack-plugin** into a single one. 6 | It is useful, for example, when you have multiple entries 7 | in your webpack configuration and you use the **extract-text-webpack-plugin** 8 | plugin to extract all the **.css** files into a separate one. Without this plugin, 9 | **extract-text-webpack-plugin** will extract a **.css** file per entry (if you use 10 | have set the filename as *[name].css*) or in the worst case a single file with only 11 | the **.css** file of the last entry (if you have set the filename as *style.css*). 12 | 13 | With this plugin, you can extract all the **.css** files from all entries 14 | into a single **.css** file. 15 | 16 | # Use 17 | 18 | Install: 19 | 20 | npm install merge-files-webpack-plugin --save-dev 21 | 22 | You need to use **webpack 2+** and **extract-text-webpack-plugin 2+**. 23 | The filename for the **extract-text-webpack-plugin** has to use **[name].something.ext** 24 | where *something.ext* is the name that will be used in the *test* option of this plugin. 25 | 26 | A sample file would be: 27 | 28 | var webpack = require('webpack'); 29 | var path = require('path'); 30 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 31 | var MergeFilesPlugin = require('merge-files-webpack-plugin'); 32 | 33 | module.exports = { 34 | entry: { 35 | 'entry1': './tests/test1/src/entry1/index.js', 36 | 'entry2': './tests/test1/src/entry2/index.js' 37 | }, 38 | output: { 39 | path: path.join(__dirname, './tests/test1/public'), 40 | filename: '[name].js' 41 | }, 42 | module: { 43 | rules: [ 44 | { 45 | use: ExtractTextPlugin.extract({ 46 | use: 'css-loader' 47 | }), 48 | test: /\.css$/, 49 | exclude: /node_modules/ 50 | } 51 | ] 52 | }, 53 | plugins: [ 54 | new ExtractTextPlugin({ 55 | filename: '[name].style.css' 56 | }), 57 | new MergeFilesPlugin({ 58 | filename: 'css/style.css', 59 | test: /style\.css/, // it could also be a string 60 | deleteSourceFiles: true 61 | }) 62 | ] 63 | } 64 | 65 | The config object passed to MergeFilesPlugin admits: 66 | 67 | + **filename**: Final name of the file created by merging the files. The file will be saved in the output path. You can add extra path in front of the filename. Required. String. 68 | + **test**: Test applied to the different files created by webpack to see which should be merged. For the previous example, the files created by webpack with ExtractTextPlugin will be `entry1.js`, `entry1.style.css`, `entry2.js` and `entry2.style.css`. We are interested in `entry1.style.css` and `entry2.style.css` that are created by the ExtractTextPlugin plugin. As such, a good test will be `style.css` or `/\.css/` if you want to use RegExp. Optional. If it is not specified, filename is used. 69 | + **deleteSourceFiles**: If true, `entry1.style.css` and `entry2.style.css` will be deleted. If false, they will be created. If not specified, by default is setted to `true`. 70 | 71 | 72 | Check the test directory in https://github.com/jtefera/merge-files-webpack/tree/master/tests/test1 73 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | function mergeFilesWebpack(options){ 2 | if(typeof options !== 'object' && !options.filename) { 3 | throw new Error('Filename is mandatory'); 4 | } 5 | // The final name of your merged file. 6 | // It can include a relative path before the filename. 7 | // mandatory 8 | this.filename = options.filename; 9 | // Used to check which files created by extract-text-webpack-plugin 10 | // should be merged. 11 | // if you have given the filename option on the extract-text-webpack-plugin 12 | // the name [name].style.css, a good candidate for chuncksTest would be style.css 13 | // Can be a regular expresion. If not passed, the filename is used 14 | this.test = options.test || options.filename; 15 | // By default setted to true, it tells to this plugin if you want to delete the files 16 | // created by the extract-text-webpack-plugin 17 | // if false, in your public directory you will have entry1.style.css, entry2.style.css and style.css 18 | // if true, you will only have the style.css that is the merged file created by this plugin 19 | this.deleteSourceFiles = (options.deleteSourceFiles !== undefined) 20 | ? options.deleteSourceFiles 21 | : true; 22 | }; 23 | 24 | mergeFilesWebpack.prototype.apply = function mergeFilesWebpackApply(compiler) { 25 | /* 26 | I write this as the webpack documentation is scarse for the things needed for this plugin. 27 | Webpack has a kind of event system to which plugins attach themself. 28 | To each plugin, webpack passes a reference to its compiler. 29 | The compiler goes through different steps and each time a step 30 | happens, Webpack sends the corresponding event. 31 | The way to hook to those events is through the plugin method below. 32 | There are many different events. The one of particular interest for this 33 | plugin is the "emit" event. 34 | This is the last event before the files are created on their directory. 35 | (There are other events after this one but are mainly for stats purposes) 36 | At this point, the extract-text-webpack-plugin plugin, has created those that 37 | would be the extracted files that we want to merge. They are saved under the assets object 38 | in the "compilation" object. Each entry into the assets object will be a file created. 39 | What this plugin will do is check first all the present entries to see which pass the test for the files 40 | we want to merge (e.g. Files ending with "style.css"), create a new entry with the name given 41 | in the filename option merging all the filtered entries, delete the entries from the assets object leaving 42 | only our new file and the files that didn´t pass the fitler. 43 | */ 44 | compiler.plugin('emit', (function (compilation, callback) { 45 | var assets = compilation.assets; 46 | // array of file names e.g. [entry1.js, entry1.style.css,...] 47 | var files = Object.keys(assets); 48 | var test = this.test; 49 | var filteredFiles = files.filter(function(file) { 50 | return file.search(test) > -1; 51 | }); 52 | if(filteredFiles.length === 0) { 53 | // No file passed our test. 54 | console.warn( 55 | 'NO FILE PASSED THE TEST.', 56 | 'Check the example at https://github.com/jtefera/merge-files-webpack'); 57 | callback(); 58 | return; 59 | } 60 | // we will merge all the filtered files into the first one 61 | var firstFile = assets[filteredFiles[0]]; 62 | for(var i = 1; i < filteredFiles.length; i++) { 63 | var thisFile = assets[filteredFiles[i]]; 64 | // the files extracted by extract-text-webpack-plugin 65 | // have each line as an element of the children array 66 | firstFile.children = firstFile.children.concat(thisFile.children); 67 | } 68 | if(this.deleteSourceFiles) { 69 | for(var i = 0; i < filteredFiles.length; i++) { 70 | // by deleting those entries from the assets object, 71 | // we prevent them from being created on file 72 | delete assets[filteredFiles[i]]; 73 | } 74 | // extract-text-webpack-plugin not only saves the files 75 | // into the assets object but also saves the name of the files 76 | // into the files array of every chunk (in this case, chunck will be every 77 | // entry file in your webpack) 78 | // this filenames will be used in the after-emit event to create a display that 79 | // shows info of every file created. If you don´t delete those filenames, error! 80 | var entryName; 81 | for(entryName in compilation.entrypoints){ 82 | if(compilation.entrypoints.hasOwnProperty(entryName)){ 83 | var entry = compilation.entrypoints[entryName]; 84 | for(var i = 0; i < filteredFiles.length; i++) { 85 | for(var j = 0; j < entry.chunks.length; j++){ 86 | var idx = entry.chunks[j].files.indexOf(filteredFiles[i]); 87 | if(idx > -1) { 88 | entry.chunks[j].files.splice(idx, 1); 89 | } 90 | } 91 | } 92 | } 93 | } 94 | } 95 | // Creating our file!! 96 | assets[this.filename] = firstFile; 97 | // The emit event is async so you need to call the callback to make 98 | // webpack know that you have finished 99 | callback(); 100 | }).bind(this)); 101 | } 102 | 103 | module.exports = mergeFilesWebpack; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "merge-files-webpack-plugin", 3 | "version": "1.1.1", 4 | "description": "A webpack plugin to merge different files outputted from extract-text-webpack-plugin", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "build": "npm run clean && webpack", 9 | "testWP": "node --nolazy --debug-brk=5858 ./node_modules/webpack/bin/webpack", 10 | "clean": "rimraf tests/test1/public" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/jtefera/merge-files-webpack.git" 15 | }, 16 | "author": "Jonathan Tefera Endale (jtefera)", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/jtefera/merge-files-webpack/issues" 20 | }, 21 | "homepage": "https://github.com/jtefera/merge-files-webpack#readme" 22 | } 23 | -------------------------------------------------------------------------------- /tests/test1/expected/entry1.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 4); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ function(module, exports) { 72 | 73 | // removed by extract-text-webpack-plugin 74 | 75 | /***/ }, 76 | /* 1 */, 77 | /* 2 */ 78 | /***/ function(module, exports, __webpack_require__) { 79 | 80 | __webpack_require__(3); 81 | 82 | /***/ }, 83 | /* 3 */ 84 | /***/ function(module, exports) { 85 | 86 | // removed by extract-text-webpack-plugin 87 | 88 | /***/ }, 89 | /* 4 */ 90 | /***/ function(module, exports, __webpack_require__) { 91 | 92 | __webpack_require__(0); 93 | __webpack_require__(2); 94 | 95 | /***/ } 96 | /******/ ]); -------------------------------------------------------------------------------- /tests/test1/expected/entry1.style.css: -------------------------------------------------------------------------------- 1 | .entry1 { 2 | color: red; 3 | }.entry1sub { 4 | color: blue; 5 | }.entry2 { 6 | color: red; 7 | } -------------------------------------------------------------------------------- /tests/test1/expected/entry2.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 5); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ({ 70 | 71 | /***/ 1: 72 | /***/ function(module, exports) { 73 | 74 | // removed by extract-text-webpack-plugin 75 | 76 | /***/ }, 77 | 78 | /***/ 5: 79 | /***/ function(module, exports, __webpack_require__) { 80 | 81 | __webpack_require__(1); 82 | 83 | /***/ } 84 | 85 | /******/ }); -------------------------------------------------------------------------------- /tests/test1/expected/entry2.style.css: -------------------------------------------------------------------------------- 1 | .entry2 { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /tests/test1/expected/style.css: -------------------------------------------------------------------------------- 1 | .entry1 { 2 | color: red; 3 | }.entry1sub { 4 | color: blue; 5 | }.entry2 { 6 | color: red; 7 | } -------------------------------------------------------------------------------- /tests/test1/public/css/style.css: -------------------------------------------------------------------------------- 1 | .entry1 { 2 | color: red; 3 | }.entry1sub { 4 | color: blue; 5 | }.entry2 { 6 | color: red; 7 | } -------------------------------------------------------------------------------- /tests/test1/public/entry1.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 4); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ([ 70 | /* 0 */ 71 | /***/ function(module, exports) { 72 | 73 | // removed by extract-text-webpack-plugin 74 | 75 | /***/ }, 76 | /* 1 */, 77 | /* 2 */ 78 | /***/ function(module, exports, __webpack_require__) { 79 | 80 | __webpack_require__(3); 81 | 82 | /***/ }, 83 | /* 3 */ 84 | /***/ function(module, exports) { 85 | 86 | // removed by extract-text-webpack-plugin 87 | 88 | /***/ }, 89 | /* 4 */ 90 | /***/ function(module, exports, __webpack_require__) { 91 | 92 | __webpack_require__(0); 93 | __webpack_require__(2); 94 | 95 | /***/ } 96 | /******/ ]); -------------------------------------------------------------------------------- /tests/test1/public/entry2.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) 10 | /******/ return installedModules[moduleId].exports; 11 | 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | 29 | 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | 36 | /******/ // identity function for calling harmony imports with the correct context 37 | /******/ __webpack_require__.i = function(value) { return value; }; 38 | 39 | /******/ // define getter function for harmony exports 40 | /******/ __webpack_require__.d = function(exports, name, getter) { 41 | /******/ if(!__webpack_require__.o(exports, name)) { 42 | /******/ Object.defineProperty(exports, name, { 43 | /******/ configurable: false, 44 | /******/ enumerable: true, 45 | /******/ get: getter 46 | /******/ }); 47 | /******/ } 48 | /******/ }; 49 | 50 | /******/ // getDefaultExport function for compatibility with non-harmony modules 51 | /******/ __webpack_require__.n = function(module) { 52 | /******/ var getter = module && module.__esModule ? 53 | /******/ function getDefault() { return module['default']; } : 54 | /******/ function getModuleExports() { return module; }; 55 | /******/ __webpack_require__.d(getter, 'a', getter); 56 | /******/ return getter; 57 | /******/ }; 58 | 59 | /******/ // Object.prototype.hasOwnProperty.call 60 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 61 | 62 | /******/ // __webpack_public_path__ 63 | /******/ __webpack_require__.p = ""; 64 | 65 | /******/ // Load entry module and return exports 66 | /******/ return __webpack_require__(__webpack_require__.s = 5); 67 | /******/ }) 68 | /************************************************************************/ 69 | /******/ ({ 70 | 71 | /***/ 1: 72 | /***/ function(module, exports) { 73 | 74 | // removed by extract-text-webpack-plugin 75 | 76 | /***/ }, 77 | 78 | /***/ 5: 79 | /***/ function(module, exports, __webpack_require__) { 80 | 81 | __webpack_require__(1); 82 | 83 | /***/ } 84 | 85 | /******/ }); -------------------------------------------------------------------------------- /tests/test1/src/entry1/index.js: -------------------------------------------------------------------------------- 1 | require('./style.css'); 2 | require('../entry1sub'); -------------------------------------------------------------------------------- /tests/test1/src/entry1/style.css: -------------------------------------------------------------------------------- 1 | .entry1 { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /tests/test1/src/entry1sub/index.js: -------------------------------------------------------------------------------- 1 | require('./style.css'); -------------------------------------------------------------------------------- /tests/test1/src/entry1sub/style.css: -------------------------------------------------------------------------------- 1 | .entry1sub { 2 | color: blue; 3 | } -------------------------------------------------------------------------------- /tests/test1/src/entry2/index.js: -------------------------------------------------------------------------------- 1 | require('./style.css'); -------------------------------------------------------------------------------- /tests/test1/src/entry2/style.css: -------------------------------------------------------------------------------- 1 | .entry2 { 2 | color: red; 3 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 4 | 5 | Used only as an example for test1 6 | 7 | 8 | 9 | */ 10 | var webpack = require('webpack'); 11 | var path = require('path'); 12 | var ExtractTextPlugin = require('extract-text-webpack-plugin'); 13 | var MergeFilesPlugin = require('./index.js'); 14 | 15 | module.exports = { 16 | entry: { 17 | 'entry1': './tests/test1/src/entry1/index.js', 18 | 'entry2': './tests/test1/src/entry2/index.js' 19 | }, 20 | output: { 21 | path: path.join(__dirname, './tests/test1/public'), 22 | filename: '[name].js' 23 | }, 24 | module: { 25 | rules: [ 26 | { 27 | use: ExtractTextPlugin.extract({ 28 | use: 'css-loader' 29 | }), 30 | test: /\.css$/, 31 | exclude: /node_modules/ 32 | } 33 | ] 34 | }, 35 | plugins: [ 36 | new ExtractTextPlugin({ 37 | filename: '[name].style.css' 38 | }), 39 | new MergeFilesPlugin({ 40 | filename: 'css/style.css', 41 | test: /style\.css/, // it could also be a string 42 | deleteSourceFiles: true 43 | }) 44 | ] 45 | } --------------------------------------------------------------------------------