Skip to content

Instantly share code, notes, and snippets.

@JQChan

JQChan/output-after-css-change.md

Forked from necolas/output-after-css-change.md
Created August 30, 2016 07:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JQChan/236ed98b27f5318a344f9c4cfff0c272 to your computer and use it in GitHub Desktop.
Save JQChan/236ed98b27f5318a344f9c4cfff0c272 to your computer and use it in GitHub Desktop.
Download ZIP
Webpack hashing and file-loader bugs
Raw
output-after-css-change.md

about/index.css was changed. color: black -> color: blue.

Issues with output:

  • Same hash
  • Same chunkhash (messes with cache invalidation of CSS)
  • Another different publicPath coming from file-loader in the extracted CSS.

Webpack

Hash: f438ea140db6325692ef
Version: webpack 1.4.0-beta2
Time: 157ms
                                     Asset   Size  Chunks             Chunk Names
image.469477c1c02e3b07a27653818bb4b941.jpg  18136          [emitted]
             about.6e5f04e891c90505b371.js   1901       0  [emitted]  about
            about.6e5f04e891c90505b371.css    146          [emitted]
   [0] ./web_modules/about/index.js 41 {0} [built]
   [1] ./web_modules/base/index.js 24 {0} [built]
   [2] ./web_modules/about/index.css 41 {0} [built]
   [3] ./web_modules/base/index.css 41 {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader!./web_modules/base/index.css 54 {0} [built]
Child extract-text-webpack-plugin:
                                         Asset   Size  Chunks             Chunk Names
    image.469477c1c02e3b07a27653818bb4b941.jpg  18136          [emitted]
       [0] ./~/css-loader!./web_modules/about/index.css 98 {0} [built]
       [1] ./web_modules/about/image.jpg 87 {0} [built]

Build

build/
└── f438ea140db6325692ef
    ├── about.6e5f04e891c90505b371.css
    ├── about.6e5f04e891c90505b371.js
    └── image.469477c1c02e3b07a27653818bb4b941.jpg

about.6e5f04e891c90505b371.css

body {
  background: white;
}
.about {
  background: url(build/e84a9c9d02568436bd40/image.469477c1c02e3b07a27653818bb4b941.jpg);
  color: blue;
}

about.6e5f04e891c90505b371.js

/******/ (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] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.loaded = 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;
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "build/f438ea140db6325692ef/";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

__webpack_require__(1);
__webpack_require__(2);


/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

__webpack_require__(3);


/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

// removed by extract-text-webpack-plugin

/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {

// removed by extract-text-webpack-plugin

/***/ }
/******/ ])
Raw
output.md

Webpack

Hash: f438ea140db6325692ef
Version: webpack 1.4.0-beta2
Time: 168ms
                                     Asset   Size  Chunks             Chunk Names
image.469477c1c02e3b07a27653818bb4b941.jpg  18136          [emitted]
             about.6e5f04e891c90505b371.js   1901       0  [emitted]  about
            about.6e5f04e891c90505b371.css    147          [emitted]
   [0] ./web_modules/about/index.js 41 {0} [built]
   [1] ./web_modules/base/index.js 24 {0} [built]
   [2] ./web_modules/about/index.css 41 {0} [built]
   [3] ./web_modules/base/index.css 41 {0} [built]
Child extract-text-webpack-plugin:
       [0] ./~/css-loader!./web_modules/base/index.css 54 {0} [built]
Child extract-text-webpack-plugin:
                                         Asset   Size  Chunks             Chunk Names
    image.469477c1c02e3b07a27653818bb4b941.jpg  18136          [emitted]
       [0] ./~/css-loader!./web_modules/about/index.css 99 {0} [built]
       [1] ./web_modules/about/image.jpg 87 {0} [built]

Build

build/
└── f438ea140db6325692ef
    ├── about.6e5f04e891c90505b371.css
    ├── about.6e5f04e891c90505b371.js
    └── image.469477c1c02e3b07a27653818bb4b941.jpg

about.6e5f04e891c90505b371.css

body {
  background: white;
}
.about {
  background: url(build/9c86943f40359c30fd26/image.469477c1c02e3b07a27653818bb4b941.jpg);
  color: black;
}

about.6e5f04e891c90505b371.js

/******/ (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] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.loaded = 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;
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "build/f438ea140db6325692ef/";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

__webpack_require__(1);
__webpack_require__(2);


/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {

__webpack_require__(3);


/***/ },
/* 2 */
/***/ function(module, exports, __webpack_require__) {

// removed by extract-text-webpack-plugin

/***/ },
/* 3 */
/***/ function(module, exports, __webpack_require__) {

// removed by extract-text-webpack-plugin

/***/ }
/******/ ])
Raw
package.json
{
"private": true,
"description": "",
"dependencies": {},
"devDependencies": {
"extract-text-webpack-plugin": "*",
"webpack": "^1.4.0-beta2",
"css-loader": "*",
"style-loader": "*",
"file-loader": "*"
},
"scripts": {
"start": "rm -rf build && webpack --progress --colors"
},
"engines": {
"node": ">=0.10.0",
"npm": ">=1.4.0"
}
}
Raw
project.md

Tree

web_modules/
├── about
│   ├── image.jpg
│   ├── index.css
│   └── index.js
└── base
    ├── index.css
    └── index.js

About

index.css

.about {
  background: url(image.jpg);
  color: black;
}

index.js

require('base');
require('./index.css');

Base

index.css

body {
  background: white;
}

index.js

require('./index.css');
Raw
webpack.config.js
var path = require('path');
var version = require('./package.json').version;
var webpack = require('webpack');
/**
* Webpack plugins
*/
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/**
* Webpack config
*/
module.exports = {
entry: {
about: 'about'
},
module: {
loaders: [{
test: /\.css$/,
loader: ExtractTextPlugin.extract('css-loader')
}, {
test: /\.(gif|jpe?g|png|svg)$/,
loader: 'file-loader',
query: { name: '[name].[hash].[ext]' }
}]
},
output: {
filename: '[name].[chunkhash].js',
path: 'build/[hash]/',
publicPath: 'build/[hash]/',
sourcePrefix: ''
},
plugins: [
new ExtractTextPlugin('[name].[chunkhash].css', { allChunks: true })
],
resolve: {
modulesDirectories: [
'node_modules',
'web_modules'
]
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment