Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate to mini-css-extract-plugin from extract-text-webpack-plugin #1062

Merged
merged 3 commits into from Oct 2, 2018
Merged

Migrate to mini-css-extract-plugin from extract-text-webpack-plugin #1062

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
380bd54
perf: migrate from extract-text plugin to mini-css plugin
sibiraj-s Oct 1, 2018
6320b56
fix: rename `contenthash` to `templatehash`
sibiraj-s Oct 1, 2018
81e1900
revert: restore original filenames in examples
sibiraj-s Oct 1, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 0 additions & 5 deletions .travis.yml
View file
Open in desktop
Expand Up @@ -3,14 +3,9 @@ node_js:
- stable
- lts/*
- 6.9
env:
- WEBPACK_VERSION=4.0.0 EXTRACT_PLUGIN_VERSION=4.0.0-alpha.0
before_install:
- stty columns 120
install:
- travis_retry npm install --ignore-scripts
- npm rm webpack
- npm rm extract-text-webpack-plugin
- npm install webpack@$WEBPACK_VERSION extract-text-webpack-plugin@$EXTRACT_PLUGIN_VERSION --ignore-scripts || true
script:
- travis_retry npm test
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Expand Up @@ -217,7 +217,7 @@ plugins: [
```

If you already have a template loader, you can use it to parse the template.
Please note that this will also happen if you specifiy the html-loader and use `.html` file as template.
Please note that this will also happen if you specify the html-loader and use `.html` file as template.

**webpack.config.js**
```js
Expand Down
36 changes: 24 additions & 12 deletions examples/appcache/dist/webpack-4/bundle.js
View file
Open in desktop
Expand Up @@ -36,19 +36,34 @@
/******/ // 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
/******/ });
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
Expand All @@ -73,20 +88,17 @@
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(4);
__webpack_require__(1);
var h1 = document.createElement('h1');
h1.innerHTML = 'Hello world!';
document.body.appendChild(h1);


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

// removed by extract-text-webpack-plugin
// extracted by mini-css-extract-plugin

/***/ })
/******/ ]);
4 changes: 2 additions & 2 deletions examples/appcache/dist/webpack-4/manifest.appcache
View file
Open in desktop
@@ -1,9 +1,9 @@
CACHE MANIFEST
# 83ab7029cec7797a5a8a
# b399a5e3b098d84ca3a0

0714810ae3fb211173e2964249507195.png
bundle.js
styles.css
bundle.js

NETWORK:
*
2 changes: 1 addition & 1 deletion examples/appcache/dist/webpack-4/styles.css
View file
Open in desktop
@@ -1,3 +1,3 @@
body {
background: snow;
}
}
6 changes: 3 additions & 3 deletions examples/appcache/webpack.config.js
View file
Open in desktop
@@ -1,7 +1,7 @@
var path = require('path');
var AppCachePlugin = require('appcache-webpack-plugin');
var HtmlWebpackPlugin = require('../..');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var webpackMajorVersion = require('webpack/package.json').version.split('.')[0];

