From d9e95687e9e491ad3af22ccfefacbe3fd30096f5 Mon Sep 17 00:00:00 2001 From: gowravshekar Date: Wed, 10 Sep 2014 19:20:26 +0530 Subject: [PATCH 01/13] Update package.json Change bootstrap peerDependency from "3.0.2" to "~3.0.2" --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7c6d902..7a575c1 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,6 @@ "url": "https://github.com/bline/bootstrap-webpack.git" }, "peerDependencies": { - "bootstrap": "3.0.2" + "bootstrap": "~3.0.2" } } From 2c6b4e57f6528f1a857888838c5649430e984762 Mon Sep 17 00:00:00 2001 From: gowravshekar Date: Wed, 10 Sep 2014 19:38:05 +0530 Subject: [PATCH 02/13] Update package.json Changed bootstrap dependency from ~3.0.2 to >=3.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7a575c1..92e5331 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,6 @@ "url": "https://github.com/bline/bootstrap-webpack.git" }, "peerDependencies": { - "bootstrap": "~3.0.2" + "bootstrap": ">=3.0.2" } } From 7f756f86102172d998009e45fc94d220450cf5b8 Mon Sep 17 00:00:00 2001 From: Gowrav Date: Thu, 11 Sep 2014 02:28:58 +0530 Subject: [PATCH 03/13] 0.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 92e5331..0ca498f 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "bootstrap-webpack", "description": "bootstrap3 package for webpack", "main": "index.js", - "version": "0.0.1", + "version": "0.0.2", "loader": "index.loader.js", "keywords": [ "bootstrap", From 13ca3b14393f9c34858aa5cfb2fce0f63ddc4b50 Mon Sep 17 00:00:00 2001 From: Gowrav Date: Tue, 16 Sep 2014 14:38:26 +0530 Subject: [PATCH 04/13] Support extract-text-webpack-plugin --- README.md | 24 +++++++++++++++++++++++- index.loader.js | 7 ++++++- package.json | 2 +- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ba1fc55..e60be44 100644 --- a/README.md +++ b/README.md @@ -90,4 +90,26 @@ Example: @btn-default-color: #444; @btn-default-bg: #eee; -``` \ No newline at end of file +``` + +### extract-text-webpack-plugin + +Configure post style loaders in `bootstrap.config.js`. + +Example: + +``` javascript +module.exports = { + postStyleLoaders: [ + require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}' + ], + scripts: { + ... + }, + styles: { + ... + } +}; +``` + +Install `extract-text-webpack-plugin` before using this configuration. \ No newline at end of file diff --git a/index.loader.js b/index.loader.js index 7476747..f7a3b1c 100644 --- a/index.loader.js +++ b/index.loader.js @@ -1,8 +1,13 @@ module.exports = function () {}; module.exports.pitch = function (remainingRequest) { this.cacheable(true); + var config = require(this.resourcePath); + var postStyleLoaders = ''; + if((typeof config.postStyleLoaders !== 'undefined') && (config.postStyleLoaders.length > 0)){ + postStyleLoaders = config.postStyleLoaders.join('!') + '!'; + } return [ - 'require(' + JSON.stringify("-!" + require.resolve("style-loader") + '!' + require.resolve("css-loader") + + 'require(' + JSON.stringify("-!" + postStyleLoaders + require.resolve("style-loader") + '!' + require.resolve("css-loader") + '!' + require.resolve("less-loader") + '!' + require.resolve("./bootstrap-styles.loader.js") + '!' + remainingRequest) + ');', 'require(' + JSON.stringify("-!" + require.resolve("./bootstrap-scripts.loader.js") + "!" + remainingRequest) + ');' ].join("\n"); diff --git a/package.json b/package.json index 0ca498f..345b351 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "bootstrap-webpack", "description": "bootstrap3 package for webpack", "main": "index.js", - "version": "0.0.2", + "version": "0.0.3", "loader": "index.loader.js", "keywords": [ "bootstrap", From a2b3042f7b4c961890d583ee5439ab5ea28061a6 Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Mon, 1 Dec 2014 12:58:42 +0530 Subject: [PATCH 05/13] Updated repository and bugs url --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 345b351..bcc0ca7 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "name": "Scott Beck (@bline)" }, "bugs": { - "url": "https://github.com/bline/bootstrap-webpack/issues" + "url": "https://github.com/gowravshekar/bootstrap-webpack/issues" }, "dependencies": { "css-loader": "~0.6.3", @@ -21,7 +21,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/bline/bootstrap-webpack.git" + "url": "https://github.com/gowravshekar/bootstrap-webpack.git" }, "peerDependencies": { "bootstrap": ">=3.0.2" From dec74618a772631a7fcf34a09d4f70683cae7cab Mon Sep 17 00:00:00 2001 From: Gowrav Date: Thu, 4 Dec 2014 22:58:54 +0530 Subject: [PATCH 06/13] Update version to 0.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bcc0ca7..16955d8 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "bootstrap-webpack", "description": "bootstrap3 package for webpack", "main": "index.js", - "version": "0.0.3", + "version": "0.0.4", "loader": "index.loader.js", "keywords": [ "bootstrap", From a3dfa0c1bbb6bc32de2c235175b2f5c6a95d8de0 Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Sat, 11 Apr 2015 15:43:13 +0530 Subject: [PATCH 07/13] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e60be44..0600081 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ module.exports = { loaders: [ // the url-loader uses DataUrls. // the file-loader emits files. - { test: /\.woff$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, + { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.ttf$/, loader: "file-loader" }, { test: /\.eot$/, loader: "file-loader" }, { test: /\.svg$/, loader: "file-loader" } @@ -112,4 +112,4 @@ module.exports = { }; ``` -Install `extract-text-webpack-plugin` before using this configuration. \ No newline at end of file +Install `extract-text-webpack-plugin` before using this configuration. From 303cd04228b53d29379a595602856442ebe5392c Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Sat, 11 Apr 2015 15:49:34 +0530 Subject: [PATCH 08/13] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 0600081..d25e510 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,9 @@ bootstrap-webpack ================= -bootstrap package for webpack +bootstrap package for webpack. + +This is the `less` version. If you are looking for the `sass` version, refer to [bootstrap-sass-loader](https://github.com/justin808/bootstrap-sass-loader). Usage From 9c155357d6f5049c86bce517b12053ae6935c7fb Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Sat, 11 Apr 2015 15:58:50 +0530 Subject: [PATCH 09/13] Moved loaders to peerDependencies --- package.json | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 16955d8..43cf334 100644 --- a/package.json +++ b/package.json @@ -14,16 +14,19 @@ "bugs": { "url": "https://github.com/gowravshekar/bootstrap-webpack/issues" }, - "dependencies": { - "css-loader": "~0.6.3", - "less-loader": "~0.6.2", - "style-loader": "~0.6.0" - }, "repository": { "type": "git", "url": "https://github.com/gowravshekar/bootstrap-webpack.git" }, "peerDependencies": { - "bootstrap": ">=3.0.2" + "bootstrap": ">=3.0.2", + "css-loader": ">=0.6.3", + "less-loader": ">=0.6.2", + "style-loader": ">=0.6.0", + "url-loader": ">=0.5.5", + "file-loader": ">=0.8.1", + "imports-loader": ">=0.6.3", + "exports-loader": ">=0.6.2", + "extract-text-webpack-plugin": ">=0.3.8" } } From 2f74ae8a6904f2baebdffe83c19bbc92c424d67b Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Thu, 1 Oct 2015 09:14:46 +0530 Subject: [PATCH 10/13] Usage with other loaders and font extensions update --- README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index d25e510..ccaa103 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ module.exports = { loaders: [ // the url-loader uses DataUrls. // the file-loader emits files. - { test: /\.woff$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, + { test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.ttf$/, loader: "file-loader" }, { test: /\.eot$/, loader: "file-loader" }, { test: /\.svg$/, loader: "file-loader" } @@ -58,6 +58,33 @@ module.exports = { }; ``` +### Using with other js loaders. + +If you are using other loaders for all js files`(test: /\.js$/)`, this might interfere with bootstrap-webpack. +You can override the configuration loader order in the module request to suit special cases. + +* adding ! to a request will disable configured preLoaders +``` javascript +require("!bootstrap-webpack!./bootstrap.config.js") +``` +* adding !! to a request will disable all loaders specified in the configuration +``` javascript +require("!!bootstrap-webpack!./bootstrap.config.js") +``` +* adding -! to a request will disable configured preLoaders and loaders but not the postLoaders +``` javascript +require("-!bootstrap-webpack!./bootstrap.config.js") +``` + +Check details in [`webpack loader order`](https://webpack.github.io/docs/loaders.html) + +You can also change your configuration, so that other loaders are not applied to bootstrap. + +1. Use `exclude` option of the module.loaders section of the config. +2. Adjust the regex in `test` option of the module loaders to prevent matching all the js files to which the loaders are applied. + +See the explanation of different module options under [`module.loaders`](http://webpack.github.io/docs/configuration.html) + #### `bootstrap.config.js` Example: From 31b3f2f4049c83683b590c6bd0725e214decd377 Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Fri, 2 Oct 2015 16:16:05 +0530 Subject: [PATCH 11/13] Added flexibility to customise loaders --- README.md | 26 ++++++++++++++++++++++---- bootstrap.config.js | 4 ++++ index.loader.js | 35 +++++++++++++++++++++++++---------- package.json | 2 +- 4 files changed, 52 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index ccaa103..24ca07e 100644 --- a/README.md +++ b/README.md @@ -123,15 +123,33 @@ Example: ### extract-text-webpack-plugin -Configure post style loaders in `bootstrap.config.js`. +Configure style loader in `bootstrap.config.js`. Example: ``` javascript module.exports = { - postStyleLoaders: [ - require.resolve('extract-text-webpack-plugin/loader.js') + '?{"omit":1,"extract":true,"remove":true}' - ], + styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!less-loader'), + scripts: { + ... + }, + styles: { + ... + } +}; +``` + +Install `extract-text-webpack-plugin` before using this configuration. + +### extract-text-webpack-plugin and postcss-loader + +Configure style loader in `bootstrap.config.js`. + +Example: + +``` javascript +module.exports = { + styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader'), scripts: { ... }, diff --git a/bootstrap.config.js b/bootstrap.config.js index 6409d4e..221cf60 100644 --- a/bootstrap.config.js +++ b/bootstrap.config.js @@ -1,4 +1,8 @@ module.exports = { + + // Default for the style loading + styleLoader: 'style-loader!css-loader!less-loader', + scripts: { 'transition': true, 'alert': true, diff --git a/index.loader.js b/index.loader.js index f7a3b1c..1ddfc9b 100644 --- a/index.loader.js +++ b/index.loader.js @@ -1,14 +1,29 @@ -module.exports = function () {}; +module.exports = function() { +}; + module.exports.pitch = function (remainingRequest) { + + // Webpack 1.7.3 uses this.resourcePath. Leaving in remaining request for possibly older versions + // of Webpack + var configFilePath = this.resourcePath || remainingRequest; this.cacheable(true); - var config = require(this.resourcePath); - var postStyleLoaders = ''; - if((typeof config.postStyleLoaders !== 'undefined') && (config.postStyleLoaders.length > 0)){ - postStyleLoaders = config.postStyleLoaders.join('!') + '!'; + + if (!configFilePath || configFilePath.trim() === '') { + var msg = 'You specified the bootstrap-webpack with no configuration file. Please specify' + + ' the configuration file, like: \'bootstrap-webpack!./bootstrap.config.js\' or use' + + ' require(\'bootstrap-webpack\').'; + console.error('ERROR: ' + msg); + throw new Error(msg); } - return [ - 'require(' + JSON.stringify("-!" + postStyleLoaders + require.resolve("style-loader") + '!' + require.resolve("css-loader") + - '!' + require.resolve("less-loader") + '!' + require.resolve("./bootstrap-styles.loader.js") + '!' + remainingRequest) + ');', - 'require(' + JSON.stringify("-!" + require.resolve("./bootstrap-scripts.loader.js") + "!" + remainingRequest) + ');' - ].join("\n"); + + var config = require(configFilePath); + var styleLoader = config.styleLoader || 'style-loader!css-loader!less-loader'; + + var styleLoaderCommand = 'require(' + JSON.stringify('-!' + styleLoader + '!' + + require.resolve('./bootstrap-styles.loader.js') + '!' + configFilePath) + ');'; + var jsLoaderCommand = 'require(' + JSON.stringify('-!' + + require.resolve('./bootstrap-scripts.loader.js') + '!' + configFilePath) + ');'; + var result = [styleLoaderCommand, jsLoaderCommand].join('\n'); + return result; + }; diff --git a/package.json b/package.json index 43cf334..b15a833 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "bootstrap-webpack", "description": "bootstrap3 package for webpack", "main": "index.js", - "version": "0.0.4", + "version": "0.0.5", "loader": "index.loader.js", "keywords": [ "bootstrap", From 0881d4a2a97a36d77bc040c2619ef14746cd1897 Mon Sep 17 00:00:00 2001 From: Gowrav Shekar Date: Sat, 3 Oct 2015 13:22:53 +0530 Subject: [PATCH 12/13] Instructions to include jQuery. Update font loader configuration. --- README.md | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 24ca07e..b2b61cb 100644 --- a/README.md +++ b/README.md @@ -17,15 +17,23 @@ module.exports = { loaders: [ // the url-loader uses DataUrls. // the file-loader emits files. - { test: /\.(woff|woff2)$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, - { test: /\.ttf$/, loader: "file-loader" }, - { test: /\.eot$/, loader: "file-loader" }, - { test: /\.svg$/, loader: "file-loader" } + {test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'}, + {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'}, + {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'}, + {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'} ] } }; ``` +Bootstrap javascript components depends on jQuery. The simplest way of adding jQuery to your webpack app is by exposing `$` and `jQuery` to global namespace. + +``` javascript +require('expose?$!expose?jQuery!jquery'); +``` + +Add it before requiring `bootstrap-webpack`. This uses `expose-loader` of webpack. Install [expose-loader](https://github.com/webpack/expose-loader) by `npm install expose-loader --save-dev`. + ### Complete Bootstrap To use the complete bootstrap package including styles and scripts with the default settings: From 26e515dc6f4bba7ba8a0dfec48e19b5099a3d64e Mon Sep 17 00:00:00 2001 From: Rayron Victor Date: Wed, 2 Mar 2016 09:14:03 -0300 Subject: [PATCH 13/13] Update bootstrap-styles.loader.js Impoting bootstrap styles first and then importing the boostrap.config.less --- bootstrap-styles.loader.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/bootstrap-styles.loader.js b/bootstrap-styles.loader.js index 6647ade..701d9aa 100644 --- a/bootstrap-styles.loader.js +++ b/bootstrap-styles.loader.js @@ -49,12 +49,11 @@ module.exports = function (content) { var config = this.exec(content, this.resourcePath); var start = "@import \"~bootstrap/less/variables.less\";\n" - + "@icon-font-path: \"~bootstrap/fonts/\";\n" - + "@import \"./bootstrap.config.less\";\n"; + + "@icon-font-path: \"~bootstrap/fonts/\";\n"; source = start + styles.filter(function (style) { return config.styles[style]; }).map(function (style) { return "@import \"~bootstrap/less/" + style + ".less\";"; }).join("\n"); - return source; + return source + "@import \"./bootstrap.config.less\";\n"; }