diff --git a/README.md b/README.md index ba1fc55..b2b61cb 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 @@ -15,15 +17,23 @@ 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: /\.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: @@ -56,6 +66,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: @@ -90,4 +127,44 @@ Example: @btn-default-color: #444; @btn-default-bg: #eee; -``` \ No newline at end of file +``` + +### extract-text-webpack-plugin + +Configure style loader in `bootstrap.config.js`. + +Example: + +``` javascript +module.exports = { + 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: { + ... + }, + styles: { + ... + } +}; +``` + +Install `extract-text-webpack-plugin` before using this configuration. 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"; } 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 7476747..1ddfc9b 100644 --- a/index.loader.js +++ b/index.loader.js @@ -1,9 +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); - return [ - 'require(' + JSON.stringify("-!" + 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"); + + 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); + } + + 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 7c6d902..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.1", + "version": "0.0.5", "loader": "index.loader.js", "keywords": [ "bootstrap", @@ -12,18 +12,21 @@ "name": "Scott Beck (@bline)" }, "bugs": { - "url": "https://github.com/bline/bootstrap-webpack/issues" - }, - "dependencies": { - "css-loader": "~0.6.3", - "less-loader": "~0.6.2", - "style-loader": "~0.6.0" + "url": "https://github.com/gowravshekar/bootstrap-webpack/issues" }, "repository": { "type": "git", - "url": "https://github.com/bline/bootstrap-webpack.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" } }