module.exports = {
Expand All @@ -14,7 +14,7 @@ module.exports = {
},
module: {
rules: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' }) },
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
{ test: /\.png$/, loader: 'file-loader' },
{ test: /\.html$/, loader: 'html-loader?-removeOptionalTags' }
]
Expand All @@ -29,6 +29,6 @@ module.exports = {
collapseWhitespace: true
}
}),
new ExtractTextPlugin('styles.css')
new MiniCssExtractPlugin({ filename: 'styles.css' })
]
};
49 changes: 34 additions & 15 deletions examples/chunk-optimization/dist/webpack-4/entryA.js
View file
Open in desktop
Expand Up @@ -2,8 +2,9 @@
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1]
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
Expand All @@ -20,6 +21,7 @@
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
Expand All @@ -34,12 +36,12 @@
/******/ var result;
/******/ for(var i = 0; i < deferredModules.length; i++) {
/******/ var deferredModule = deferredModules[i];
/******/ var fullfilled = true;
/******/ var fulfilled = true;
/******/ for(var j = 1; j < deferredModule.length; j++) {
/******/ var depId = deferredModule[j];
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
/******/ if(installedChunks[depId] !== 0) fulfilled = false;
/******/ }
/******/ if(fullfilled) {
/******/ if(fulfilled) {
/******/ deferredModules.splice(i--, 1);
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/ }
Expand All @@ -51,8 +53,10 @@
/******/ var installedModules = {};
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 5: 0
/******/ 3: 0
/******/ };
/******/
/******/ var deferredModules = [];
Expand Down Expand Up @@ -91,19 +95,34 @@
/******/ // 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
/******/ });
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
Expand All @@ -128,19 +147,19 @@
/******/
/******/
/******/ // add entry module to deferred list
/******/ deferredModules.push([8,2,3,1,0]);
/******/ deferredModules.push([2,0,5,1,2]);
/******/ // run deferred modules when ready
/******/ return checkDeferredModules();
/******/ })
/************************************************************************/
/******/ ({

/***/ 8:
/***/ 2:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(1);
var multiply = __webpack_require__(0);
var concat = __webpack_require__(3);
__webpack_require__(0);
var multiply = __webpack_require__(1);
var concat = __webpack_require__(7);
var h1 = document.createElement('h1');
h1.innerHTML = concat('Hello world from Entry ', multiply(1, 1));
document.body.appendChild(h1);
Expand Down
17 changes: 8 additions & 9 deletions examples/chunk-optimization/dist/webpack-4/entryA~entryB.js
View file
Open in desktop
@@ -1,12 +1,11 @@
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{

/***/ 1:
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],[
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

// style-loader: Adds some css to the DOM by adding a <style> tag

// load the styles
var content = __webpack_require__(7);
var content = __webpack_require__(3);
if(typeof content === 'string') content = [[module.i, content, '']];
// add the styles to the DOM
var update = __webpack_require__(5)(content, {});
Expand All @@ -15,11 +14,12 @@ if(content.locals) module.exports = content.locals;
if(false) {}

/***/ }),

/***/ 7:
/* 1 */,
/* 2 */,
/* 3 */
/***/ (function(module, exports, __webpack_require__) {

exports = module.exports = __webpack_require__(6)();
exports = module.exports = __webpack_require__(4)();
// imports


Expand All @@ -30,5 +30,4 @@ exports.push([module.i, "body {\n background: snow;\n}", ""]);


/***/ })

}]);
]]);
45 changes: 32 additions & 13 deletions examples/chunk-optimization/dist/webpack-4/entryB.js
View file
Open in desktop
Expand Up @@ -2,8 +2,9 @@
/******/ // install a JSONP callback for chunk loading
/******/ function webpackJsonpCallback(data) {
/******/ var chunkIds = data[0];
/******/ var moreModules = data[1]
/******/ var moreModules = data[1];
/******/ var executeModules = data[2];
/******/
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
Expand All @@ -20,6 +21,7 @@
/******/ }
/******/ }
/******/ if(parentJsonpFunction) parentJsonpFunction(data);
/******/
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
Expand All @@ -34,12 +36,12 @@
/******/ var result;
/******/ for(var i = 0; i < deferredModules.length; i++) {
/******/ var deferredModule = deferredModules[i];
/******/ var fullfilled = true;
/******/ var fulfilled = true;
/******/ for(var j = 1; j < deferredModule.length; j++) {
/******/ var depId = deferredModule[j];
/******/ if(installedChunks[depId] !== 0) fullfilled = false;
/******/ if(installedChunks[depId] !== 0) fulfilled = false;
/******/ }
/******/ if(fullfilled) {
/******/ if(fulfilled) {
/******/ deferredModules.splice(i--, 1);
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/ }
Expand All @@ -51,6 +53,8 @@
/******/ var installedModules = {};
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ 4: 0
/******/ };
Expand Down Expand Up @@ -91,19 +95,34 @@
/******/ // 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
/******/ });
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
Expand All @@ -128,18 +147,18 @@
/******/
/******/
/******/ // add entry module to deferred list
/******/ deferredModules.push([2,2,1,0]);
/******/ deferredModules.push([8,0,1,2]);
/******/ // run deferred modules when ready
/******/ return checkDeferredModules();
/******/ })
/************************************************************************/
/******/ ({

/***/ 2:
/***/ 8:
/***/ (function(module, exports, __webpack_require__) {

__webpack_require__(1);
var multiply = __webpack_require__(0);
__webpack_require__(0);
var multiply = __webpack_require__(1);
var h1 = document.createElement('h1');
h1.innerHTML = 'Hello world from Entry ' + multiply(1, 2);
document.body.appendChild(h1);
Expand Down