# example.js ``` javascript require("./style.css"); ``` # style.css ``` css body { background: url(image.png); } ``` # webpack.config.js ``` javascript var ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { loaders: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ use: "css-loader" }) }, { test: /\.png$/, loader: "file-loader" } ] }, plugins: [ new ExtractTextPlugin({ filename: "style.css", allChunks: true }) ] }; ``` # js/output.js
/******/ (function(modules) { /* webpackBootstrap */ }) ``` javascript /******/ (function(modules) { // webpackBootstrap /******/ // The module cache /******/ var installedModules = {}; /******/ /******/ // The require function /******/ function __webpack_require__(moduleId) { /******/ /******/ // Check if module is in cache /******/ if(installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ } /******/ // Create a new module (and put it into the cache) /******/ var module = installedModules[moduleId] = { /******/ i: moduleId, /******/ l: false, /******/ exports: {} /******/ }; /******/ /******/ // Execute the module function /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ /******/ // Flag the module as loaded /******/ module.l = true; /******/ /******/ // Return the exports of the module /******/ return module.exports; /******/ } /******/ /******/ /******/ // expose the modules object (__webpack_modules__) /******/ __webpack_require__.m = modules; /******/ /******/ // expose the module cache /******/ __webpack_require__.c = installedModules; /******/ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? /******/ function getDefault() { return module['default']; } : /******/ function getModuleExports() { return module; }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ }; /******/ /******/ // Object.prototype.hasOwnProperty.call /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; /******/ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = "js/"; /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ ```
``` javascript /******/ ([ /* 0 */ /*!********************!*\ !*** ./example.js ***! \********************/ /*! dynamic exports provided */ /*! all exports used */ /***/ (function(module, exports, __webpack_require__) { __webpack_require__(/*! ./style.css */ 1); /***/ }), /* 1 */ /*!*******************!*\ !*** ./style.css ***! \*******************/ /*! dynamic exports provided */ /*! all exports used */ /***/ (function(module, exports) { // removed by extract-text-webpack-plugin /***/ }) /******/ ]); ``` # js/style.css ``` css body { background: url(js/ce21cbdd9b894e6af794813eb3fdaf60.png); } ``` # Info ## Uncompressed ``` Hash: d3955970c7b0655c299a Version: webpack 3.11.0 Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] output.js 2.9 kB 0 [emitted] main style.css 69 bytes 0 [emitted] main Entrypoint main = output.js style.css chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered] > main [0] ./example.js [0] ./example.js 23 bytes {0} [built] [1] ./style.css 41 bytes {0} [built] cjs require ./style.css [0] ./example.js 1:0-22 Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css: Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] Entrypoint undefined = extract-text-webpack-plugin-output-filename chunk {0} extract-text-webpack-plugin-output-filename 2.57 kB [entry] [rendered] > [0] (webpack)/node_modules/css-loader!./style.css [0] (webpack)/node_modules/css-loader!./style.css 231 bytes {0} [built] [2] ./image.png 82 bytes {0} [built] cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:58-80 + 1 hidden module ``` ## Minimized (uglify-js, no zip) ``` Hash: 7e35402b768b90e83df1 Version: webpack 3.11.0 Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] output.js 504 bytes 0 [emitted] main style.css 61 bytes 0 [emitted] main Entrypoint main = output.js style.css chunk {0} output.js, style.css (main) 64 bytes [entry] [rendered] > main [0] ./example.js [0] ./example.js 23 bytes {0} [built] [1] ./style.css 41 bytes {0} [built] cjs require ./style.css [0] ./example.js 1:0-22 Child extract-text-webpack-plugin ../../node_modules/extract-text-webpack-plugin/dist ../../node_modules/css-loader/index.js!style.css: Asset Size Chunks Chunk Names ce21cbdd9b894e6af794813eb3fdaf60.png 119 bytes [emitted] Entrypoint undefined = extract-text-webpack-plugin-output-filename chunk {0} extract-text-webpack-plugin-output-filename 2.56 kB [entry] [rendered] > [0] (webpack)/node_modules/css-loader!./style.css [0] (webpack)/node_modules/css-loader!./style.css 218 bytes {0} [built] [2] ./image.png 82 bytes {0} [built] cjs require ./image.png [0] (webpack)/node_modules/css-loader!./style.css 6:50-72 + 1 hidden module ```