|
| 1 | + |
| 2 | +# example.js |
| 3 | + |
| 4 | +``` javascript |
| 5 | +require("./style.css"); |
| 6 | +require(["./chunk"]); |
| 7 | +``` |
| 8 | + |
| 9 | +# style.css |
| 10 | + |
| 11 | +``` css |
| 12 | +body { |
| 13 | + background: url(image.png); |
| 14 | +} |
| 15 | +``` |
| 16 | + |
| 17 | +# chunk.js |
| 18 | + |
| 19 | +``` javascript |
| 20 | +require("./style2.css"); |
| 21 | +``` |
| 22 | + |
| 23 | +# style2.css |
| 24 | + |
| 25 | +``` css |
| 26 | +.xyz { |
| 27 | + background: url(image2.png); |
| 28 | +} |
| 29 | +``` |
| 30 | + |
| 31 | +# webpack.config.js |
| 32 | + |
| 33 | +``` javascript |
| 34 | +var ExtractTextPlugin = require("extract-text-webpack-plugin"); |
| 35 | +module.exports = { |
| 36 | + module: { |
| 37 | + loaders: [ |
| 38 | + { |
| 39 | + test: /\.css$/, |
| 40 | + loader: ExtractTextPlugin.extract("style-loader", "css-loader") |
| 41 | + }, |
| 42 | + { test: /\.png$/, loader: "file-loader" } |
| 43 | + ] |
| 44 | + }, |
| 45 | + plugins: [ |
| 46 | + new ExtractTextPlugin("style.css") |
| 47 | + ] |
| 48 | +}; |
| 49 | +``` |
| 50 | + |
| 51 | +# js/output.js |
| 52 | + |
| 53 | +``` javascript |
| 54 | +/******/ (function(modules) { // webpackBootstrap |
| 55 | +/******/ // install a JSONP callback for chunk loading |
| 56 | +/******/ var parentJsonpFunction = window["webpackJsonp"]; |
| 57 | +/******/ window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules) { |
| 58 | +/******/ // add "moreModules" to the modules object, |
| 59 | +/******/ // then flag all "chunkIds" as loaded and fire callback |
| 60 | +/******/ var moduleId, chunkId, i = 0, callbacks = []; |
| 61 | +/******/ for(;i < chunkIds.length; i++) { |
| 62 | +/******/ chunkId = chunkIds[i]; |
| 63 | +/******/ if(installedChunks[chunkId]) |
| 64 | +/******/ callbacks.push.apply(callbacks, installedChunks[chunkId]); |
| 65 | +/******/ installedChunks[chunkId] = 0; |
| 66 | +/******/ } |
| 67 | +/******/ for(moduleId in moreModules) { |
| 68 | +/******/ modules[moduleId] = moreModules[moduleId]; |
| 69 | +/******/ } |
| 70 | +/******/ if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules); |
| 71 | +/******/ while(callbacks.length) |
| 72 | +/******/ callbacks.shift().call(null, __webpack_require__); |
| 73 | +/******/ |
| 74 | +/******/ }; |
| 75 | +/******/ |
| 76 | +/******/ // The module cache |
| 77 | +/******/ var installedModules = {}; |
| 78 | +/******/ |
| 79 | +/******/ // object to store loaded and loading chunks |
| 80 | +/******/ // "0" means "already loaded" |
| 81 | +/******/ // Array means "loading", array contains callbacks |
| 82 | +/******/ var installedChunks = { |
| 83 | +/******/ 1:0 |
| 84 | +/******/ }; |
| 85 | +/******/ |
| 86 | +/******/ // The require function |
| 87 | +/******/ function __webpack_require__(moduleId) { |
| 88 | +/******/ |
| 89 | +/******/ // Check if module is in cache |
| 90 | +/******/ if(installedModules[moduleId]) |
| 91 | +/******/ return installedModules[moduleId].exports; |
| 92 | +/******/ |
| 93 | +/******/ // Create a new module (and put it into the cache) |
| 94 | +/******/ var module = installedModules[moduleId] = { |
| 95 | +/******/ exports: {}, |
| 96 | +/******/ id: moduleId, |
| 97 | +/******/ loaded: false |
| 98 | +/******/ }; |
| 99 | +/******/ |
| 100 | +/******/ // Execute the module function |
| 101 | +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); |
| 102 | +/******/ |
| 103 | +/******/ // Flag the module as loaded |
| 104 | +/******/ module.loaded = true; |
| 105 | +/******/ |
| 106 | +/******/ // Return the exports of the module |
| 107 | +/******/ return module.exports; |
| 108 | +/******/ } |
| 109 | +/******/ |
| 110 | +/******/ // This file contains only the entry chunk. |
| 111 | +/******/ // The chunk loading function for additional chunks |
| 112 | +/******/ __webpack_require__.e = function requireEnsure(chunkId, callback) { |
| 113 | +/******/ // "0" is the signal for "already loaded" |
| 114 | +/******/ if(installedChunks[chunkId] === 0) |
| 115 | +/******/ return callback.call(null, __webpack_require__); |
| 116 | +/******/ |
| 117 | +/******/ // an array means "currently loading". |
| 118 | +/******/ if(installedChunks[chunkId] !== undefined) { |
| 119 | +/******/ installedChunks[chunkId].push(callback); |
| 120 | +/******/ } else { |
| 121 | +/******/ // start chunk loading |
| 122 | +/******/ installedChunks[chunkId] = [callback]; |
| 123 | +/******/ var head = document.getElementsByTagName('head')[0]; |
| 124 | +/******/ var script = document.createElement('script'); |
| 125 | +/******/ script.type = 'text/javascript'; |
| 126 | +/******/ script.charset = 'utf-8'; |
| 127 | +/******/ script.src = __webpack_require__.p + "" + chunkId + ".output.js"; |
| 128 | +/******/ head.appendChild(script); |
| 129 | +/******/ } |
| 130 | +/******/ }; |
| 131 | +/******/ |
| 132 | +/******/ // expose the modules object (__webpack_modules__) |
| 133 | +/******/ __webpack_require__.m = modules; |
| 134 | +/******/ |
| 135 | +/******/ // expose the module cache |
| 136 | +/******/ __webpack_require__.c = installedModules; |
| 137 | +/******/ |
| 138 | +/******/ // __webpack_public_path__ |
| 139 | +/******/ __webpack_require__.p = "js/"; |
| 140 | +/******/ |
| 141 | +/******/ // Load entry module and return exports |
| 142 | +/******/ return __webpack_require__(0); |
| 143 | +/******/ }) |
| 144 | +/************************************************************************/ |
| 145 | +/******/ ([ |
| 146 | +/* 0 */ |
| 147 | +/*!********************!*\ |
| 148 | + !*** ./example.js ***! |
| 149 | + \********************/ |
| 150 | +/***/ function(module, exports, __webpack_require__) { |
| 151 | + |
| 152 | + __webpack_require__(/*! ./style.css */ 1); |
| 153 | + __webpack_require__.e/* require */(0, function(__webpack_require__) {[__webpack_require__(/*! ./chunk */ 3)];}); |
| 154 | + |
| 155 | + |
| 156 | +/***/ }, |
| 157 | +/* 1 */ |
| 158 | +/*!*******************!*\ |
| 159 | + !*** ./style.css ***! |
| 160 | + \*******************/ |
| 161 | +/***/ function(module, exports, __webpack_require__) { |
| 162 | + |
| 163 | + // removed by extract-text-webpack-plugin |
| 164 | + |
| 165 | +/***/ } |
| 166 | +/******/ ]) |
| 167 | +``` |
| 168 | + |
| 169 | +# js/0.output.js |
| 170 | + |
| 171 | +``` javascript |
| 172 | +webpackJsonp([0],[ |
| 173 | +/* 0 */, |
| 174 | +/* 1 */, |
| 175 | +/* 2 */ |
| 176 | +/*!********************!*\ |
| 177 | + !*** ./style2.css ***! |
| 178 | + \********************/ |
| 179 | +/***/ function(module, exports, __webpack_require__) { |
| 180 | + |
| 181 | + // style-loader: Adds some css to the DOM by adding a <style> tag |
| 182 | + var dispose = __webpack_require__(/*! (webpack)/~/style-loader/addStyle.js */ 6) |
| 183 | + // The css code: |
| 184 | + (__webpack_require__(/*! !(webpack)/~/css-loader!./style2.css */ 4)) |
| 185 | + if(false) { |
| 186 | + module.hot.accept(); |
| 187 | + module.hot.dispose(dispose); |
| 188 | + } |
| 189 | + |
| 190 | +/***/ }, |
| 191 | +/* 3 */ |
| 192 | +/*!******************!*\ |
| 193 | + !*** ./chunk.js ***! |
| 194 | + \******************/ |
| 195 | +/***/ function(module, exports, __webpack_require__) { |
| 196 | + |
| 197 | + __webpack_require__(/*! ./style2.css */ 2); |
| 198 | + |
| 199 | + |
| 200 | +/***/ }, |
| 201 | +/* 4 */ |
| 202 | +/*!*******************************************!*\ |
| 203 | + !*** (webpack)/~/css-loader!./style2.css ***! |
| 204 | + \*******************************************/ |
| 205 | +/***/ function(module, exports, __webpack_require__) { |
| 206 | + |
| 207 | + module.exports = |
| 208 | + ".xyz {\r\n\tbackground: url("+__webpack_require__(/*! ./image2.png */ 5)+");\r\n}\r\n"; |
| 209 | + |
| 210 | +/***/ }, |
| 211 | +/* 5 */ |
| 212 | +/*!********************!*\ |
| 213 | + !*** ./image2.png ***! |
| 214 | + \********************/ |
| 215 | +/***/ function(module, exports, __webpack_require__) { |
| 216 | + |
| 217 | + module.exports = __webpack_require__.p + "ce21cbdd9b894e6af794813eb3fdaf60.png" |
| 218 | + |
| 219 | +/***/ } |
| 220 | +]); |
| 221 | +``` |
| 222 | + |
| 223 | +# js/style.css |
| 224 | + |
| 225 | +``` javascript |
| 226 | +body { |
| 227 | + background: url(js/ce21cbdd9b894e6af794813eb3fdaf60.png); |
| 228 | +} |
| 229 | +``` |
| 230 | + |
| 231 | +# Info |
| 232 | + |
| 233 | +## Uncompressed |
| 234 | + |
| 235 | +``` |
| 236 | +Hash: 16bad7466ac50f139f21 |
| 237 | +Version: webpack 1.3.2-beta8 |
| 238 | +Time: 128ms |
| 239 | + Asset Size Chunks Chunk Names |
| 240 | +ce21cbdd9b894e6af794813eb3fdaf60.png 119 [emitted] |
| 241 | + style.css 71 [emitted] |
| 242 | + 0.output.js 1252 0 [emitted] |
| 243 | + output.js 4080 1 [emitted] main |
| 244 | +chunk {0} 0.output.js 650 {1} [rendered] |
| 245 | + > [0] ./example.js 2:0-20 |
| 246 | + [2] ./style2.css 456 {0} [built] |
| 247 | + cjs require ./style2.css [3] ./chunk.js 1:0-23 |
| 248 | + [3] ./chunk.js 26 {0} [built] |
| 249 | + amd require ./chunk [0] ./example.js 2:0-20 |
| 250 | + [4] (webpack)/~/css-loader!./style2.css 87 {0} [built] |
| 251 | + cjs require !!(webpack)\node_modules\css-loader\index.js!.\style2.css [2] ./style2.css 4:2-188 |
| 252 | + [5] ./image2.png 81 {0} [built] |
| 253 | + cjs require ./image2.png [4] (webpack)/~/css-loader!./style2.css 2:32-55 |
| 254 | +chunk {1} output.js (main) 89 [rendered] |
| 255 | + > main [0] ./example.js |
| 256 | + [0] ./example.js 48 {1} [built] |
| 257 | + [1] ./style.css 41 {1} [built] |
| 258 | + cjs require ./style.css [0] ./example.js 1:0-22 |
| 259 | +Child extract-text-webpack-plugin: |
| 260 | + Asset Size Chunks Chunk Names |
| 261 | + ce21cbdd9b894e6af794813eb3fdaf60.png 119 |
| 262 | + chunk {0} (webpack)/~\extract-text-webpack-plugin (webpack)\node_modules\css-loader\index.js!.\style.css 167 [rendered] |
| 263 | + > [0] (webpack)/~/css-loader!./style.css |
| 264 | + [0] (webpack)/~/css-loader!./style.css 86 {0} [built] |
| 265 | + [1] ./image.png 81 {0} [built] |
| 266 | + cjs require ./image.png [0] (webpack)/~/css-loader!./style.css 2:32-54 |
| 267 | +``` |
| 268 | + |
| 269 | +## Minimized (uglify-js, no zip) |
| 270 | + |
| 271 | +``` |
| 272 | +Hash: a1cb30e2febe8a9ad8eb |
| 273 | +Version: webpack 1.3.2-beta8 |
| 274 | +Time: 209ms |
| 275 | + Asset Size Chunks Chunk Names |
| 276 | +ce21cbdd9b894e6af794813eb3fdaf60.png 119 [emitted] |
| 277 | + style.css 61 [emitted] |
| 278 | + 0.output.js 202 0 [emitted] |
| 279 | + output.js 749 1 [emitted] main |
| 280 | +chunk {0} 0.output.js 633 {1} [rendered] |
| 281 | + > [0] ./example.js 2:0-20 |
| 282 | + [2] ./style2.css 456 {0} [built] |
| 283 | + cjs require ./style2.css [3] ./chunk.js 1:0-23 |
| 284 | + [3] ./chunk.js 26 {0} [built] |
| 285 | + amd require ./chunk [0] ./example.js 2:0-20 |
| 286 | + [4] (webpack)/~/css-loader!./style2.css 70 {0} [built] |
| 287 | + cjs require !!(webpack)\node_modules\css-loader\index.js!.\style2.css [2] ./style2.css 4:2-188 |
| 288 | + [5] ./image2.png 81 {0} [built] |
| 289 | + cjs require ./image2.png [4] (webpack)/~/css-loader!./style2.css 2:24-47 |
| 290 | +chunk {1} output.js (main) 89 [rendered] |
| 291 | + > main [0] ./example.js |
| 292 | + [0] ./example.js 48 {1} [built] |
| 293 | + [1] ./style.css 41 {1} [built] |
| 294 | + cjs require ./style.css [0] ./example.js 1:0-22 |
| 295 | +
|
| 296 | +WARNING in 0.output.js from UglifyJs |
| 297 | +Condition always false [(webpack)/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!(webpack)/~/style-loader!(webpack)/~/css-loader!./style2.css:5,0] |
| 298 | +Dropping unreachable code [(webpack)/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!(webpack)/~/style-loader!(webpack)/~/css-loader!./style2.css:6,0] |
| 299 | +Side effects in initialization of unused variable dispose [(webpack)/~/extract-text-webpack-plugin/loader.js?{"omit":1,"extract":true,"remove":true}!(webpack)/~/style-loader!(webpack)/~/css-loader!./style2.css:2,0] |
| 300 | +Child extract-text-webpack-plugin: |
| 301 | + Asset Size Chunks Chunk Names |
| 302 | + ce21cbdd9b894e6af794813eb3fdaf60.png 119 |
| 303 | + chunk {0} (webpack)/~\extract-text-webpack-plugin (webpack)\node_modules\css-loader\index.js!.\style.css 150 [rendered] |
| 304 | + > [0] (webpack)/~/css-loader!./style.css |
| 305 | + [0] (webpack)/~/css-loader!./style.css 69 {0} [built] |
| 306 | + [1] ./image.png 81 {0} [built] |
| 307 | + cjs require ./image.png [0] (webpack)/~/css-loader!./style.css 2:24-46 |
| 308 | +``` |
0 commit comments